/*
 * Jawa Wayang — the wayang kulit stage at night, matched to the realistic painted images of the intro scene
 * "wayang-blencong" (public/invitation-templates/_scenes/wayang-blencong, made for hadiahin.ajaaa). The template
 * reuses those files with the SAME URLs as the intro, so the browser downloads them once:
 *   sky.webp    the cover background (the stage, the blencong lamp, the kelir) and, cut with CSS backgrounds,
 *               the carved beam with red teeth (.jw-valance, top of kelir sections), the carved bottom band of the
 *               frame (.jw-carve, foot of kelir sections) and the stage plank (.jw-plank, between night sections)
 *   left/right  Rama and Sinta (in colour on the cover and in the closing, as shadows on the kelir in the hero)
 *   top.webp    the gold tatahan corners (cover, opening, story, wishes, closing)
 *   accent.webp the gunungan (heading rules, opening crest, hero shadow play, closing)
 *   bottom.webp the gamelan plank along the foot of the cover
 * Deep night-indigo sections (the painted sky) alternate with warm kelir-cream ones (the lit screen).
 * Colours: --inv-primary (night indigo), --inv-accent (burnished gold), --inv-background (kelir cream), --inv-text
 * (ink), --inv-night (deepest sky), --inv-vermilion, --inv-teal, --inv-sogan (carved wood), --inv-glow (lamp light).
 * Fonts: the client's pair (--inv-font-display for names, --inv-font-heading for titles) + Lora.
 * Sections: .jw-night (dark) and .jw-kelir (light). All classes start with "jw-".
 */

:root {
    --inv-primary: #1b2457;
    --inv-accent: #d9a441;
    --inv-background: #f8e6bf;
    --inv-text: #2a170b;
    --inv-night: #0a1023;
    --inv-vermilion: #c2412a;
    --inv-teal: #1f6b68;
    --inv-sogan: #5a2a0e;
    --inv-glow: #ffc864;
    --inv-radius: 14px;

    --jw-w: 460px;
    --jw-display: var(--inv-font-display, 'Parisienne'), 'Great Vibes', cursive;
    --jw-title: var(--inv-font-heading, 'Marcellus'), 'Cinzel', Georgia, serif;
    --jw-serif: 'Lora', Georgia, 'Times New Roman', serif;

    --jw-gold-hi: color-mix(in srgb, var(--inv-accent) 50%, #fff4d6);
    --jw-gold-lo: color-mix(in srgb, var(--inv-accent) 62%, #4a2a06);
    --jw-gold-ink: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-text));
    --jw-gold-grad: linear-gradient(90deg, var(--jw-gold-lo), var(--jw-gold-hi) 30%, var(--inv-accent) 55%, var(--jw-gold-hi) 75%, var(--jw-gold-lo));
    --jw-cream-hi: color-mix(in srgb, var(--inv-background) 55%, #fff);
    /* the lit kelir: bright in the middle, warm amber towards the carved frame (sampled from sky.webp) */
    --jw-kelir-grad: radial-gradient(85% 60% at 50% 40%, color-mix(in srgb, var(--inv-background) 45%, #fff), var(--inv-background) 50%, color-mix(in srgb, var(--inv-background) 74%, #b9772f) 100%);
    /* tatahan band: hairline, inten diamonds with bubukan dots, untu walang teeth (used as a mask) */
    --jw-tatah: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'%3E%3Crect width='28' height='1.3'/%3E%3Cpath fill-rule='evenodd' d='M7 3.2 11.8 8 7 12.8 2.2 8ZM7 5.7 4.7 8 7 10.3 9.3 8Z'/%3E%3Ccircle cx='16.6' cy='8' r='1'/%3E%3Ccircle cx='20' cy='8' r='1.35'/%3E%3Ccircle cx='23.4' cy='8' r='1'/%3E%3Cpath d='M0 16 3.5 13.3 7 16 10.5 13.3 14 16 17.5 13.3 21 16 24.5 13.3 28 16Z'/%3E%3C/svg%3E");

    /* context tokens: night by default, redefined in .jw-kelir */
    --jw-fg: color-mix(in srgb, var(--inv-background) 94%, #fff);
    --jw-muted: color-mix(in srgb, var(--inv-background) 84%, transparent);
    --jw-label: var(--inv-accent);
    --jw-key: var(--inv-accent);
    --jw-line: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    --jw-line-soft: color-mix(in srgb, var(--inv-accent) 24%, transparent);
    --jw-btn-bg: linear-gradient(180deg, var(--jw-gold-hi), var(--inv-accent) 55%, var(--jw-gold-lo));
    --jw-btn-fg: var(--inv-night);
    --jw-card-bg: linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 70%, transparent), color-mix(in srgb, var(--inv-night) 82%, transparent));
    --jw-field-bg: color-mix(in srgb, var(--inv-night) 55%, transparent);
    --jw-wash: color-mix(in srgb, var(--inv-glow) 16%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--inv-night); scroll-behavior: smooth; }
body.jw-body {
    margin: 0; background: var(--inv-night); color: var(--jw-fg);
    font: 400 1rem/1.7 var(--jw-serif);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
.jw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.jw-icon { width: 1.1em; height: 1.1em; flex: none; }
.jw-amp { font-family: var(--jw-display); color: var(--inv-accent); }

/* ---------- column and wide-screen backdrop ---------- */

.jw-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--inv-night); }
.jw-backdrop::before { content: ''; position: absolute; inset: -60px; background: var(--jw-photo, none) center / cover no-repeat; filter: blur(30px) saturate(.8) brightness(.35); }
.jw-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--inv-glow) 18%, transparent), transparent 70%), color-mix(in srgb, var(--inv-primary) 55%, transparent); }
.jw-page { position: relative; z-index: 1; width: min(100%, var(--jw-w)); min-height: 100vh; margin: 0 auto; background: var(--inv-night); overflow-x: clip; }
@media (min-width: 520px) { .jw-page { box-shadow: 0 0 0 1px var(--jw-line-soft), 0 0 90px rgb(0 0 0 / .6); } }
@media (max-width: 519px) { .jw-backdrop { display: none; } }
.jw-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0; width: min(100%, var(--jw-w)); margin: 0 auto; padding: .35rem .75rem;
    background: var(--inv-accent); color: var(--inv-night); font: 600 .68rem/1.3 var(--jw-serif); text-align: center; letter-spacing: .03em;
}

/* ---------- shared ornaments ---------- */

/* a tatahan band: gold leaf perforated like carved leather */
.jw-tatah {
    display: block; height: 14px; width: 100%;
    background: var(--jw-gold-grad);
    -webkit-mask: var(--jw-tatah) 0 50% / 24.5px 14px repeat-x; mask: var(--jw-tatah) 0 50% / 24.5px 14px repeat-x;
}
.jw-tatah--flip { transform: scaleY(-1); }

/*
 * Pieces of the painted stage, cut from sky.webp (760×1352) with background-size / -position, so they cost nothing
 * extra. For a source rectangle x0..x0+w, y0..y0+h: size = 760/w, position = x0/(760-w), y0/(1352-h).
 */
.jw-valance, .jw-kelir::before {
    /* the carved beam with the red scalloped teeth over the kelir: x 106..660, y 426..496 */
    display: block; aspect-ratio: 554 / 70;
    background: url('../../../_scenes/wayang-blencong/sky.webp') 51.46% 33.23% / 137.18% auto no-repeat;
}
.jw-carve, .jw-kelir::after {
    /* the carved floral band under the kelir: x 186..646, y 826..892 */
    display: block; aspect-ratio: 460 / 66;
    background: url('../../../_scenes/wayang-blencong/sky.webp') 62% 64.23% / 165.22% auto no-repeat;
}
.jw-plank, .jw-night + .jw-night::before {
    /* the carved stage plank at the front of the floor: x 0..760, y 1222..1302 */
    display: block; aspect-ratio: 760 / 80;
    background: url('../../../_scenes/wayang-blencong/sky.webp') 0 96.07% / 100% auto no-repeat;
}

/* the gold tatahan corner with its hanging pendants (top.webp), mirrored on the right */
.jw-corner {
    position: absolute; z-index: 1; top: 0; left: 0; width: min(44%, 190px); height: auto; pointer-events: none;
    filter: url(#jw-clean) drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}
.jw-corner--r { left: auto; right: 0; scale: -1 1; }

.jw-label {
    position: relative; z-index: 1; display: inline-block;
    font: 600 .7rem/1.4 var(--jw-title); letter-spacing: .32em; text-transform: uppercase; color: var(--jw-label);
}

.jw-heading { position: relative; margin-bottom: 2rem; isolation: isolate; }
/* a soft wash of colour behind the heading */
.jw-heading::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(100%, 22rem); height: 7.5rem; translate: -50% -50%;
    background: radial-gradient(closest-side, var(--jw-wash), transparent); pointer-events: none;
}
.jw-heading__label { font: 600 .7rem/1.4 var(--jw-title); letter-spacing: .32em; text-transform: uppercase; color: var(--jw-label); }
.jw-heading__title { margin-top: .4rem; font: 400 clamp(1.7rem, 7.6vw, 2.1rem)/1.15 var(--jw-title); letter-spacing: .02em; color: var(--jw-fg); }
/* the rule: two tatahan bands around a small gunungan */
.jw-heading__rule { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .7rem; }
.jw-heading__rule span { display: block; width: 4.6rem; height: 12px; background: var(--jw-gold-grad); -webkit-mask: var(--jw-tatah) 100% 50% / 21px 12px repeat-x; mask: var(--jw-tatah) 100% 50% / 21px 12px repeat-x; }
.jw-heading__rule span:last-child { -webkit-mask-position: 0 50%; mask-position: 0 50%; }
.jw-heading__rule img { display: block; width: auto; height: 3.1rem; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)); }
.jw-night .jw-heading__rule img, .jw-opening__gunungan { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-glow) 35%, transparent)) drop-shadow(0 4px 6px rgb(0 0 0 / .5)); }
html.inv-anim .jw-heading__rule span { scale: .2 1; transition: scale 1.1s cubic-bezier(.2, .7, .2, 1) .25s; }
html.inv-anim .jw-heading__rule span:first-child { transform-origin: right; }
html.inv-anim .jw-heading__rule span:last-child { transform-origin: left; }
html.inv-anim .is-revealed .jw-heading__rule span, html.inv-anim .jw-heading.is-revealed .jw-heading__rule span { scale: 1; }

.jw-lead { max-width: 24rem; margin: -.5rem auto 1.8rem; color: var(--jw-muted); font-size: .97rem; }

/* the wayang puppets (left.webp / right.webp): in colour, or as their shadow on the lit kelir */
.jw-wayang { position: absolute; display: block; width: auto; max-width: none; pointer-events: none; }
.jw-wayang:not(.jw-wayang--shadow) { filter: drop-shadow(0 10px 14px rgb(0 0 0 / .5)); }
.jw-wayang--shadow { filter: brightness(0) blur(1.1px); opacity: .8; }

/* ---------- buttons (shared components) ---------- */

.inv-button {
    gap: .55rem; padding: .85rem 1.5rem; border-radius: 999px;
    background: var(--jw-btn-bg); color: var(--jw-btn-fg);
    font: 400 .8rem/1.2 var(--jw-title); letter-spacing: .12em;
    box-shadow: 0 10px 22px -12px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .35);
}
.inv-button--outline { background: transparent; color: var(--jw-key); box-shadow: inset 0 0 0 1px var(--jw-line); }
.inv-button--outline:hover { background: color-mix(in srgb, var(--inv-accent) 12%, transparent); }
.inv-button .jw-icon { width: 1.15rem; height: 1.15rem; }
.jw-pill {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .48rem 1rem;
    border-radius: 999px; color: var(--jw-key); text-decoration: none; box-shadow: inset 0 0 0 1px var(--jw-line);
    font: 500 .82rem/1 var(--jw-serif); transition: background .25s ease;
}
.jw-pill:hover { background: color-mix(in srgb, var(--inv-accent) 12%, transparent); }


/* ---------- cover: the painted stage ---------- */

/*
 * The scene box keeps the painting's proportions (760×1352) and is sized like object-fit: cover, lifted by 5% so
 * the lamp sits near the top. On short screens it shrinks so that the text, which starts at 57.5% of its height
 * (just under the screen), always has --jw-th of room; the sides then fade into the night colour. The photo box is
 * placed in % of the scene box: the painted screen is x 112..650, y 492..817 of 760×1352.
 * Container units: the cover is the size container (cqw = its width, cqh = its height).
 */
.jw-cover {
    position: fixed; inset: 0; z-index: 30; width: min(100%, var(--jw-w)); margin: 0 auto;
    display: flex; overflow-x: hidden; overflow-y: auto; isolation: isolate; container-type: size;
    /* the painting's own night sky above and dark floor below, behind the scene box */
    background: linear-gradient(180deg, #0b132a 0%, #0d1024 40%, #160a0c 100%);
    color: var(--jw-fg);
    --jw-th: 300px;
    --jw-bh: max(260px, min(max(100cqh, 100cqw * 1.7789), (100cqh - var(--jw-th)) / .575));
    --jw-floor: 9.5cqw;
    --jw-pad-b: calc(9.5cqw + 1.3rem);
}
.jw-scene {
    position: absolute; z-index: 0; left: 50%; top: calc(var(--jw-bh) * -.05);
    width: calc(var(--jw-bh) * .5621); height: var(--jw-bh); translate: -50% 0;
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.jw-scene__bg { display: block; width: 100%; height: 100%; max-width: none; }
/* the blencong flame breathes */
.jw-scene__flame {
    position: absolute; left: 50%; top: 13.4%; width: 46%; aspect-ratio: 1; translate: -50% -50%; mix-blend-mode: screen;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-glow) 55%, transparent) 0%, color-mix(in srgb, var(--inv-glow) 16%, transparent) 30%, transparent 62%);
    animation: jw-flicker 4.2s ease-in-out infinite;
}
@keyframes jw-flicker { 0%, 100% { opacity: .7; } 30% { opacity: 1; } 55% { opacity: .6; } 75% { opacity: .9; } }
.jw-scene__screen { position: absolute; left: 14.74%; top: 36.39%; width: 70.79%; height: 24.04%; overflow: hidden; }
/* the screen is wide (538×325) and cover photos are mostly portrait: aim at the upper part, where the faces are */
.jw-scene__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 14%; }
/* the lamp light on the screen: warm at the top, the edges sinking into the carved frame */
.jw-scene__screen::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(90% 75% at 50% 0%, rgb(255 214 140 / .22), transparent 70%);
    box-shadow: inset 0 0 14px 3px rgb(70 30 4 / .65), inset 0 0 2px 1px rgb(40 16 2 / .7);
}
.jw-cover--plain .jw-scene__screen::after { background: none; box-shadow: none; }
/* without a photo: the monogram as a shadow on the lit screen */
.jw-scene__mono {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .45rem;
    font: 400 calc(var(--jw-bh) * .075)/1 var(--jw-display); color: rgb(52 24 6 / .82); text-shadow: 0 0 6px rgb(52 24 6 / .35);
}
.jw-scene__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--inv-vermilion); }

/* the soft dark shade where the text sits */
.jw-cover__shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent calc(var(--jw-bh) * .47), rgb(12 8 14 / .5) calc(var(--jw-bh) * .57), rgb(12 8 14 / .82) calc(var(--jw-bh) * .68), rgb(10 7 12 / .9) 100%);
}
.jw-cover__corner {
    position: absolute; z-index: 2; top: 0; left: 0; width: min(50%, 220px); height: auto; pointer-events: none;
    filter: url(#jw-clean) drop-shadow(0 6px 10px rgb(0 0 0 / .5));
}
.jw-cover__corner--r { left: auto; right: 0; scale: -1 1; }
/* Rama and Sinta at the edges, from the foot of the screen down to the plank */
.jw-cover__rama, .jw-cover__sinta { z-index: 2; bottom: calc(var(--jw-floor) * .45); height: min(62cqh, calc(100cqh - var(--jw-bh) * .56 - var(--jw-floor) * .45)); }
.jw-cover__rama { left: 0; }
.jw-cover__sinta { right: 0; }
/* the gamelan plank (bottom.webp): only the carved board on most screens, the kenong and jasmine on tall ones */
.jw-cover__floor {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--jw-floor); pointer-events: none;
    background: url('../../../_scenes/wayang-blencong/bottom.webp') 50% 100% / 100% auto no-repeat;
    filter: drop-shadow(0 -4px 10px rgb(0 0 0 / .45));
}
@media (min-height: 800px) {
    .jw-cover { --jw-floor: 21cqw; --jw-pad-b: calc(21cqw + .5rem); }
}

.jw-cover__inner {
    position: relative; z-index: 3; width: 100%; min-height: 100%; margin: auto;
    padding: calc(var(--jw-bh) * .575) 1rem var(--jw-pad-b);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; text-align: center;
}
.jw-cover__title { font: 400 .78rem/1.4 var(--jw-title); letter-spacing: .3em; text-transform: uppercase; color: var(--jw-gold-hi); text-shadow: 0 1px 8px rgb(0 0 0 / .8); }
.jw-cover__names {
    max-width: 21rem; font: 400 clamp(2.3rem, 11vw, 3rem)/1.12 var(--jw-display); color: var(--jw-fg);
    text-shadow: 0 2px 18px rgb(0 0 0 / .75), 0 0 2px rgb(0 0 0 / .5); overflow-wrap: anywhere;
}
.jw-cover__names .jw-amp { font-size: .78em; }
.jw-cover__date {
    display: inline-flex; align-items: center; gap: .7rem;
    font: 400 .82rem/1.4 var(--jw-title); letter-spacing: .14em; text-transform: uppercase; color: var(--jw-fg); text-shadow: 0 1px 8px rgb(0 0 0 / .8);
}
.jw-cover__date::before, .jw-cover__date::after { content: ''; width: 1.6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--inv-accent)); }
.jw-cover__date::after { transform: scaleX(-1); }
.jw-guest {
    margin-top: .3rem; min-width: min(16rem, 100%); max-width: 17.5rem; padding: .5rem 1.1rem .55rem; border-radius: 12px;
    background: rgb(14 9 12 / .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: inset 0 0 0 1px var(--jw-line), 0 10px 24px -12px rgb(0 0 0 / .8);
}
.jw-guest__label { font: 400 .74rem/1.4 var(--jw-serif); letter-spacing: .04em; color: var(--jw-muted); }
.jw-guest__name { margin-top: .1rem; font: 600 1.02rem/1.35 var(--jw-serif); color: var(--jw-fg); overflow-wrap: anywhere; }
.jw-open { margin-top: .4rem; padding: .85rem 1.9rem; font-size: .8rem; box-shadow: 0 10px 26px -8px rgb(0 0 0 / .9), 0 0 0 1px rgb(0 0 0 / .25), inset 0 1px 0 rgb(255 255 255 / .4); }
.jw-open .jw-icon { width: 1.25rem; height: 1.25rem; }
.jw-cover--leave { transition: opacity .8s ease, transform .9s cubic-bezier(.7, 0, .3, 1); }
.jw-cover--gone { opacity: 0; transform: scale(1.04); }

/* opening moment: the stage lights up, the photo appears on the screen, the puppets and corners slide in */
html.inv-anim .jw-scene__bg { animation: jw-stage 1.6s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .jw-scene__screen { animation: jw-project 1.2s ease-out .45s both; }
html.inv-anim .jw-cover__rama { animation: jw-in-l 1.1s cubic-bezier(.2, .7, .2, 1) .5s both; }
html.inv-anim .jw-cover__sinta { animation: jw-in-r 1.1s cubic-bezier(.2, .7, .2, 1) .6s both; }
html.inv-anim .jw-cover__corner { animation: jw-drop 1s cubic-bezier(.2, .7, .2, 1) .7s both; }
html.inv-anim .jw-cover__floor { animation: jw-up 1s cubic-bezier(.2, .7, .2, 1) .55s both; }
@keyframes jw-stage { from { opacity: 0; transform: scale(1.06); filter: brightness(.35); } }
@keyframes jw-project { from { opacity: 0; filter: brightness(1.7) blur(5px); } }
@keyframes jw-in-l { from { opacity: 0; translate: -40px 0; } }
@keyframes jw-in-r { from { opacity: 0; translate: 40px 0; } }
@keyframes jw-drop { from { opacity: 0; translate: 0 -24px; } }
@keyframes jw-up { from { opacity: 0; translate: 0 20px; } }

/* short screens: everything, the guest and the button stay on screen */
@media (max-height: 760px) {
    .jw-cover { --jw-th: 282px; }
    .jw-cover__inner { gap: .38rem; }
    .jw-cover__names { font-size: clamp(2.1rem, 10vw, 2.6rem); }
}
@media (max-height: 660px) {
    .jw-cover { --jw-th: 262px; --jw-pad-b: calc(9.5cqw + .9rem); }
    .jw-cover__inner { gap: .3rem; }
    .jw-cover__title { font-size: .7rem; }
    .jw-cover__names { font-size: clamp(1.95rem, 9.4vw, 2.3rem); }
    .jw-cover__date { font-size: .76rem; }
    .jw-guest { padding: .38rem 1rem .42rem; }
    .jw-guest__name { font-size: .95rem; }
    .jw-open { margin-top: .25rem; padding: .72rem 1.7rem; }
}
@media (max-height: 600px) {
    .jw-cover { --jw-th: 262px; --jw-pad-b: 1.6rem; }
}


/* ---------- hero: the lit kelir with the shadow play ---------- */

.jw-hero {
    position: relative; overflow: hidden; isolation: isolate; padding: 0 1.3rem; text-align: center; color: var(--inv-text);
    background: var(--jw-kelir-grad);
    --jw-label: var(--inv-vermilion);
}
.jw-hero > * { position: relative; z-index: 1; }
.jw-hero > .jw-valance { z-index: 2; margin: 0 -1.3rem 2.4rem; }
.jw-hero > .jw-carve { z-index: 2; margin: -2px -1.3rem 0; }
/* the lamp light falling on the screen from above */
.jw-hero > .jw-hero__light {
    position: absolute; z-index: 0; left: 50%; top: -12%; width: 150%; aspect-ratio: 1; translate: -50% 0; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-glow) 34%, transparent), transparent 55%);
    animation: jw-flicker 4.2s ease-in-out infinite;
}
.jw-hero__names { margin-top: .4rem; font: 400 clamp(2.5rem, 12vw, 3.3rem)/1.1 var(--jw-display); color: var(--inv-primary); overflow-wrap: anywhere; }
.jw-hero__names .jw-amp { color: var(--inv-vermilion); font-size: .78em; }
.jw-hero__date { margin-top: .5rem; font: 400 .82rem/1.4 var(--jw-title); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-text); }
.jw-hero__quote { max-width: 21rem; margin: 1.3rem auto 0; font: italic 400 .98rem/1.65 var(--jw-serif); color: color-mix(in srgb, var(--inv-text) 88%, transparent); }
/*
 * The wayang play: Rama and Sinta in colour at the screen edges, the gunungan between them under the monogram. Each
 * figure (.jw-shadowplay__fig, the whole stage box) holds the puppet and, behind it, its shadow cast on the kelir
 * (.jw-shadowplay__cast: the same image, black and blurred, a little off to the side), which flickers with the lamp.
 */
.jw-shadowplay { height: clamp(300px, 96vw, 420px); margin: 1.4rem -1.3rem 0; }
.jw-shadowplay__fig { position: absolute; inset: 0; pointer-events: none; }
.jw-shadowplay__fig img { position: absolute; bottom: -4px; display: block; width: auto; max-width: none; height: 100%; }
.jw-shadowplay__fig--rama { transform-origin: 12% 100%; animation: jw-sway 6s ease-in-out infinite alternate; }
.jw-shadowplay__fig--rama img { left: 0; }
.jw-shadowplay__fig--sinta { transform-origin: 88% 100%; animation: jw-sway 6.6s ease-in-out infinite alternate-reverse; }
.jw-shadowplay__fig--sinta img { right: 0; height: 96%; }
.jw-shadowplay__fig--gunungan { transform-origin: 50% 100%; animation: jw-kayon 7.5s ease-in-out infinite alternate; }
.jw-shadowplay__fig--gunungan img { left: 50%; height: 56%; translate: -50% 0; }
.jw-shadowplay__fig img:not(.jw-shadowplay__cast) { filter: drop-shadow(0 6px 8px rgb(60 25 4 / .35)); }
/* the shadow on the kelir: off to the side and up, soft, breathing with the flame */
.jw-shadowplay__fig .jw-shadowplay__cast {
    filter: brightness(0) blur(3px); opacity: .26; transform: translate(16px, -10px) scale(1.03);
    animation: jw-cast 4.2s ease-in-out infinite;
}
.jw-shadowplay__fig--sinta .jw-shadowplay__cast { transform: translate(-16px, -10px) scale(1.03); }
.jw-shadowplay__fig--gunungan .jw-shadowplay__cast { transform: translate(0, -14px) scale(1.08); opacity: .2; }
@keyframes jw-sway { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
@keyframes jw-kayon { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes jw-cast { 0%, 100% { opacity: .26; filter: brightness(0) blur(3px); } 40% { opacity: .18; filter: brightness(0) blur(4.5px); } 70% { opacity: .3; } }
.jw-shadowplay__mono {
    position: absolute; z-index: 1; left: 50%; top: 2%; translate: -50% 0; display: flex; align-items: center; gap: .35rem;
    font: 400 2.2rem/1 var(--jw-display); color: color-mix(in srgb, var(--inv-vermilion) 80%, #000);
}
.jw-shadowplay__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--inv-accent); }
/* entrance: the puppets slide in from the edges, the gunungan rises (the cast shadows come with them) */
html.inv-anim .jw-shadowplay__fig { transition: translate 1.3s cubic-bezier(.2, .7, .2, 1), opacity 1s ease; }
html.inv-anim .jw-shadowplay__fig--gunungan { transition-delay: .35s; }
html.inv-anim .jw-shadowplay:not(.is-revealed) .jw-shadowplay__fig { opacity: 0; }
html.inv-anim .jw-shadowplay:not(.is-revealed) .jw-shadowplay__fig--rama { translate: -45% 0; }
html.inv-anim .jw-shadowplay:not(.is-revealed) .jw-shadowplay__fig--sinta { translate: 45% 0; }
html.inv-anim .jw-shadowplay:not(.is-revealed) .jw-shadowplay__fig--gunungan { translate: 0 30%; }

/* jasmine petals drifting down the lit kelir */
.jw-hero > .jw-petals { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.jw-petals i {
    position: absolute; top: -4%; left: var(--x); width: var(--s, 9px); aspect-ratio: 1 / 1.35; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(circle at 40% 30%, #fff, #fbf3df 55%, #e9d6a6); box-shadow: 0 1px 2px rgb(90 50 10 / .25);
    opacity: 0; animation: jw-petal var(--d, 13s) linear var(--w, 0s) infinite;
}
.jw-petals i:nth-child(1) { --x: 8%; --d: 14s; --w: -2s; }
.jw-petals i:nth-child(2) { --x: 22%; --d: 17s; --w: -9s; --s: 7px; }
.jw-petals i:nth-child(3) { --x: 36%; --d: 12s; --w: -5s; }
.jw-petals i:nth-child(4) { --x: 49%; --d: 16s; --w: -12s; --s: 11px; }
.jw-petals i:nth-child(5) { --x: 61%; --d: 13s; --w: -1s; --s: 7px; }
.jw-petals i:nth-child(6) { --x: 72%; --d: 18s; --w: -7s; }
.jw-petals i:nth-child(7) { --x: 84%; --d: 15s; --w: -14s; --s: 8px; }
.jw-petals i:nth-child(8) { --x: 93%; --d: 12.5s; --w: -4s; --s: 10px; }
.jw-petals i:nth-child(9) { --x: 30%; --d: 19s; --w: -16s; --s: 6px; }
@keyframes jw-petal {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    8% { opacity: .9; }
    50% { transform: translate(26px, 52vh) rotate(200deg); }
    92% { opacity: .8; }
    100% { opacity: 0; transform: translate(-10px, 104vh) rotate(380deg); }
}


/* ---------- sections ---------- */

.jw-main { position: relative; background: var(--inv-night); }
.jw-section { position: relative; overflow: hidden; isolation: isolate; padding: 4.6rem 1.4rem; text-align: center; color: var(--jw-fg); }
.jw-section > * { position: relative; z-index: 1; }
.jw-section > .jw-corner { position: absolute; }
/* night sections that hang the gold corners leave room for them */
.jw-section.jw-cornered { padding-top: 7.4rem; }
.jw-night {
    background:
        radial-gradient(100% 40% at 50% 0%, color-mix(in srgb, var(--inv-glow) 13%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-primary), var(--inv-night));
}
/* two night sections in a row: the carved stage plank between them */
.jw-night + .jw-night { padding-top: calc(10.53% + 3.6rem); }
.jw-night + .jw-night.jw-cornered { padding-top: 7.4rem; }
.jw-night + .jw-night::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 0; box-shadow: 0 8px 16px -6px rgb(0 0 0 / .6); }
.jw-night + .jw-night.jw-cornered::before { content: none; }
/* kelir sections: the lit screen under the carved beam with its red teeth, standing on the carved bottom band */
.jw-kelir {
    --jw-fg: var(--inv-text);
    --jw-muted: color-mix(in srgb, var(--inv-text) 82%, transparent);
    --jw-label: var(--inv-vermilion);
    --jw-key: color-mix(in srgb, var(--inv-vermilion) 85%, #000);
    --jw-line: color-mix(in srgb, var(--jw-gold-ink) 55%, transparent);
    --jw-line-soft: color-mix(in srgb, var(--jw-gold-ink) 22%, transparent);
    --jw-btn-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, #fff 10%), var(--inv-primary));
    --jw-btn-fg: var(--jw-cream-hi);
    --jw-card-bg: linear-gradient(170deg, #fffdf8, color-mix(in srgb, #fff 55%, var(--inv-background)));
    --jw-field-bg: #fff;
    --jw-wash: color-mix(in srgb, var(--inv-vermilion) 13%, transparent);
    padding-top: calc(12.64% + 2.8rem); padding-bottom: calc(14.35% + 2.6rem);
    background: var(--jw-kelir-grad);
}
.jw-kelir::before, .jw-kelir::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; pointer-events: none; }
.jw-kelir::before { top: 0; filter: drop-shadow(0 4px 6px rgb(60 25 4 / .35)); }
.jw-kelir::after { bottom: 0; }

/* photo-gradient backgrounds */
.jw-section > .jw-photobg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.jw-photobg__img { position: absolute; inset: -48px 0; background: var(--jw-photo) center / cover no-repeat; filter: saturate(.9); --inv-parallax: 36px; }
.jw-photobg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(90% 45% at 50% 0%, color-mix(in srgb, var(--inv-glow) 16%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 86%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 74%, transparent) 40%, color-mix(in srgb, var(--inv-night) 88%, transparent) 78%, var(--inv-night) 100%);
}
.jw-photobg--plain::after {
    background:
        radial-gradient(90% 45% at 50% 0%, color-mix(in srgb, var(--inv-glow) 22%, transparent), transparent 70%),
        radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--inv-vermilion) 20%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-primary), var(--inv-night));
}

.jw-card {
    position: relative; overflow: hidden; background: var(--jw-card-bg);
    border: 1px solid var(--jw-line-soft); border-radius: 18px; box-shadow: 0 24px 44px -30px rgb(0 0 0 / .7);
}
.jw-night .jw-card { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- opening ---------- */

.jw-opening__gunungan { display: block; width: auto; height: 4.6rem; margin: 0 auto .7rem; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }

.jw-arabic { margin-top: .9rem; font: 400 1.8rem/1.8 'Amiri', serif; color: var(--inv-accent); }
.jw-opening__greeting { margin: .2rem 0 1rem; font: 400 1.1rem/1.5 var(--jw-title); color: var(--jw-fg); }
.jw-opening .jw-lead { margin: 0 auto; }
.jw-quote {
    position: relative; max-width: 24rem; margin: 2.4rem auto 0; padding: 1.1rem 1.4rem;
    border-radius: 4px; background: color-mix(in srgb, var(--inv-night) 50%, transparent);
    box-shadow: inset 0 0 0 1px var(--jw-line-soft), 0 24px 40px -26px rgb(0 0 0 / .8);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.jw-quote blockquote { margin: 1rem 0 .4rem; font: italic 400 1rem/1.75 var(--jw-serif); color: var(--jw-fg); }
.jw-quote figcaption { margin-bottom: 1rem; font: 600 .68rem/1.4 var(--jw-title); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-accent); }

/* ---------- couple ---------- */

.jw-couple { padding-bottom: 4rem; }
.jw-person { position: relative; display: grid; justify-items: start; text-align: left; }
.jw-person--end { justify-items: end; text-align: right; }
.jw-person__ghost { z-index: 0; top: 34%; left: -1.4rem; height: 66%; width: auto; opacity: .09; }
.jw-person--end .jw-person__ghost { left: auto; right: -1.4rem; }
.jw-person__frame { position: relative; z-index: 1; width: min(70%, 270px); }
/* the offset vermilion block behind the carved frame */
.jw-person__frame::before {
    content: ''; position: absolute; inset: 0; z-index: -1; translate: 14px 14px; border-radius: 4px;
    background: linear-gradient(150deg, var(--inv-vermilion), color-mix(in srgb, var(--inv-vermilion) 70%, #2a0505));
}
.jw-person--end .jw-person__frame::before { translate: -14px 14px; }
.jw-person__img {
    display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border-radius: 4px;
    border: 6px solid var(--inv-sogan); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent), inset 0 0 0 1px rgb(255 255 255 / .2), 0 20px 34px -20px rgb(0 0 0 / .6);
}
.jw-person__img--empty { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--inv-primary) 75%, #fff 10%), var(--inv-night)); font: 400 4rem/1 var(--jw-display); color: var(--inv-accent); }
.jw-person__text { position: relative; z-index: 1; width: min(90%, 21rem); margin-top: 1.8rem; padding-left: 1rem; border-left: 2px solid var(--inv-accent); }
.jw-person--end .jw-person__text { padding-left: 0; padding-right: 1rem; border-left: 0; border-right: 2px solid var(--inv-accent); }
.jw-person__role { font: 600 .66rem/1.4 var(--jw-title); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-vermilion); }
.jw-person__nick { margin-top: .15rem; font: 400 2.7rem/1.1 var(--jw-display); color: var(--inv-primary); }
.jw-person__name { margin-top: .3rem; font: 400 1.08rem/1.4 var(--jw-title); letter-spacing: .03em; color: var(--inv-text); }
.jw-person__parents { margin-top: .5rem; font-size: .95rem; color: var(--jw-muted); }
.jw-person__parents strong { color: var(--inv-text); font-weight: 600; }
.jw-and { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 2.6rem 0 2.4rem; }
.jw-and span { width: 4.5rem; height: 12px; background: var(--jw-gold-grad); -webkit-mask: var(--jw-tatah) 0 50% / 21px 12px repeat-x; mask: var(--jw-tatah) 0 50% / 21px 12px repeat-x; }
.jw-and b { font: 400 3rem/1 var(--jw-display); color: var(--inv-vermilion); }

/* ---------- countdown ---------- */

.jw-cal {
    --inv-cal-bg: var(--jw-cream-hi);
    --inv-cal-text: var(--inv-text);
    --inv-cal-mark: var(--inv-vermilion);
    max-width: 20rem; margin: 0 auto 1.6rem; border-radius: 6px; border-top: 6px solid var(--inv-vermilion);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 24px 44px -22px rgb(0 0 0 / .8);
    font-family: var(--jw-serif);
}
.jw-cal .inv-cal__month { font: 400 1.9rem/1.1 var(--jw-display); color: var(--inv-primary); }
.jw-cal .inv-cal__year, .jw-cal .inv-cal__dow { font-family: var(--jw-title); }
.jw-cal .inv-cal__note { font-weight: 600; }
.inv-countdown { gap: .5rem; }
.inv-countdown__item {
    flex: 1; max-width: 4.7rem; min-width: 0; padding: .75rem .2rem .6rem; border-radius: 6px; color: var(--jw-fg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-glow) 16%, transparent), color-mix(in srgb, var(--inv-night) 60%, transparent));
    box-shadow: inset 0 0 0 1px var(--jw-line), inset 0 2px 0 color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 12px 22px -14px rgb(0 0 0 / .7);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.inv-countdown__value { font: 400 1.6rem/1.15 var(--jw-title); color: var(--inv-accent); }
.inv-countdown__label { margin-top: .2rem; font: 600 .56rem/1.2 var(--jw-title); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.inv-countdown__done { font-style: italic; color: var(--jw-muted); }
.inv-countdown__actions { margin-top: 1.4rem; }
.inv-countdown__actions .inv-button { padding: .65rem 1rem; font-size: .66rem; letter-spacing: .06em; }

/* ---------- events ---------- */

.jw-events {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-vermilion) 16%, transparent) 0, transparent 20rem),
        var(--jw-kelir-grad);
}
.jw-events__list { display: grid; gap: 2rem; max-width: 23.5rem; margin: 0 auto; }
.jw-event {
    overflow: hidden; border-radius: 6px; text-align: left; color: var(--inv-text);
    background: linear-gradient(180deg, #fffdf8, var(--jw-cream-hi));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 28px 50px -28px rgb(0 0 0 / .55);
}
.jw-event__photo { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--jw-photo) center 35% / cover no-repeat, var(--inv-primary); }
.jw-event__photo::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
    background: var(--jw-gold-grad); -webkit-mask: var(--jw-tatah) 0 50% / 24.5px 14px repeat-x; mask: var(--jw-tatah) 0 50% / 24.5px 14px repeat-x;
}
.jw-event__photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--inv-night) 55%, transparent)); }
.jw-event__body { display: grid; gap: .8rem; padding: 1.25rem 1.25rem 1.5rem; }
.jw-event__name { font: 400 clamp(1.5rem, 6.6vw, 1.75rem)/1.2 var(--jw-title); color: var(--inv-primary); overflow-wrap: anywhere; }
.jw-event__when { display: flex; align-items: stretch; gap: .9rem; }
.jw-event__day {
    flex: none; display: grid; justify-items: center; align-content: center; width: 5.2rem; padding: .55rem .3rem; border-radius: 4px; text-align: center;
    background: linear-gradient(180deg, var(--inv-primary), var(--inv-night)); color: var(--jw-cream-hi);
    box-shadow: inset 0 2px 0 var(--inv-accent), 0 10px 18px -10px rgb(0 0 0 / .6);
}
.jw-event__day span { font: 600 .56rem/1.3 var(--jw-title); letter-spacing: .14em; text-transform: uppercase; }
.jw-event__day b { font: 400 2.2rem/1.05 var(--jw-title); color: var(--inv-accent); }
.jw-event__info { display: grid; align-content: center; gap: .35rem; min-width: 0; }
.jw-event__date, .jw-event__time, .jw-event__dress { display: flex; align-items: flex-start; gap: .45rem; font-size: .92rem; line-height: 1.45; }
.jw-event__time { font-weight: 600; color: color-mix(in srgb, var(--inv-vermilion) 88%, #000); }
.jw-event .jw-icon { margin-top: .15rem; color: var(--jw-gold-ink); }
.jw-event__place { display: flex; align-items: flex-start; gap: .45rem; padding-top: .8rem; border-top: 1px dashed color-mix(in srgb, var(--inv-text) 22%, transparent); }
.jw-event__venue { font: 400 1.02rem/1.35 var(--jw-title); overflow-wrap: anywhere; }
.jw-event__address { font-size: .9rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-text) 80%, transparent); overflow-wrap: anywhere; }
.jw-event__dress { padding: .5rem .8rem; border-radius: 6px; background: color-mix(in srgb, var(--inv-teal) 10%, transparent); }
.jw-event__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.jw-event__actions .inv-button { padding: .62rem 1rem; font-size: .66rem; letter-spacing: .06em; }
.jw-event__actions .inv-maps { margin: 0; }
.jw-event__save { color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--inv-primary); }

/* ---------- love story: acts of a lakon ---------- */

.jw-acts { position: relative; max-width: 24rem; margin: 0 auto; padding: 0 0 0 2.6rem; list-style: none; text-align: left; }
.jw-acts::before { content: ''; position: absolute; left: 1rem; top: .6rem; bottom: 1rem; width: 1px; background: linear-gradient(180deg, var(--inv-accent), var(--jw-line-soft)); }
.jw-act { position: relative; }
.jw-act + .jw-act { margin-top: 1.6rem; }
.jw-act__num {
    position: absolute; left: -2.6rem; top: .3rem; display: grid; place-items: center; width: 2rem; height: 2rem; isolation: isolate;
    font: 600 .66rem/1 var(--jw-title); color: var(--inv-night);
}
.jw-act__num::before {
    content: ''; position: absolute; inset: 0; z-index: -1; rotate: 45deg; border-radius: 4px;
    background: linear-gradient(135deg, var(--jw-gold-hi), var(--inv-accent) 50%, var(--jw-gold-lo)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-night) 80%, transparent);
}
.jw-act__card {
    padding: 1rem 1.1rem 1.15rem; border-radius: 6px; background: color-mix(in srgb, var(--inv-night) 52%, transparent);
    box-shadow: inset 0 0 0 1px var(--jw-line-soft); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.jw-act__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: .9rem; border-radius: 4px; box-shadow: 0 0 0 1px var(--jw-line); }
.jw-act__babak { font: 600 .64rem/1.4 var(--jw-title); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-accent); }
.jw-act__babak span { letter-spacing: .08em; }
.jw-act__title { margin-top: .25rem; font: 400 1.15rem/1.35 var(--jw-title); color: var(--jw-fg); overflow-wrap: anywhere; }
.jw-act__story { margin-top: .4rem; font-size: .92rem; line-height: 1.65; color: var(--jw-muted); overflow-wrap: anywhere; }

/* ---------- gallery ---------- */

.jw-gallery .inv-gallery-wrap { min-width: 0; }
.jw-gallery .inv-gallery-slider { grid-template-columns: minmax(0, 1fr); max-width: 24rem; margin: 0 auto; }
.jw-gallery .inv-gallery-slider__stage { border-radius: 4px; border: 7px solid var(--inv-sogan); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent), 12px 12px 0 color-mix(in srgb, var(--inv-vermilion) 85%, transparent), 0 30px 44px -24px rgb(0 0 0 / .6); }
.inv-gallery-slider__thumb { border-radius: 4px; }
.inv-gallery-slider__thumb.is-active { border-color: var(--inv-vermilion); }
.inv-gallery-slider__arrow { background: var(--inv-primary); color: var(--inv-accent); font-weight: 700; }
.inv-gallery-slider__count { background: color-mix(in srgb, var(--inv-night) 70%, transparent); color: var(--jw-cream-hi); font-family: var(--jw-title); }
.inv-gallery__play { background: color-mix(in srgb, var(--inv-night) 70%, transparent); color: var(--jw-cream-hi); }

/* ---------- live streaming ---------- */

.jw-live__card { max-width: 24rem; margin: 0 auto; padding: 1.7rem 1.4rem; }
.jw-live__badge {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px;
    background: var(--inv-vermilion); color: #fff; font: 600 .66rem/1 var(--jw-title); letter-spacing: .2em;
}
.jw-live__badge span { width: .45rem; height: .45rem; border-radius: 50%; background: #ffd9cf; animation: jw-blink 1.4s ease-in-out infinite; }
@keyframes jw-blink { 50% { opacity: .25; } }
.jw-live__text { margin: 1rem 0 .5rem; }
.jw-live__note { margin-bottom: 1.1rem; font: 600 .98rem/1.5 var(--jw-serif); color: var(--jw-key); }
.jw-live__card .inv-button { margin-top: .5rem; }

/* ---------- gift ---------- */

.inv-gift { display: grid; gap: .9rem; max-width: 22rem; margin: 0 auto; }
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account {
    position: relative; overflow: hidden; isolation: isolate; min-width: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .45rem;
    grid-template-areas: "chip bank" "number number" "holder holder" "button button";
    margin: 0; padding: .85rem .8rem 1.3rem; border-radius: 10px; text-align: left; color: var(--jw-cream-hi);
    background:
        linear-gradient(118deg, transparent 24%, rgb(255 255 255 / .08) 38%, transparent 52%),
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--inv-vermilion) 45%, transparent), transparent 65%),
        linear-gradient(150deg, var(--inv-primary), var(--inv-night) 85%);
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / .85), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 50%, transparent);
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
/* a tatahan edge along the foot of the card */
.inv-gift__account::after {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 10px;
    background: var(--jw-gold-grad); -webkit-mask: var(--jw-tatah) 0 50% / 17.5px 10px repeat-x; mask: var(--jw-tatah) 0 50% / 17.5px 10px repeat-x; opacity: .85;
}
.inv-gift__account::before {
    content: ''; grid-area: chip; width: 1.7rem; height: 1.3rem; border-radius: .3rem;
    background:
        linear-gradient(90deg, transparent 31%, rgb(0 0 0 / .25) 31% 33%, transparent 33% 67%, rgb(0 0 0 / .25) 67% 69%, transparent 69%),
        linear-gradient(0deg, transparent 47%, rgb(0 0 0 / .25) 47% 53%, transparent 53%),
        linear-gradient(135deg, var(--jw-gold-hi), var(--inv-accent) 55%, var(--jw-gold-hi));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
.inv-gift__bank { grid-area: bank; justify-self: end; min-width: 0; max-width: 100%; margin: 0; font: 600 .66rem/1.2 var(--jw-title); letter-spacing: .06em; text-transform: uppercase; text-align: right; overflow-wrap: anywhere; }
.inv-gift__logo { height: 1.5rem; max-width: 100%; padding: .2rem .45rem; border-radius: .35rem; }
.inv-gift__logo img { max-width: 4.6rem; }
.inv-gift__number { grid-area: number; margin: .8rem 0 .15rem; font: 600 .98rem/1.25 ui-monospace, Consolas, monospace; letter-spacing: .03em; overflow-wrap: anywhere; }
.inv-gift__holder { grid-area: holder; margin: 0; font: 600 .6rem/1.35 var(--jw-title); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--jw-cream-hi) 85%, transparent); overflow-wrap: anywhere; }
.inv-gift__account .inv-button {
    grid-area: button; justify-self: start; margin-top: .6rem; padding: .35rem .7rem; border-radius: 999px;
    font-size: .6rem; letter-spacing: .04em; color: var(--inv-accent); background: rgb(255 255 255 / .06);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 65%, transparent);
}
.inv-gift__account.inv-gift__address {
    display: block; padding: 1.5rem 1.3rem 1.8rem; text-align: center; color: var(--inv-text);
    background: linear-gradient(180deg, #fffdf8, var(--jw-cream-hi));
}
.inv-gift__address::before { content: none; }
.inv-gift__address .inv-gift__bank { justify-self: auto; text-align: center; font: 600 .68rem/1.4 var(--jw-title); letter-spacing: .3em; color: var(--inv-vermilion); }
.inv-gift__address .inv-gift__holder { margin: .6rem 0 .2rem; font: 400 1.05rem/1.35 var(--jw-title); letter-spacing: 0; text-transform: none; color: var(--inv-text); }
.inv-gift__address p:not([class]) { color: color-mix(in srgb, var(--inv-text) 82%, transparent); }
.inv-gift__address .inv-button { margin-top: 1rem; color: var(--inv-primary); background: transparent; box-shadow: inset 0 0 0 1px var(--inv-primary); }

/* ---------- rsvp & wishes ---------- */

.jw-form { max-width: 24rem; margin: 0 auto; padding: 1.5rem 1.25rem; text-align: left; border-top: 5px solid var(--inv-vermilion); }
.inv-form { gap: .9rem; }
.inv-form label, .inv-form__choices legend { font: 600 .8rem/1.4 var(--jw-serif); color: var(--jw-muted); }
.inv-form input:not([type=radio]):not([type=checkbox]), .inv-form select, .inv-form textarea {
    padding: .7rem .85rem; border-radius: 8px; border: 1px solid var(--jw-line);
    background: var(--jw-field-bg); color: var(--jw-fg); font: 400 1rem/1.4 var(--jw-serif);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.inv-form input::placeholder, .inv-form textarea::placeholder { color: color-mix(in srgb, var(--jw-fg) 50%, transparent); }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus { outline: none; border-color: var(--inv-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 28%, transparent); }
.inv-form option { background: #fff; color: var(--inv-text); }
.inv-form input[type=radio], .inv-form input[type=checkbox] { accent-color: var(--inv-vermilion); }
.inv-form__choices label { color: var(--jw-fg); font-size: .92rem; }
.inv-form__notice { color: var(--jw-fg); background: color-mix(in srgb, var(--inv-accent) 16%, transparent); border: 1px solid var(--jw-line-soft); }
.inv-form .inv-button { justify-self: stretch; margin-top: .3rem; }
.inv-rsvp__deadline { font-style: italic; color: var(--jw-key); }
.inv-wishes { --inv-wishes-height: 20rem; }
.inv-wishes__list { gap: .6rem; margin-top: 1.4rem; }
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .5rem .45rem .5rem .5rem; border-radius: 10px; background: color-mix(in srgb, var(--inv-night) 40%, transparent);
    box-shadow: inset 0 0 0 1px var(--jw-line-soft); scrollbar-color: color-mix(in srgb, var(--inv-accent) 50%, transparent) transparent;
}
.inv-wishes__empty { text-align: center; font-style: italic; }
.inv-wish { padding: .65rem .8rem; border-radius: 8px; background: color-mix(in srgb, var(--inv-primary) 55%, transparent); border: 1px solid var(--jw-line-soft); border-left: 3px solid var(--inv-accent); }
.inv-wish__name { font: 600 .84rem/1.35 var(--jw-serif); color: var(--inv-accent); }
.inv-wish__message { font-size: .9rem; line-height: 1.5; }
.inv-wish__time { margin-top: .25rem; font: 400 .7rem/1.3 var(--jw-serif); }
.inv-wish__reply { margin-top: .5rem; padding: .45rem .65rem; background: color-mix(in srgb, var(--inv-accent) 12%, transparent); }
.inv-wish__reply-text { font-size: .85rem; }
.inv-wishes__page-button { color: var(--jw-key); }


/* ---------- closing ---------- */

.jw-closing { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: var(--jw-fg); background: var(--inv-night); }
.jw-closing > .jw-corner { z-index: 3; }
/* the stage: the photo, the lamp glow and the two puppets; its foot runs under the text */
.jw-closing__stage { position: relative; z-index: 1; height: clamp(440px, 132vw, 600px); }
.jw-closing__photo {
    position: absolute; inset: 0; background: var(--jw-photo) center 40% / cover no-repeat; filter: sepia(.25) saturate(1.15) contrast(1.04);
    /* rises out of the night above and sinks back into it below: no hard edge on either side */
    -webkit-mask: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .3) 8%, rgb(0 0 0 / .8) 18%, #000 28%, #000 54%, rgb(0 0 0 / .4) 76%, transparent 94%);
    mask: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .3) 8%, rgb(0 0 0 / .8) 18%, #000 28%, #000 54%, rgb(0 0 0 / .4) 76%, transparent 94%);
}
/* a lamp-lit duotone over the photo: night indigo in the shadows, amber in the light */
.jw-closing__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, color-mix(in srgb, var(--inv-glow) 70%, #fff), var(--inv-primary) 75%); mix-blend-mode: soft-light; opacity: .85; }
.jw-closing__photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, var(--inv-glow), color-mix(in srgb, var(--inv-vermilion) 60%, var(--inv-glow)) 35%, var(--inv-primary) 80%); mix-blend-mode: color; opacity: .32; }
.jw-closing__glow {
    position: absolute; left: 50%; bottom: 4%; width: 120%; aspect-ratio: 2 / 1; translate: -50% 0; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-glow) 26%, transparent), transparent);
    animation: jw-flicker 4.2s ease-in-out infinite;
}
/* Rama and Sinta at the lower edges, facing the couple, partly off the screen so the couple stays clear */
.jw-closing__rama, .jw-closing__sinta { bottom: 12%; height: 70%; animation: jw-sway 6s ease-in-out infinite alternate; }
.jw-closing__rama { left: 0; transform-origin: 20% 100%; }
.jw-closing__sinta { right: 0; height: 67%; transform-origin: 80% 100%; animation-duration: 6.6s; animation-direction: alternate-reverse; }
html.inv-anim .jw-closing__rama, html.inv-anim .jw-closing__sinta { transition: translate 1.3s cubic-bezier(.2, .7, .2, 1), opacity 1s ease; }
html.inv-anim .jw-closing__stage[data-reveal]:not(.is-revealed) .jw-closing__rama { opacity: 0; translate: -40% 0; }
html.inv-anim .jw-closing__stage[data-reveal]:not(.is-revealed) .jw-closing__sinta { opacity: 0; translate: 40% 0; }
.jw-closing--plain .jw-closing__stage {
    height: clamp(320px, 96vw, 430px);
    background:
        radial-gradient(80% 50% at 50% 40%, color-mix(in srgb, var(--inv-glow) 22%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-night), var(--inv-primary) 45%, var(--inv-night));
}
.jw-closing__inner { position: relative; z-index: 2; margin-top: -6rem; padding: 0 1.5rem .9rem; }
.jw-closing__gunungan {
    display: block; width: auto; height: 4.4rem; margin: 0 auto .8rem;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--inv-glow) 40%, transparent)) drop-shadow(0 6px 8px rgb(0 0 0 / .55));
}
.jw-closing__thanks { margin-top: .3rem; font: 400 clamp(2.6rem, 12vw, 3.2rem)/1.1 var(--jw-display); color: var(--jw-fg); text-shadow: 0 3px 18px rgb(0 0 0 / .55); }
.jw-closing__message { max-width: 23rem; margin: 1rem auto 0; color: var(--jw-muted); }
.jw-closing__names { margin-top: 1.4rem; font: 400 clamp(1.9rem, 8.6vw, 2.3rem)/1.2 var(--jw-display); color: var(--inv-accent); }
.jw-closing__sign { margin-top: .9rem; font: 600 .72rem/1.5 var(--jw-title); letter-spacing: .26em; text-transform: uppercase; color: var(--jw-muted); }
.jw-closing__inner > .jw-tatah { width: 9rem; margin: 1rem auto 0; }

/* ---------- foot ---------- */

.jw-foot { padding: .8rem 1.5rem 0; background: var(--inv-night); text-align: center; }
.jw-foot .jw-tatah { opacity: .5; }
.jw-branding { position: relative; z-index: 1; color: var(--jw-muted); font-family: var(--jw-serif); }

/* ---------- floating UI: icon menu, QR tab, back-to-top, music — kept inside the column ---------- */

body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-night) 92%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-background) 78%, transparent);
    --inv-nav-active: var(--inv-accent);
    border-color: color-mix(in srgb, var(--inv-accent) 40%, transparent);
    box-shadow: 0 14px 34px -12px rgb(0 0 0 / .8), inset 0 -2px 0 color-mix(in srgb, var(--inv-accent) 55%, transparent);
    font-family: var(--jw-serif);
}
.inv-nav--icons .inv-nav__item.is-active { color: var(--inv-night); box-shadow: 0 0 0 2px var(--inv-vermilion), 0 10px 18px -6px rgb(0 0 0 / .6); }
.jw-body .inv-music { right: max(1rem, calc(50vw - var(--jw-w) / 2 + 1rem)); }
.jw-body .inv-to-top { left: max(1rem, calc(50vw - var(--jw-w) / 2 + 1rem)); }
.jw-body .inv-qr-tab { right: max(0px, calc(50vw - var(--jw-w) / 2)); }
.inv-music__button { background: var(--inv-accent); color: var(--inv-night); box-shadow: 0 8px 22px -8px rgb(0 0 0 / .7), 0 0 0 3px color-mix(in srgb, var(--inv-night) 60%, transparent); }
.inv-autoscroll { font-family: var(--jw-serif); background: color-mix(in srgb, var(--inv-night) 90%, transparent); color: var(--inv-accent); border-color: color-mix(in srgb, var(--inv-accent) 45%, transparent); }
.inv-autoscroll--running { background: var(--inv-vermilion); color: #fff; }
.inv-qr-tab { background: color-mix(in srgb, var(--inv-night) 94%, transparent); color: var(--inv-accent); border-color: color-mix(in srgb, var(--inv-accent) 45%, transparent); font-family: var(--jw-title); box-shadow: -6px 8px 20px -10px rgb(0 0 0 / .7), inset 3px 0 0 var(--inv-vermilion); }
.inv-qr-sheet__card { font-family: var(--jw-serif); border-radius: 14px; }
.inv-to-top { border-radius: 50%; background: var(--inv-night); color: var(--inv-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 50%, transparent), 0 6px 16px -6px rgb(0 0 0 / .6); }
.inv-checkin { color: var(--inv-text); }
.inv-checkin__title { color: var(--inv-vermilion); }


/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .jw-petals { display: none; }
    .jw-shadowplay__fig, .jw-shadowplay__cast, .jw-closing__rama, .jw-closing__sinta { animation: none !important; translate: none !important; opacity: 1 !important; }
    .jw-shadowplay__fig .jw-shadowplay__cast { opacity: .26 !important; }
    .jw-scene__flame, .jw-hero__light, .jw-live__badge span,
    .jw-scene__bg, .jw-scene__screen, .jw-cover__rama, .jw-cover__sinta, .jw-cover__corner, .jw-cover__floor { animation: none !important; }
    .jw-heading__rule span { scale: 1 !important; transition: none !important; }
    .jw-cover--leave { transition: opacity .3s ease; }
    .jw-cover--gone { transform: none; }
}