/*
 * Template "Signature Gigi Balang Betawi" — Betawi festive elegance ("meriah tapi anggun"). Mobile-first.
 * Colors from the chosen variant: --inv-primary (deep Betawi marun by default, the strong color),
 * --inv-secondary (Betawi green: roofs, vases, panels, the story band, labels), --inv-accent (gold leaf),
 * --inv-background (warm ivory), --inv-text.
 * Fonts: --inv-font-display (names, script) and --inv-font-heading (short capital labels) from the
 * client's choice (<x-inv.head>), Cormorant Garamond for titles and text.
 * Betawi ornaments: rumah kebaya facade and swaying kembang kelapa (inline SVG with gold gradients),
 * gold gigi balang bands on several sections, pucuk rebung (tumpal) batik bands, a kembang kelapa
 * batik ground on the deep bands, encim flowers in the dividers. Photo-gradient bands: cover,
 * countdown, gift, closing. One reveal style (fade-up); gold rules grow on reveal.
 */

:root {
    --gb-display: var(--inv-font-display, 'Allura', cursive);
    --gb-caps: var(--inv-font-heading, 'Cinzel', Georgia, serif);
    --gb-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    --gb-p: var(--inv-primary);
    --gb-deep: color-mix(in srgb, var(--inv-primary) 80%, #000);
    --gb-accent2: var(--inv-secondary, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)));
    --gb-gold: var(--inv-accent);
    --gb-gold-light: color-mix(in srgb, var(--inv-accent) 64%, #fff6dc);
    --gb-gold-deep: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-text));
    --gb-line: color-mix(in srgb, var(--inv-accent) 72%, transparent);
    --gb-ivory: var(--inv-background);
    --gb-card: color-mix(in srgb, var(--inv-background) 50%, #fff);
    --gb-paper: color-mix(in srgb, var(--inv-background) 88%, var(--inv-accent));
    --gb-on-dark: color-mix(in srgb, var(--inv-background) 88%, #fff);
    --gb-on-dark-soft: color-mix(in srgb, var(--inv-background) 84%, transparent);
    --gb-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));

    --gb-green: var(--inv-secondary, color-mix(in srgb, var(--inv-primary) 60%, #000));
    --gb-green-light: color-mix(in srgb, var(--gb-green) 78%, #fff);
    --gb-green-deep: color-mix(in srgb, var(--gb-green) 74%, #000);
    --gb-p-soft: color-mix(in srgb, var(--inv-primary) 55%, #fff);

    /* gigi balang: a bar with pointed teeth, each pierced by a circle and a diamond */
    --gb-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h24v3H0ZM1 5h22v6L12 27 1 11ZM12 8.6a2.2 2.2 0 1 0 0 4.4a2.2 2.2 0 1 0 0-4.4ZM12 16l2.2 3-2.2 3-2.2-3Z'/%3E%3C/svg%3E");
    /* batik Betawi, as masks (colored by the element's background): kembang kelapa ground and pucuk rebung tumpal */
    --gb-m-kelapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M32 22v-9M32 42v9M22 32h-9M42 32h9M25 25l-6-6M39 25l6-6M25 39l-6 6M39 39l6 6'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='32' cy='11' r='1.8'/%3E%3Ccircle cx='32' cy='53' r='1.8'/%3E%3Ccircle cx='11' cy='32' r='1.8'/%3E%3Ccircle cx='53' cy='32' r='1.8'/%3E%3Ccircle cx='17.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='46.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='46.5' r='1.5'/%3E%3Ccircle cx='46.5' cy='46.5' r='1.5'/%3E%3Ccircle cx='32' cy='32' r='1.8'/%3E%3Cpath d='M0 0l3 3-3 3-3-3ZM64 0l3 3-3 3-3-3ZM0 64l3-3 3 3-3 3ZM64 64l3-3 3 3-3 3Z'/%3E%3C/g%3E%3C/svg%3E");
    --gb-m-rebung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 24 11 0l11 24ZM4.6 24 11 10l6.4 14Z'/%3E%3Cpath d='M10.3 24v-9h1.4v9ZM11 3.6l1.5 2.4-1.5 2.4-1.5-2.4Z'/%3E%3C/svg%3E");
    /* faint diamond lattice (anyaman) under the event headers */
    --gb-lattice:
        repeating-linear-gradient(45deg, transparent 0 21px, color-mix(in srgb, var(--inv-accent) 7%, transparent) 21px 22px),
        repeating-linear-gradient(-45deg, transparent 0 21px, color-mix(in srgb, var(--inv-accent) 7%, transparent) 21px 22px);

    --gb-column: 480px;
    --inv-radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--gb-ivory);
    color: var(--inv-text);
    font-family: var(--gb-serif);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
p { margin: 0 0 .75rem; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.gb-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font: .8125rem/1.4 system-ui, sans-serif;
}

/* ---------- shared pieces ---------- */

.gb-display { font-family: var(--gb-display); font-weight: 400; line-height: 1.08; }
.gb-display span { font-size: .62em; color: var(--gb-gold); }

/* small letter-spaced capitals */
.gb-label, .gb-eyebrow {
    margin: 0 0 .6rem;
    font-family: var(--gb-caps); font-size: .68rem; font-weight: 500; line-height: 1.4; letter-spacing: .3em; text-transform: uppercase;
    color: var(--gb-accent2);
}
.gb-eyebrow { color: var(--gb-gold-light); }

.gb-head { display: grid; justify-items: center; margin-bottom: 2.4rem; }
.gb-title { font-family: var(--gb-serif); font-weight: 500; font-size: 2.5rem; line-height: 1.08; color: var(--gb-p); }

/* fine gold rule with a small diamond; grows from the center when its block is revealed */
.gb-rule {
    position: relative; display: block; width: 8rem; max-width: 50%; height: 1px; margin: 1.05rem auto 0;
    background: linear-gradient(90deg, transparent, var(--gb-gold) 30%, var(--gb-gold) 70%, transparent);
    transform-origin: center;
}
html.inv-anim .gb-rule { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .35s; }
html.inv-anim .is-revealed .gb-rule, html.inv-anim .gb-rule.is-revealed { transform: none; }

.gb-lead { font-size: 1.12rem; line-height: 1.65; }
.gb-muted { color: var(--gb-muted); font-size: 1.02rem; }

/* deep bands: the one strong color with a faint lattice; paper bands a shade warmer than ivory */
.gb-dark { position: relative; isolation: isolate; background-color: var(--gb-p); background-image: var(--gb-lattice); color: var(--gb-on-dark); }
.gb-dark .gb-title { color: var(--gb-on-dark); }
.gb-dark .gb-label { color: var(--gb-gold-light); }
.gb-dark .gb-muted { color: var(--gb-on-dark-soft); }
.gb-paper { background: var(--gb-paper); }

/* the photo under the deep color */
.gb-dark.gb-photo {
    background-image:
        var(--gb-lattice),
        linear-gradient(color-mix(in srgb, var(--gb-p) 72%, transparent), color-mix(in srgb, var(--gb-deep) 90%, transparent)),
        var(--gb-photo, none);
    background-size: auto, cover, cover; background-position: center;
}

/* gold gigi balang band (cover, countdown, gift, closing): gold leaf teeth with pierced holes */
.gb-teeth {
    position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 18px; pointer-events: none;
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold) 55%, var(--gb-gold-deep));
    -webkit-mask: var(--gb-teeth) center top / 15px 100% repeat-x;
    mask: var(--gb-teeth) center top / 15px 100% repeat-x;
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .25));
}
.gb-teeth--bottom { top: auto; bottom: 0; transform: scaleY(-1); }

/* pucuk rebung (tumpal) band: gold triangles on Betawi green between two gold hairlines */
.gb-rebung {
    position: absolute; left: 0; right: 0; z-index: 2; height: 24px; pointer-events: none;
    background: var(--gb-green-deep);
    border-block: 1px solid var(--gb-gold);
}
.gb-rebung::before {
    content: ''; position: absolute; inset: 3px 0 0;
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold));
    -webkit-mask: var(--gb-m-rebung) center bottom / 18px 100% repeat-x;
    mask: var(--gb-m-rebung) center bottom / 18px 100% repeat-x;
}
.gb-rebung--top { top: 0; }
.gb-rebung--bottom { bottom: 0; }
.gb-rebung--bottom::before { inset: 0 0 3px; transform: scaleY(-1); }

/* kembang kelapa batik ground (visible but refined) on the deep bands and on a few ivory sections */
.gb-dark::before, .gb-events::before, .gb-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--gb-gold); opacity: .13;
    -webkit-mask: var(--gb-m-kelapa) center top / 64px 64px repeat;
    mask: var(--gb-m-kelapa) center top / 64px 64px repeat;
}
.gb-events { isolation: isolate; }
.gb-events::before { background: var(--gb-p); opacity: .06; }
.gb-cover::before { z-index: 0; opacity: .1; }

.gb-icon-link {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; padding: .3rem .85rem;
    border: 1px solid var(--gb-line); border-radius: 999px;
    color: var(--gb-p); font-size: .86rem; text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}
.gb-icon-link:hover { background: var(--gb-p); color: var(--gb-on-dark); }

/* buttons of the shared components: the deep color on ivory, gold on the deep bands */
.inv-button {
    padding: .85rem 1.5rem; border-radius: 3px;
    background: var(--gb-p); color: var(--gb-on-dark);
    font-family: var(--gb-caps); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.inv-button--outline { background: transparent; color: var(--gb-p); box-shadow: inset 0 0 0 1px var(--gb-p); }
.gb-dark .inv-button { background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold)); color: var(--gb-deep); }
.gb-dark .inv-button--outline { background: transparent; color: var(--gb-on-dark); box-shadow: inset 0 0 0 1px var(--gb-gold-light); }

/* ---------- encim flower divider, kembang kelapa, rumah kebaya ---------- */

.gb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.gb-kk { display: block; overflow: visible; transform-origin: 50% 100%; }
.gb-kk__crown { transform-box: view-box; transform-origin: 80px 132px; }
.gb-kk__frond { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.gb-kk__frond--a { stroke: var(--gb-gold); }
.gb-kk__frond--b { stroke: var(--gb-green-light); }
.gb-kk__frond--c { stroke: var(--gb-gold-light); }
.gb-kk__frond--inner { stroke: var(--gb-gold); stroke-width: 1.5; opacity: .85; }
.gb-kk__bead { fill: var(--gb-p-soft); stroke: var(--gb-gold-light); stroke-width: 1; }
.gb-kk__bud { fill: var(--gb-gold-light); }
.gb-kk__bloom--a { fill: var(--gb-on-dark); }
.gb-kk__bloom--b { fill: var(--gb-p-soft); }
.gb-kk__bloom--c, .gb-kk__bloom--top { fill: url(#gb-g-gold); }
.gb-kk__eye { fill: var(--gb-p); }
.gb-kk__bloom--c .gb-kk__eye, .gb-kk__bloom--top .gb-kk__eye { fill: var(--gb-on-dark); }
.gb-kk__stem { fill: none; stroke: var(--gb-gold); stroke-width: 3; }
.gb-kk__wrap { fill: none; stroke: var(--gb-on-dark); stroke-width: 5; stroke-dasharray: 3 5; }
.gb-kk__ribbon { fill: none; stroke: var(--gb-p-soft); stroke-width: 1.5; stroke-linecap: round; }
.gb-kk__vase { stroke: var(--gb-gold); stroke-width: 1.5; }
.gb-kk__band { fill: none; stroke: var(--gb-gold); stroke-width: 2.4; }

/* a gentle sway (the bouquet from its vase, the crown a little more) */
@keyframes gb-sway { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }
@keyframes gb-sway-crown { from { transform: rotate(-2.2deg); } to { transform: rotate(2.6deg); } }
html.inv-anim .gb-kk { animation: gb-sway 6.5s ease-in-out infinite alternate; }
html.inv-anim .gb-kk--right { animation-delay: -3.2s; }
html.inv-anim .gb-kk__crown { animation: gb-sway-crown 4.4s ease-in-out infinite alternate; }
html.inv-anim .gb-kk--right .gb-kk__crown { animation-delay: -2.1s; }

/* rumah kebaya facade */
.gb-house { position: relative; width: 100%; aspect-ratio: 320 / 250; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .3)); }
.gb-house__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gb-house__boards { fill: none; stroke: color-mix(in srgb, var(--gb-gold-deep) 30%, transparent); stroke-width: 1; }
.gb-house__wood { fill: var(--gb-deep); }
.gb-house__glass { fill: var(--gb-green-deep); }
.gb-house__louvre { fill: none; stroke: var(--gb-gold); stroke-width: 1.4; }
.gb-house__transom { fill: none; stroke: var(--gb-deep); stroke-width: 1.3; stroke-linejoin: round; }
.gb-house__tiles { fill: none; stroke: var(--gb-gold-light); stroke-width: 1; opacity: .4; }
.gb-house__crown { fill: none; stroke: var(--gb-gold); stroke-width: 2.4; stroke-linecap: round; }
.gb-house__skirt { fill: var(--gb-green-deep); }
.gb-house__hole { fill: var(--gb-deep); }
.gb-house__baluster { fill: none; stroke: var(--gb-gold); stroke-width: 2; }
.gb-house__floor { fill: var(--gb-deep); }
.gb-house__step { fill: var(--gb-gold-deep); }

.gb-house__doorway { position: absolute; left: 36.25%; top: 50.4%; width: 27.5%; height: 41.6%; perspective: 520px; }
.gb-house__inside {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: radial-gradient(ellipse at 50% 40%, var(--gb-gold-light), var(--gb-gold) 55%, var(--gb-gold-deep));
    box-shadow: inset 0 0 16px rgb(0 0 0 / .3);
}
.gb-house__monogram { font-family: var(--gb-serif); font-weight: 600; font-size: calc(var(--gb-house-w, 200px) * .058); letter-spacing: .02em; color: var(--gb-deep); white-space: nowrap; }
.gb-leaf {
    position: absolute; top: 0; bottom: 0; width: 50%;
    background: linear-gradient(180deg, var(--gb-p), var(--gb-deep)); box-shadow: inset 0 0 0 1px var(--gb-gold);
}
.gb-leaf::before, .gb-leaf::after { content: ''; position: absolute; left: 20%; right: 20%; border: 1px solid var(--gb-gold); }
.gb-leaf::before { top: 9%; bottom: 53%; }
.gb-leaf::after { top: 53%; bottom: 9%; }
.gb-leaf--left { left: 0; transform-origin: left center; transform: rotateY(-108deg); }
.gb-leaf--right { right: 0; transform-origin: right center; transform: rotateY(108deg); }
@keyframes gb-door-open { from { transform: rotateY(0); } }
html.inv-anim .gb-cover .gb-leaf { animation: gb-door-open 1.6s cubic-bezier(.65, 0, .25, 1) .5s both; }

/* encim flower in the rule */
.gb-rule svg { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.gb-rule__petals { fill: var(--gb-p); }
.gb-rule__eye { fill: var(--gb-gold); }
.gb-dark .gb-rule__petals { fill: var(--gb-gold-light); }
.gb-dark .gb-rule__eye { fill: var(--gb-p); }

/* ---------- cover ---------- */

.gb-cover {
    --gb-house-w: min(60vw, 31svh, 300px);
    position: fixed; inset: 0; z-index: 30; overflow-y: auto; overflow-x: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: center; justify-content: safe flex-end;
    padding: 2.6rem 1.25rem 2.6rem; text-align: center; color: var(--gb-on-dark);
    background-color: var(--gb-p);
}
.gb-cover__photo {
    position: absolute; inset: 0 0 46% 0; z-index: -2;
    background: var(--gb-photo) center 62% / cover no-repeat;
}
.gb-cover__shade {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gb-p) 25%, transparent) 0%,
        transparent 18%,
        color-mix(in srgb, var(--gb-p) 30%, transparent) 32%,
        color-mix(in srgb, var(--gb-p) 88%, transparent) 46%,
        var(--gb-p) 56%, var(--gb-deep) 100%);
}
.gb-cover--plain .gb-cover__shade {
    background:
        radial-gradient(ellipse 80% 40% at 50% 28%, color-mix(in srgb, var(--gb-gold) 26%, transparent), transparent 72%),
        linear-gradient(180deg, transparent 55%, var(--gb-deep));
}
.gb-cover__inner { position: relative; z-index: 1; width: 100%; max-width: 420px; }

.gb-cover__scene { position: relative; width: var(--gb-house-w); margin: 0 auto 1.3rem; }
.gb-kk--cover { position: absolute; bottom: -2px; z-index: 2; height: calc(var(--gb-house-w) * 1.12); width: auto; }
.gb-kk--cover.gb-kk--left { right: calc(100% - var(--gb-house-w) * .3); }
.gb-kk--cover.gb-kk--right { left: calc(100% - var(--gb-house-w) * .3); }

.gb-cover__title { margin-bottom: .45rem; }
.gb-cover__names { margin: 0 0 .5rem; font-size: 3.4rem; color: var(--gb-on-dark); overflow-wrap: anywhere; text-shadow: 0 2px 16px rgb(0 0 0 / .25); }
.gb-cover__names span { color: var(--gb-gold-light); }
.gb-cover__date { margin: 0 0 1.2rem; font-family: var(--gb-caps); font-size: .78rem; font-weight: 500; letter-spacing: .2em; color: var(--gb-gold-light); }
.gb-cover__guest {
    width: min(82%, 300px); margin: 0 auto 1.3rem; padding: .65rem 0 .7rem;
    border-block: 1px solid color-mix(in srgb, var(--gb-gold-light) 50%, transparent);
}
.gb-cover__guest p { margin: 0 0 .3rem; font-family: var(--gb-caps); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gb-gold-light); }
.gb-cover__guest-name { display: block; font-size: 1.3rem; line-height: 1.25; color: var(--gb-on-dark); overflow-wrap: anywhere; }
.gb-open {
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold)); color: var(--gb-deep);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gb-gold-light) 70%, #fff), 0 10px 24px -10px rgb(0 0 0 / .5);
    font-family: var(--gb-caps); font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}

/* the opening moment: the photo fades in slightly closer, the house rises, its doors swing open */
@keyframes gb-photo-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes gb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html.inv-anim .gb-cover__photo { animation: gb-photo-in 2.2s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .gb-cover__scene { animation: gb-rise 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }

/* leaving: the text lifts away, the photo drifts a little closer, then the cover fades */
.gb-cover--leave { transition: opacity .7s ease .25s; }
.gb-cover--leave .gb-cover__inner { transition: opacity .4s ease, transform .6s ease; }
.gb-cover--leave .gb-cover__photo { transition: transform 1s ease; }
.gb-cover--gone { opacity: 0; }
.gb-cover--gone .gb-cover__inner { opacity: 0; transform: translateY(-14px); }
.gb-cover--gone .gb-cover__photo { transform: scale(1.05); }

/* ---------- intro: monogram ring, names, photo windows ---------- */

.gb-intro { position: relative; padding: 4.75rem 1.5rem 5.4rem; text-align: center; overflow: hidden; }
.gb-intro .gb-eyebrow { color: var(--gb-accent2); }
.gb-monogram {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .25rem;
    width: 98px; height: 98px; margin: .9rem auto 1.4rem; border-radius: 50%;
    border: 1px solid var(--gb-gold);
    font-family: var(--gb-serif); font-weight: 500; font-size: 2.1rem; line-height: 1; color: var(--gb-p);
}
.gb-monogram::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gb-line); opacity: .55; }
.gb-monogram__amp { font-family: var(--gb-display); font-size: .72em; color: var(--gb-gold-deep); }
.gb-intro__names { margin: 0 0 .5rem; font-size: 3.1rem; color: var(--gb-p); }
.gb-intro__names span { color: var(--gb-gold-deep); }
.gb-intro__date { margin: 0; font-family: var(--gb-caps); font-size: .76rem; letter-spacing: .38em; color: var(--gb-muted); }

.gb-strip { overflow: hidden; margin: 2.6rem -1.5rem 0; padding: 8px 0; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.gb-strip__track { display: flex; gap: 1rem; width: max-content; padding: 0 4px; }
html.inv-anim .gb-strip__track { animation: gb-strip 60s linear infinite; }
@keyframes gb-strip { to { transform: translateX(-50%); } }
.gb-strip__window {
    width: 104px; height: 140px; flex: none; border-radius: 52px 52px 3px 3px;
    outline: 1px solid var(--gb-line); outline-offset: 4px;
}
.gb-strip__window img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

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

.gb-section { position: relative; padding: 5rem 1.5rem; text-align: center; }

/* opening: deep band, verse to the left of a fine gold line */
.gb-opening { padding-block: 4.75rem; }
.gb-arabic { margin-bottom: 1.1rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.75rem; line-height: 1.6; color: var(--gb-gold-light); }
.gb-opening__greeting { font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--gb-gold-light); }
.gb-opening { padding-top: 4.25rem; }
.gb-quote {
    position: relative; margin: 2.6rem 0 0; padding: 2.6rem 1.4rem 1.5rem; overflow: hidden; text-align: left;
    background: linear-gradient(160deg, var(--gb-green), var(--gb-green-deep)); border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--gb-line), 0 18px 34px -20px rgb(0 0 0 / .6);
}
.gb-quote .gb-rebung { height: 18px; border-top: 0; }
.gb-quote .gb-rebung::before { -webkit-mask-size: 14px 100%; mask-size: 14px 100%; }
.gb-quote__mark { position: absolute; right: .9rem; top: 1.3rem; font-size: 4.2rem; line-height: 1; color: color-mix(in srgb, var(--gb-gold) 50%, transparent); }
.gb-quote blockquote { margin: 0; font-style: italic; font-size: 1.12rem; line-height: 1.7; }
.gb-quote figcaption { margin-top: .85rem; font-family: var(--gb-caps); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gb-gold-light); }

/* couple: an arched photo beside the text; groom photo left, bride photo right */
.gb-person { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 1.35rem; text-align: left; }
.gb-person--bride { grid-template-columns: 1fr 44%; text-align: right; }
.gb-person--bride .gb-arch { order: 2; }
.gb-arch { position: relative; isolation: isolate; }
/* a Betawi green block with the kembang kelapa batik behind the photo, offset to the outside */
.gb-arch::after {
    content: ''; position: absolute; z-index: -1; inset: 18% 22% -9% -12%; border-radius: 3px;
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--gb-gold) 14%, transparent), transparent 60%),
        linear-gradient(160deg, var(--gb-green), var(--gb-green-deep));
}
.gb-person--bride .gb-arch::after { inset: 18% -12% -9% 22%; }
.gb-arch::before {
    content: ''; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--gb-gold); border-radius: 999px 999px 4px 4px;
    transform: translate(9px, 9px);
}
.gb-person--bride .gb-arch::before { transform: translate(-9px, 9px); }
.gb-arch__photo {
    position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 999px 999px 4px 4px;
}
.gb-arch__photo--empty { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--gb-gold) 26%, transparent), transparent 70%), var(--gb-p); }
.gb-arch__photo--empty span { font-size: 3.6rem; color: var(--gb-gold-light); }
.gb-person__nickname { margin: 0 0 .3rem; font-size: 2.7rem; color: var(--gb-p); overflow-wrap: anywhere; }
.gb-person__name { margin: 0 0 .6rem; font-family: var(--gb-caps); font-weight: 500; font-size: .78rem; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-text); }
.gb-person__parents { font-size: .98rem; line-height: 1.45; color: var(--gb-muted); }
.gb-person__parents strong { font-weight: 600; color: var(--inv-text); }
.gb-couple__amp { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.4rem 0; }
.gb-couple__line { width: 4.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gb-gold)); }
.gb-couple__line:last-child { transform: scaleX(-1); }
.gb-couple__amp .gb-display { font-size: 2.8rem; line-height: 1; color: var(--gb-gold-deep); }

/* countdown: deep band over the photo, the counters in fine gold arches */
.gb-countdown { padding-block: 6rem; isolation: isolate; }
.gb-countdown .inv-countdown { gap: .6rem; margin-top: .25rem; }
.gb-countdown .inv-countdown__item {
    flex: 1; min-width: 0; max-width: 5.1rem; padding: 1.3rem .2rem .8rem;
    border: 1px solid var(--gb-line); border-radius: 999px 999px 3px 3px;
    background: color-mix(in srgb, var(--gb-deep) 45%, transparent);
}
.gb-countdown .inv-countdown__value { font-family: var(--gb-serif); font-weight: 500; font-size: 2.05rem; line-height: 1.1; }
.gb-countdown .inv-countdown__label { margin-top: .3rem; font-family: var(--gb-caps); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gb-gold-light); opacity: 1; }
.gb-countdown .inv-countdown__actions { margin-top: 2rem; }

/* events: paper cards edged by a fine inset gold line; the date beside a gold rule */
.gb-event {
    position: relative; isolation: isolate; padding: 0 1.5rem 2rem; overflow: hidden;
    background: var(--gb-card); border-radius: 3px;
    box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--gb-deep) 70%, transparent);
}
.gb-event::before { content: ''; position: absolute; inset: 7px; z-index: -1; border: 1px solid var(--gb-line); border-radius: 2px; pointer-events: none; }
.gb-event + .gb-event { margin-top: 2rem; }
.gb-event__photo { width: calc(100% + 3rem); max-width: none; aspect-ratio: 16 / 10; object-fit: cover; margin: 0 -1.5rem; }
.gb-event__head {
    position: relative; margin: 0 -1.5rem 1.9rem; padding: 1.05rem 1rem 1rem;
    background-color: var(--gb-green-deep); background-image: var(--gb-lattice);
}
.gb-event__head::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold-deep));
    -webkit-mask: var(--gb-teeth) center top / 11px 100% repeat-x;
    mask: var(--gb-teeth) center top / 11px 100% repeat-x;
}
.gb-event__name { font-family: var(--gb-serif); font-weight: 500; font-size: 1.75rem; line-height: 1.15; color: var(--gb-on-dark); }
.gb-event__date { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .7rem; color: var(--gb-p); }
.gb-event__date strong { font-family: var(--gb-serif); font-weight: 500; font-size: 3.6rem; line-height: .9; }
.gb-event__date span {
    padding-left: 1rem; border-left: 1px solid var(--gb-gold); text-align: left;
    font-family: var(--gb-caps); font-size: .68rem; line-height: 1.9; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-text);
}
.gb-event__time { font-size: 1.04rem; }
.gb-event__pin { display: block; margin: 1.1rem auto .35rem; color: var(--gb-gold-deep); }
.gb-event__venue { margin-bottom: .2rem; font-weight: 600; font-size: 1.12rem; color: var(--inv-text); }
.gb-event__address { font-size: .98rem; line-height: 1.5; color: var(--gb-muted); }
.gb-event__dress { display: inline-block; padding: .25rem .9rem; border: 1px solid var(--gb-line); border-radius: 999px; font-size: .95rem; }
.gb-event__dress span { margin-right: .3rem; font-family: var(--gb-caps); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gb-accent2); }
.gb-event .inv-maps { margin-top: 1.1rem; }

/* love story: the deep Betawi green band, a fine gold line with diamond knots */
.gb-dark.gb-green { background-color: var(--gb-green-deep); }
.gb-green .gb-moment__knot { background: var(--gb-green-deep); }
.gb-green .gb-rule__eye { fill: var(--gb-green-deep); }
.gb-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.2rem; text-align: left; }
.gb-timeline::before { content: ''; position: absolute; left: .7rem; top: .6rem; bottom: 1rem; width: 1px; background: var(--gb-line); }
.gb-moment { position: relative; padding-bottom: 2.5rem; }
.gb-moment:last-child { padding-bottom: 0; }
.gb-moment__knot {
    position: absolute; left: calc(-2.2rem + .7rem - 5px); top: .45rem; width: 11px; height: 11px;
    background: var(--gb-p); border: 1px solid var(--gb-gold-light); transform: rotate(45deg);
}
.gb-moment__date { display: block; font-family: var(--gb-caps); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gb-gold-light); }
.gb-moment__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: .8rem 0 0; border-radius: 3px; }
.gb-moment h3 { margin: .6rem 0 .3rem; font-family: var(--gb-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.2; color: var(--gb-on-dark); }
.gb-moment p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--gb-on-dark-soft); }

/* gallery: ivory under a pucuk rebung band, a mosaic with fine gaps */
.gb-gallery { padding-top: 5.6rem; }
.gb-gallery .inv-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 104px; grid-auto-flow: dense; gap: 6px; }
.gb-gallery .inv-gallery__item { aspect-ratio: auto; height: 100%; border-radius: 2px; }
.gb-gallery .inv-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gb-gallery .inv-gallery__item:nth-child(6n + 4) { grid-row: span 2; }
.gb-gallery .inv-gallery__item:nth-child(6n + 5), .gb-gallery .inv-gallery__item:nth-child(6n) { grid-column: span 2; }

/* live streaming: paper band, no card */
.gb-stream__icon {
    display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 1.2rem; padding-left: 3px;
    border-radius: 50%; border: 1px solid var(--gb-gold); color: var(--gb-p);
    box-shadow: 0 0 0 5px var(--gb-paper), 0 0 0 6px var(--gb-line);
}
.gb-stream .gb-head { margin-bottom: 1.4rem; }
.gb-stream .inv-button { margin-top: .5rem; }

/* gift: deep band, ivory cards with a fine inset gold line, two per row (odd last one full width) */
.gb-gift { padding-top: 5.5rem; }
.gb-gift .inv-gift { display: grid; gap: .75rem; margin-top: 1.75rem; }
.gb-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.gb-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gb-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.gb-gift .inv-gift__account {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; min-width: 0;
    padding: 1.4rem .8rem 1.1rem; border-radius: 3px; background: var(--gb-card); color: var(--inv-text);
    box-shadow: 0 16px 30px -18px rgb(0 0 0 / .55);
}
.gb-gift .inv-gift__account::before { content: ''; position: absolute; inset: 5px; z-index: -1; border: 1px solid var(--gb-line); border-radius: 2px; pointer-events: none; }
.gb-gift .inv-gift__account p { margin: 0; }
.gb-gift .inv-gift__bank {
    display: flex; justify-content: center; align-items: center; min-height: 1.5rem; max-width: 100%;
    font-family: var(--gb-caps); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gb-accent2); overflow-wrap: anywhere;
}
.gb-gift .inv-gift__account .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .3rem; }
.gb-gift .inv-gift__account .inv-gift__logo img { max-width: 4rem; }
.gb-gift .inv-gift__number {
    max-width: 100%; margin: .45rem 0 .1rem !important; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600; font-size: .98rem; line-height: 1.3; letter-spacing: .03em; color: var(--gb-p); overflow-wrap: anywhere;
}
.gb-gift .inv-gift__holder { max-width: 100%; font-size: .9rem; line-height: 1.35; color: var(--gb-muted); overflow-wrap: anywhere; }
.gb-gift .inv-gift__account .inv-button--outline { margin-top: .7rem; padding: .4rem .75rem; font-size: .62rem; color: var(--gb-p); box-shadow: inset 0 0 0 1px var(--gb-p); }
.gb-gift .inv-gift__address { padding: 1.6rem 1.25rem 1.4rem; }
.gb-gift .inv-gift__address .inv-button--outline { margin-top: .8rem; }

/* rsvp + wishes: one plain card each, edged by a hairline */
.gb-panel {
    margin-top: 1.25rem; padding: 2rem 1.3rem 1.8rem; text-align: left;
    background: var(--gb-card); border: 1px solid var(--gb-line); border-top: 4px solid var(--gb-green); border-radius: 3px;
}
.gb-panel .inv-form input:not([type=radio]):not([type=checkbox]),
.gb-panel .inv-form select,
.gb-panel .inv-form textarea {
    border: 1px solid color-mix(in srgb, var(--gb-gold-deep) 50%, transparent); border-radius: 3px; background: #fff;
}
.gb-panel .inv-form input:focus, .gb-panel .inv-form select:focus, .gb-panel .inv-form textarea:focus { outline: none; border-color: var(--gb-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gb-p) 14%, transparent); }
.gb-panel .inv-form .inv-button { justify-self: stretch; margin-top: .5rem; }
.gb-panel .inv-wishes { --inv-wishes-height: 20rem; }
.gb-panel .inv-wishes__list { padding: .55rem .4rem .55rem .1rem; border-block: 1px solid var(--gb-line); }
.gb-panel .inv-wish { padding: .65rem .8rem; background: var(--gb-ivory); border-left: 2px solid var(--gb-p); border-radius: 0 4px 4px 0; }
.gb-panel .inv-wish__name { font-family: var(--gb-serif); font-weight: 600; font-size: 1.02rem; color: var(--gb-p); }
.gb-panel .inv-wish__message { font-size: .98rem; line-height: 1.45; }
.gb-panel .inv-wish__time { font-size: .74rem; }

/* closing: deep band over the photo under a gold gigi balang band; the rumah kebaya between kembang kelapa crowns the thanks */
.gb-closing { padding-top: 4.4rem; overflow: hidden; }
.gb-closing__scene { position: relative; display: flex; align-items: flex-end; justify-content: center; margin: 0 -1.5rem 1.9rem; }
.gb-house--closing { width: 200px; flex: none; }
.gb-kk--closing { position: relative; z-index: 1; height: 190px; width: auto; flex: none; margin: 0 -34px -2px; }
.gb-closing__inner { position: relative; z-index: 1; max-width: 340px; margin: 0 auto; }
.gb-closing__names { margin: 1.1rem 0 1.2rem; font-size: 3.3rem; color: var(--gb-on-dark); }
.gb-closing__names span { color: var(--gb-gold-light); }
.gb-closing__message { font-size: 1.04rem; line-height: 1.6; color: var(--gb-on-dark-soft); }
.gb-closing__signature { margin: 0; font-family: var(--gb-caps); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gb-gold-light); }

/* shared components outside the sections */
.inv-music__button { background: var(--gb-p); color: var(--gb-gold-light); box-shadow: 0 0 0 1px var(--gb-gold), 0 6px 16px rgb(0 0 0 / .3); }
.inv-checkin { margin: 2rem 1.5rem; border: 1px solid var(--gb-line); border-radius: 3px; }
.inv-branding { background: var(--gb-ivory); }

/* ---------- wide screens: the column on the deep color, a line kembang kelapa on each side ---------- */

.gb-stage { display: none; }

@media (min-width: 1024px) {
    body { background: var(--gb-deep); }
    .gb-stage {
        display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; color: var(--gb-on-dark);
        background-color: var(--gb-p);
        background-image:
            radial-gradient(ellipse 40% 55% at 18% 62%, color-mix(in srgb, var(--gb-gold) 12%, transparent), transparent 70%),
            radial-gradient(ellipse 40% 55% at 82% 62%, color-mix(in srgb, var(--gb-gold) 12%, transparent), transparent 70%),
            var(--gb-lattice);
    }
    .gb-stage::after {
        content: ''; position: absolute; inset: 0; background: var(--gb-gold); opacity: .1;
        -webkit-mask: var(--gb-m-kelapa) center / 72px 72px repeat; mask: var(--gb-m-kelapa) center / 72px 72px repeat;
    }
    .gb-kk--stage { position: absolute; z-index: 1; bottom: 6vh; height: min(58vh, 560px); width: auto; }
    .gb-kk--stage.gb-kk--left { left: calc((100vw - var(--gb-column)) / 4 - min(16.2vh, 157px)); }
    .gb-kk--stage.gb-kk--right { right: calc((100vw - var(--gb-column)) / 4 - min(16.2vh, 157px)); }
    .gb-stage__side { z-index: 1; }
    .gb-stage__side { position: absolute; top: 14vh; width: calc((100vw - var(--gb-column)) / 2); padding: 0 2.5rem; text-align: center; }
    .gb-stage__side--left { left: 0; }
    .gb-stage__side--right { right: 0; padding-top: 1.4rem; }
    .gb-stage__names { margin: 0; font-size: clamp(3rem, 4.4vw, 4.6rem); }
    .gb-stage__names span { margin: 0 .2em; color: var(--gb-gold-light); }
    .gb-stage__date { margin: 0 0 .9rem; font-family: var(--gb-caps); font-size: .9rem; letter-spacing: .2em; color: var(--gb-gold-light); }
    .gb-stage__quote { max-width: 340px; margin: 0 auto; font-style: italic; font-size: 1.08rem; line-height: 1.65; color: var(--gb-on-dark-soft); }

    .gb-page {
        position: relative; z-index: 1; width: var(--gb-column); margin: 0 auto; min-height: 100vh;
        background: var(--gb-ivory);
        box-shadow: 0 0 0 1px var(--gb-line), 0 0 0 9px var(--gb-p), 0 0 0 10px var(--gb-line), 0 0 80px rgb(0 0 0 / .45);
    }

    .gb-cover { --gb-house-w: min(40vh, 340px); }
    .gb-cover__inner { max-width: 640px; }
    .gb-cover__names { font-size: 3.9rem; }
}

/* short screens: a smaller house so the button stays on screen */
@media (max-height: 760px) and (max-width: 1023px) {
    .gb-cover { --gb-house-w: min(58vw, 29svh, 280px); padding-block: 2rem 2.2rem; }
    .gb-cover__scene { margin-bottom: 1.2rem; }
    .gb-cover__names { font-size: 3.1rem; }
    .gb-cover__date { margin-bottom: 1.1rem; }
    .gb-cover__guest { margin-bottom: 1.2rem; padding-block: .6rem .65rem; }
}
@media (max-height: 660px) and (max-width: 1023px) {
    .gb-cover { --gb-house-w: min(56vw, 26svh, 250px); padding-block: 1.7rem 2rem; }
    .gb-cover__scene { margin-bottom: 1rem; }
    .gb-cover__names { font-size: 2.8rem; margin-bottom: .45rem; }
    .gb-cover__date { margin-bottom: .9rem; }
    .gb-cover__guest { margin-bottom: 1.05rem; }
    .gb-cover__guest-name { font-size: 1.18rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gb-cover--leave, .gb-cover--leave .gb-cover__inner, .gb-cover--leave .gb-cover__photo { transition: none; }
    .gb-kk, .gb-kk__crown, .gb-leaf, .gb-cover__photo, .gb-cover__scene, .gb-strip__track { animation: none !important; }
    .gb-rule, .inv-button, .gb-icon-link { transition: none !important; }
}

/* ---------- page end: the closing ends a steady distance above the bottom edge ---------- */
/* the closing carries the bottom space itself (in its own colour, clear of the music button and the "Gulir" pill),
   so the shared music spacer (a bare strip in the page colour) is not needed */
.inv-music__space { display: none; }
.gb-dark.gb-closing { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }

/* opening: the photo shows through a lighter marun veil (deepest behind the text column); without a photo a soft marun glow */
.gb-dark.gb-opening {
    background-image:
        var(--gb-lattice),
        radial-gradient(110% 60% at 50% 42%, color-mix(in srgb, var(--gb-p) 86%, transparent) 25%, color-mix(in srgb, var(--gb-p) 66%, transparent) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--gb-deep) 45%, transparent), transparent 35%, transparent 65%, color-mix(in srgb, var(--gb-deep) 80%, transparent)),
        var(--gb-photo, radial-gradient(90% 55% at 50% 30%, color-mix(in srgb, var(--gb-gold) 30%, var(--gb-p)), var(--gb-deep)));
    background-size: auto, cover, cover, cover; background-position: center;
}
.gb-opening .gb-quote { background: linear-gradient(160deg, color-mix(in srgb, var(--gb-green) 88%, transparent), color-mix(in srgb, var(--gb-green-deep) 94%, transparent)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

/* ---------- intro scene "Buka Palang Pintu" (scene.json + sections/_scene; the intro lives in <body>, outside the page) ---------- */
/* the guest stands at the barred front door of a rumah kebaya: the palang lifts, the carved doors swing open and the
   camera walks into the lit hall, under the gigi balang eave, between two kembang kelapa, to the card */
.gb-scene-hall {
    position: absolute; inset: 0; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(70% 42% at 50% 46%, color-mix(in srgb, var(--gb-gold) 34%, transparent), transparent 72%),
        var(--gb-lattice),
        linear-gradient(180deg, var(--gb-deep), var(--gb-p) 45%, var(--gb-deep));
}
.gb-scene-hall i { position: absolute; inset: -30px; z-index: -1; background: var(--gb-photo) center 35% / cover no-repeat; filter: blur(18px) saturate(1.1); opacity: .22; }
.gb-scene-hall::before {
    content: ''; position: absolute; inset: 0; background: var(--gb-gold); opacity: .16;
    -webkit-mask: var(--gb-m-kelapa) center / 58px 58px repeat; mask: var(--gb-m-kelapa) center / 58px 58px repeat;
}
.gb-scene-hall::after { content: ''; position: absolute; inset: 0; background: radial-gradient(75% 55% at 50% 48%, transparent 40%, color-mix(in srgb, var(--gb-deep) 80%, transparent)); }

/* the front doors: two carved leaves in the deep colour with gold panels, a thin gold light between them, the palang across */
.gb-scene-doors { position: absolute; inset: 0; display: flex; perspective: 1000px; }
.gb-scene-doors::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; z-index: 0; width: 26px; margin-left: -13px;
    background: radial-gradient(50% 50% at 50% 50%, var(--gb-gold-light), transparent); filter: blur(4px);
}
.gb-scene-door {
    position: relative; z-index: 1; flex: 1; transform-origin: 0 50%; backface-visibility: hidden;
    background:
        linear-gradient(90deg, rgb(0 0 0 / .25), transparent 18%, transparent 82%, rgb(0 0 0 / .3)),
        var(--gb-lattice),
        linear-gradient(180deg, var(--gb-p), var(--gb-deep));
    box-shadow: inset 0 0 0 6px var(--gb-deep), inset 0 0 0 7.5px var(--gb-gold);
}
.gb-scene-door--right { transform-origin: 100% 50%; }
/* carved transom of gigi balang teeth along the top of each leaf, and two gold panels with the kembang kelapa batik */
.gb-scene-door::before {
    content: ''; position: absolute; left: 7px; right: 7px; top: 7px; height: 30px;
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold) 55%, var(--gb-gold-deep));
    -webkit-mask: var(--gb-teeth) center top / 20px 100% repeat-x; mask: var(--gb-teeth) center top / 20px 100% repeat-x;
}
.gb-scene-door i, .gb-scene-door::after {
    content: ''; position: absolute; left: 18%; right: 18%; border: 1.5px solid var(--gb-gold);
    box-shadow: inset 0 0 0 5px var(--gb-deep), inset 0 0 0 6px var(--gb-line);
    background: color-mix(in srgb, var(--gb-gold) 10%, transparent);
}
.gb-scene-door i { top: 9%; bottom: 55%; }
.gb-scene-door::after { top: 57%; bottom: 7%; }
.gb-scene-door i::before {
    content: ''; position: absolute; inset: 10px; background: var(--gb-gold); opacity: .45;
    -webkit-mask: var(--gb-m-kelapa) center / 48px 48px repeat; mask: var(--gb-m-kelapa) center / 48px 48px repeat;
}
/* the palang pintu: a dark wooden bar with gold caps and a medallion, resting across both leaves */
.gb-scene-palang {
    position: absolute; z-index: 2; left: -4%; right: -4%; top: 50%; height: 34px; margin-top: -17px;
    background:
        linear-gradient(90deg, transparent 22%, var(--gb-gold) 22% 23.2%, transparent 23.2% 24.4%, var(--gb-gold) 24.4% 25.6%, transparent 25.6% 74.4%, var(--gb-gold) 74.4% 75.6%, transparent 75.6% 76.8%, var(--gb-gold) 76.8% 78%, transparent 78%),
        linear-gradient(180deg, color-mix(in srgb, var(--gb-green-deep) 70%, #000), var(--gb-green-deep) 45%, color-mix(in srgb, var(--gb-green-deep) 60%, #000));
    border-block: 2px solid var(--gb-gold); box-shadow: 0 10px 18px rgb(0 0 0 / .5);
}
.gb-scene-palang em {
    position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%;
    background: radial-gradient(circle, var(--gb-gold-light), var(--gb-gold) 60%, var(--gb-gold-deep));
    box-shadow: 0 0 0 3px var(--gb-green-deep), 0 0 0 4.5px var(--gb-gold), 0 6px 12px rgb(0 0 0 / .4);
}
.gb-scene-palang em::before {
    content: ''; position: absolute; inset: 9px; background: var(--gb-p);
    -webkit-mask: var(--gb-m-kelapa) center / 100% 100% no-repeat; mask: var(--gb-m-kelapa) center / 100% 100% no-repeat;
}
@keyframes gb-scene-palang { 35% { transform: translateY(-16px) rotate(-2.5deg); } 70% { opacity: 1; } to { transform: translateY(-58vh) rotate(-8deg); opacity: 0; } }
@keyframes gb-scene-door-l { to { transform: rotateY(-84deg); filter: brightness(.55); } }
@keyframes gb-scene-door-r { to { transform: rotateY(84deg); filter: brightness(.55); } }
@keyframes gb-scene-crack { 30% { opacity: 1; } to { opacity: 0; transform: scaleX(9); } }
.inv-intro.is-playing .gb-scene-palang { animation: gb-scene-palang 1.1s cubic-bezier(.5, 0, .5, 1) .9s both; }
.inv-intro.is-playing .gb-scene-door { animation: gb-scene-door-l 1.5s cubic-bezier(.55, .05, .25, 1) 1.65s both; }
.inv-intro.is-playing .gb-scene-door--right { animation-name: gb-scene-door-r; }
.inv-intro.is-playing .gb-scene-doors::before { animation: gb-scene-crack 1.5s ease-out 1.6s both; }

/* the eave seen from inside: green tiles, a gold ridge, the skirt and a row of large pierced gigi balang teeth */
.gb-scene-eave { position: absolute; inset: 0; display: flex; flex-direction: column; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .4)); }
.gb-scene-eave__roof {
    flex: 1; border-bottom: 3px solid var(--gb-gold);
    background:
        repeating-linear-gradient(180deg, transparent 0 13px, color-mix(in srgb, var(--gb-green-deep) 70%, #000) 13px 15px),
        repeating-linear-gradient(90deg, transparent 0 21px, color-mix(in srgb, var(--gb-gold-light) 35%, transparent) 21px 22px),
        linear-gradient(180deg, var(--gb-green-deep), var(--gb-green-light));
}
.gb-scene-eave__skirt { height: 14px; background: var(--gb-green-deep); border-bottom: 2px solid var(--gb-gold-light); }
.gb-scene-eave__teeth {
    height: 34px; margin-top: -1px;
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold) 55%, var(--gb-gold-deep));
    -webkit-mask: var(--gb-teeth) center top / 24px 100% repeat-x; mask: var(--gb-teeth) center top / 24px 100% repeat-x;
}

/* the langkan: gold rail and balusters on a dark wood floor, the pucuk rebung band below */
.gb-scene-railing { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; filter: drop-shadow(0 -6px 10px rgb(0 0 0 / .3)); }
.gb-scene-railing__posts {
    flex: 1; max-height: 58%; border-top: 5px solid var(--gb-gold); border-bottom: 3px solid var(--gb-gold);
    background: repeating-linear-gradient(90deg, transparent 0 10px, var(--gb-gold) 10px 13px, transparent 13px 16px);
}
.gb-scene-railing__floor { height: 14px; background: var(--gb-deep); border-top: 2px solid var(--gb-gold-light); }
.gb-scene-railing .gb-rebung { position: relative; height: 26px; }

/* the rumah kebaya across the hall, its doors already open on the gold-lit monogram, standing on the floor line */
.gb-scene-house { position: relative; height: 100%; --gb-house-w: 62vw; }
.gb-scene-house .gb-house { position: absolute; left: 0; bottom: 0; }

/* the kembang kelapa stand on the floor (bottom of the layer box); their own CSS makes them sway */
.gb-scene-kk { position: relative; height: 100%; }
.gb-scene-kk > svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-height: 34vh; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .35)); }

.gb-scene-charm, .gb-scene-petal { display: block; width: 100%; height: 100%; overflow: visible; }
.gb-scene-charm { filter: drop-shadow(0 6px 8px rgb(0 0 0 / .45)); }
.gb-scene-charm__cord { fill: none; stroke: var(--gb-gold); stroke-width: 1.4; }
.gb-scene-charm__bead { fill: var(--gb-p-soft); stroke: var(--gb-gold-light); }
.gb-scene-charm__eye { fill: var(--gb-p); }
.gb-scene-charm__tassel { fill: none; stroke: var(--gb-gold-light); stroke-width: 1.6; stroke-linecap: round; }
.gb-scene-petal { filter: drop-shadow(0 3px 3px rgb(0 0 0 / .3)); }

/* the card: an ivory panel in a double gold frame, gigi balang teeth hanging from its top edge, rebung along its foot */
.inv-intro--scene:has(.gb-scene-hall) .inv-scene__card {
    top: 45%; width: min(64vw, 19rem); aspect-ratio: 10 / 11; padding: 2.4rem 1.3rem 2rem;
    background: linear-gradient(180deg, var(--gb-card), var(--gb-paper)); -webkit-backdrop-filter: none; backdrop-filter: none;
    -webkit-mask: none; mask: none; border-radius: 2px;
    box-shadow: inset 0 0 0 1.5px var(--gb-gold), inset 0 0 0 6px var(--gb-card), inset 0 0 0 7px var(--gb-line), 0 24px 44px -14px rgb(0 0 0 / .6);
}
.inv-intro--scene:has(.gb-scene-hall) .inv-scene__card::before {
    content: ''; position: absolute; left: 8px; right: 8px; top: 8px; height: 18px;
    background: linear-gradient(180deg, var(--gb-gold-light), var(--gb-gold) 55%, var(--gb-gold-deep));
    -webkit-mask: var(--gb-teeth) center top / 14px 100% repeat-x; mask: var(--gb-teeth) center top / 14px 100% repeat-x;
}
.inv-intro--scene:has(.gb-scene-hall) .inv-scene__card::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 14px;
    background: var(--gb-gold); opacity: .8;
    -webkit-mask: var(--gb-m-rebung) center bottom / 12px 100% repeat-x; mask: var(--gb-m-rebung) center bottom / 12px 100% repeat-x;
}
.inv-intro--scene:has(.gb-scene-hall) .inv-intro__label { font-family: var(--gb-caps); font-weight: 500; font-size: .66rem; letter-spacing: .3em; color: var(--gb-accent2); }
.inv-intro--scene:has(.gb-scene-hall) .inv-intro__names { font-family: var(--gb-display); font-weight: 400; line-height: 1.1; color: var(--gb-p); }
.inv-intro--scene:has(.gb-scene-hall) .inv-intro__rule { background: linear-gradient(90deg, transparent, var(--gb-gold) 30%, var(--gb-gold) 70%, transparent); }
.inv-intro--scene:has(.gb-scene-hall) .inv-intro__date { font-family: var(--gb-caps); font-size: .74rem; letter-spacing: .14em; color: var(--gb-gold-deep); }
/* short screens: the card sits a little higher and smaller, clear of the house roof */
@media (max-height: 720px) {
    .inv-intro--scene:has(.gb-scene-hall) .inv-scene__card { top: 41%; width: min(62vw, 19rem); padding-block: 2.2rem 1.8rem; }
    .inv-intro--scene:has(.gb-scene-hall) .inv-intro__date { font-size: .7rem; letter-spacing: .08em; }
}
.inv-intro--scene:has(.gb-scene-hall) .inv-intro__skip { background: color-mix(in srgb, var(--gb-deep) 70%, transparent); border-color: var(--gb-line); color: var(--gb-gold-light); }
@media (prefers-reduced-motion: reduce) {
    .gb-scene-doors { display: none; }
    .inv-intro.is-playing .gb-scene-palang, .inv-intro.is-playing .gb-scene-door, .inv-intro.is-playing .gb-scene-doors::before { animation: none; }
}