/*
 * Template "Signature Gadang Minang" — Minangkabau, vivid merah saga + gold + black. Mobile-first.
 * Colors from the chosen variant: --inv-primary (merah saga / the variant's main tone),
 * --inv-secondary (near-black), --inv-accent (gold), --inv-background (warm cream), --inv-text.
 * Fonts from the client's choice: --inv-font-display (names) and --inv-font-heading (titles), set by <x-inv.head>.
 * Ornaments are inline SVG (roof, suntiang, dividers, kaluak paku, patterns in _sprite.blade.php, colored by
 * these variables); the songket Pandai Sikek and saluak laka textures are gold CSS masks (data URIs).
 * Rhythm: red/black and warm light sections alternate; several sit on a veiled client photo.
 */

:root {
    --gm-display: var(--inv-font-display, 'Great Vibes', cursive);
    --gm-heading: var(--inv-font-heading, 'Cormorant Garamond', Georgia, serif);
    --gm-body: 'Lora', Georgia, 'Times New Roman', serif;

    --gm-dark: var(--inv-secondary, color-mix(in srgb, var(--inv-primary) 25%, #000));
    --gm-gold: var(--inv-accent);
    --gm-gold-hi: color-mix(in srgb, var(--inv-accent) 55%, #fff6dc);
    --gm-gold-lo: color-mix(in srgb, var(--inv-accent) 62%, #3a2000);
    --gm-gold-ink: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-text));
    --gm-red-hi: color-mix(in srgb, var(--inv-primary) 86%, #ff7a45);
    --gm-red-lo: color-mix(in srgb, var(--inv-primary) 58%, #000);
    --gm-ijuk-hi: color-mix(in srgb, var(--gm-dark) 72%, var(--inv-primary));
    --gm-ijuk: color-mix(in srgb, var(--gm-dark) 88%, var(--inv-primary));
    --gm-ijuk-lo: var(--gm-dark);
    --gm-paper: color-mix(in srgb, var(--inv-background) 45%, #fff);
    --gm-on-dark: color-mix(in srgb, var(--inv-background) 88%, #fff);
    --gm-line: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    --gm-gold-grad: linear-gradient(105deg, var(--gm-gold-lo), var(--gm-gold-hi) 36%, var(--gm-gold) 55%, var(--gm-gold-hi) 76%, var(--gm-gold-lo));
    --gm-marawa: linear-gradient(90deg, #141010 0 33.4%, #b8161f 0 66.7%, #e2b33c 0);

    /* songket Pandai Sikek: diamond lattice, eight-point stars, small diamonds at the crossings */
    --gm-songket: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><path d='M18 0 36 18 18 36 0 18Z' fill='none' stroke='%23000' stroke-width='.8'/><path d='M18 4.5 31.5 18 18 31.5 4.5 18Z' fill='none' stroke='%23000' stroke-width='.45'/><path d='M14 14h8v8h-8zM18 12.3 23.7 18 18 23.7 12.3 18z'/><path d='M0-3 3 0 0 3-3 0zM36-3l3 3-3 3-3-3zM0 33l3 3-3 3-3-3zM36 33l3 3-3 3-3-3zM18-2.4l2.4 2.4L18 2.4 15.6 0zM18 33.6l2.4 2.4-2.4 2.4-2.4-2.4zM0 15.6 2.4 18 0 20.4-2.4 18zM36 15.6l2.4 2.4-2.4 2.4-2.4-2.4z'/><circle cx='9' cy='9' r='1.1'/><circle cx='27' cy='9' r='1.1'/><circle cx='9' cy='27' r='1.1'/><circle cx='27' cy='27' r='1.1'/></svg>");
    /* saluak laka: interlaced rattan rings */
    --gm-laka: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none' stroke='%23000' stroke-width='.8'><circle r='13'/><circle cx='26' r='13'/><circle cy='26' r='13'/><circle cx='26' cy='26' r='13'/><circle cx='13' cy='13' r='13'/></svg>");
    /* top edge rising into two gonjong horns (used on a band of fixed height) */
    --gm-horn-top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'><path d='M0 0Q14 24 50 26Q86 24 100 0V28H0Z'/></svg>");
    /* whole photo shape with the horns (same path as .gm-arch__line) */
    --gm-arch-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'><path d='M0 0Q14 12 50 13Q86 12 100 0V130H0Z'/></svg>");

    --gm-column: 460px;
    --inv-radius: 4px;
}

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

body {
    margin: 0;
    background: var(--gm-dark);
    color: var(--inv-text);
    font-family: var(--gm-body);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
p { margin: 0 0 .75rem; }

.gm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.gm-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;
}

/* ---------- tones: every section sets its ink, the shared pieces read it ---------- */

.gm-cream, .gm-paper {
    --tone-title: var(--inv-primary);
    --tone-ornament: var(--gm-gold-ink);
    --tone-seed: var(--inv-primary);
    --tone-muted: color-mix(in srgb, var(--inv-text) 74%, var(--inv-background));
    background-color: var(--inv-background); color: var(--inv-text);
}
.gm-paper { background-color: var(--gm-paper); }
.gm-dark, .gm-red, .gm-songket-surface, .gm-photo {
    --tone-title: var(--gm-on-dark);
    --tone-ornament: var(--gm-gold);
    --tone-seed: var(--gm-dark);
    --tone-muted: color-mix(in srgb, var(--gm-on-dark) 80%, transparent);
    color: var(--gm-on-dark);
}
/* black with a faint saluak laka weave */
.gm-dark {
    background-color: var(--gm-dark);
    background-image: radial-gradient(100% 60% at 50% 0%, color-mix(in srgb, var(--inv-primary) 42%, transparent), transparent 72%);
}
.gm-dark::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--gm-gold); opacity: .09;
    -webkit-mask: var(--gm-laka) 0 0 / 26px 26px; mask: var(--gm-laka) 0 0 / 26px 26px;
}
.gm-red {
    background-color: var(--inv-primary);
    background-image:
        radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--gm-red-hi) 70%, transparent), transparent 70%),
        linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--gm-red-lo) 70%, transparent));
}
/* songket Pandai Sikek: gold woven into red, with a soft sheen and gold selvages */
.gm-songket-surface {
    position: relative; isolation: isolate;
    background-color: var(--inv-primary);
    background-image:
        radial-gradient(70% 45% at 50% 40%, color-mix(in srgb, var(--gm-red-hi) 60%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--gm-red-lo) 55%, transparent), transparent 30%, transparent 70%, color-mix(in srgb, var(--gm-red-lo) 65%, transparent));
}
.gm-songket-surface::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--gm-gold-grad); background-size: 200% 100%; opacity: .34;
    -webkit-mask: var(--gm-songket) center / 36px 36px; mask: var(--gm-songket) center / 36px 36px;
}
.gm-songket-surface::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(var(--gm-gold), var(--gm-gold)) 0 8px / 100% 1px no-repeat,
        linear-gradient(var(--gm-gold), var(--gm-gold)) 0 12px / 100% 1px no-repeat,
        linear-gradient(var(--gm-gold), var(--gm-gold)) 0 calc(100% - 8px) / 100% 1px no-repeat,
        linear-gradient(var(--gm-gold), var(--gm-gold)) 0 calc(100% - 12px) / 100% 1px no-repeat;
    opacity: .75;
}

.gm-photo-bg { background: var(--gm-photo, none) center / cover no-repeat; }

/* the couple's photo under a deep veil (wide-screen panel); without a photo the veil alone */
.gm-photo {
    background-color: var(--gm-dark);
    background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--gm-dark) 55%, transparent), color-mix(in srgb, var(--gm-dark) 92%, transparent)),
        var(--gm-photo, linear-gradient(160deg, var(--inv-primary), var(--gm-dark)));
    background-size: cover; background-position: center;
}

/* veiled photo behind a section: a light veil on cream sections, a deep red one on red sections */
.gm-bgphoto { isolation: isolate; }
.gm-bgphoto__clip { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
html.inv-anim .gm-bgphoto__clip[data-reveal], html.inv-anim .gm-edge-band[data-reveal],
html.inv-anim .gm-closing__photo[data-reveal], html.inv-anim .gm-marawa[data-reveal] { opacity: 1; transform: none; }
.gm-bgphoto__img { position: absolute; inset: -44px 0; --inv-parallax: 34px; }
.gm-bgphoto__clip::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 94%, transparent),
            color-mix(in srgb, var(--inv-background) 76%, transparent) 40%,
            color-mix(in srgb, var(--inv-background) 84%, transparent) 75%, var(--inv-background));
}
.gm-bgphoto--red .gm-bgphoto__clip::after {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 96%, transparent),
            color-mix(in srgb, var(--inv-primary) 74%, transparent) 38%,
            color-mix(in srgb, var(--gm-red-lo) 82%, transparent) 72%, var(--gm-red-lo));
}

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

.gm-display { font-family: var(--gm-display); font-weight: 400; line-height: 1.25; }
.gm-display span { font-size: .6em; }
/* names in polished gold (padding keeps the script swashes inside the painted box) */
.gm-gold-text {
    padding: 0 .2em; background: var(--gm-gold-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.gm-eyebrow {
    margin: 0 0 .45rem;
    font-family: var(--gm-body); font-size: .68rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
    color: var(--tone-ornament, var(--gm-gold));
}

.gm-section { position: relative; isolation: isolate; overflow: hidden; padding: 4.75rem 1.6rem 4.75rem; text-align: center; }
.gm-heading { position: relative; margin-bottom: 2.25rem; }
.gm-title {
    margin: 0 0 .7rem;
    font-family: var(--gm-heading); font-weight: 500; font-size: 2.15rem; line-height: 1.15; letter-spacing: .02em;
    color: var(--tone-title);
}

/* rumah gadang roof (_roof.blade.php) */
.gm-roof__layer, .gm-roof__layer path { fill: none; stroke: var(--gm-gold); stroke-width: .7; opacity: .5; }
.gm-roof__ridge { stroke: url(#gm-g-gold-h); stroke-width: 3.2; stroke-linecap: round; }
.gm-roof__ridge--wing { stroke-width: 2.2; }
.gm-roof__edge { stroke: var(--gm-gold); stroke-width: 1.4; }
.gm-roof__gold { fill: url(#gm-g-gold); }

/* dividers */
.gm-divider { display: block; margin: 0 auto; max-width: 100%; height: auto; color: var(--tone-ornament, var(--gm-gold)); overflow: visible; }
.gm-divider__seed { stroke: var(--tone-seed); }
.gm-divider__seed-fill { fill: var(--tone-seed); }
.gm-divider--marawa { display: flex; justify-content: center; gap: 4px; padding: 5px 0; }
.gm-divider--marawa i { width: 24px; height: 4px; background: #141010; box-shadow: 0 0 0 1px var(--gm-line); }
.gm-divider--marawa i:nth-child(2) { background: #b8161f; }
.gm-divider--marawa i:nth-child(3) { background: #e2b33c; }
html.inv-anim .gm-heading .gm-divider { transition: transform 1s cubic-bezier(.2, .7, .2, 1) .25s, opacity .8s ease .25s; }
html.inv-anim .gm-heading[data-reveal]:not(.is-revealed) .gm-divider { transform: scaleX(.3); opacity: 0; }

/* marawa stripe: black, red, gold */
.gm-marawa { display: block; height: 5px; background: var(--gm-marawa); }

.gm-lead { font-size: 1rem; }
.gm-muted { color: var(--tone-muted); font-size: .92rem; }

/* kaluak paku sprays (section corners), swaying a little */
.gm-paku { position: absolute; z-index: -1; width: 128px; height: 128px; overflow: visible; pointer-events: none; }
.gm-paku--tl { top: 0; left: 0; }
.gm-paku--br { right: 0; bottom: 0; transform: rotate(180deg); }
@keyframes gm-sway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
html.inv-anim .gm-paku use { animation: gm-sway 7s ease-in-out infinite alternate; transform-origin: 0 0; }

/* photo with gonjong horns at the top corners and a thin gold outline set slightly off */
.gm-arch { position: relative; aspect-ratio: 100 / 126; }
.gm-arch__photo {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    -webkit-mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat; mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat;
}
.gm-arch__photo--empty { display: block; background: linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 45%, var(--inv-primary)), var(--gm-red-lo)); }
.gm-arch__line { position: absolute; top: 10px; left: 10px; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gm-arch__line path { fill: none; stroke: var(--tone-ornament, var(--gm-gold)); stroke-width: 1; }

.gm-icon-link {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .25rem; padding: .35rem .9rem;
    border: 1px solid var(--gm-line); border-radius: 999px; color: inherit; text-decoration: none;
    font-size: .8rem; letter-spacing: .04em;
    transition: background-color .3s ease, color .3s ease;
}
.gm-icon-link:hover { background: var(--gm-gold); color: var(--gm-dark); }

/* buttons of the shared components: polished gold */
.inv-button {
    padding: .8rem 1.5rem; border-radius: 2px;
    background: var(--gm-gold-grad); color: var(--gm-dark);
    font-family: var(--gm-body); font-weight: 500; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--gm-dark) 30%, transparent);
    transition: transform .3s ease, box-shadow .3s ease;
}
.inv-button:hover { transform: translateY(-1px); }
.inv-button--outline { background: transparent; color: var(--gm-gold-hi); box-shadow: inset 0 0 0 1px var(--gm-line); }
.gm-cream .inv-button--outline, .gm-paper .inv-button--outline { color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 60%, transparent); }

/* ---------- royal panel (wide screens) ---------- */

.gm-aside { display: none; }

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

.gm-cover { position: fixed; inset: 0; z-index: 30; color: var(--gm-on-dark); overflow: hidden; }
.gm-cover__door {
    position: absolute; top: 0; bottom: 0; width: 50.5%;
    background:
        radial-gradient(90% 55% at var(--glow-x) 38%, color-mix(in srgb, var(--gm-red-hi) 70%, transparent), transparent 72%),
        linear-gradient(180deg, var(--gm-red-lo), var(--inv-primary) 45%, var(--gm-red-lo) 80%, var(--gm-dark));
    transition: transform 1.2s cubic-bezier(.75, 0, .25, 1) .2s;
}
.gm-cover__door--left { left: 0; --glow-x: 100%; }
.gm-cover__door--right { right: 0; --glow-x: 0%; }
/* saluak laka woven faintly into the ground */
.gm-cover__door::before {
    content: ''; position: absolute; inset: 0; background: var(--gm-gold); opacity: .1;
    -webkit-mask: var(--gm-laka) 0 0 / 26px 26px; mask: var(--gm-laka) 0 0 / 26px 26px;
}
.gm-cover__veil {
    position: absolute; inset: 0; opacity: .2; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000, rgb(0 0 0 / .4) 60%, transparent); mask-image: linear-gradient(#000, rgb(0 0 0 / .4) 60%, transparent);
    transition: opacity .45s ease;
}
.gm-cover__marawa { position: absolute; left: 0; right: 0; bottom: 0; transition: opacity .3s ease; }

.gm-cover__scroll {
    position: absolute; inset: 0 0 5px; overflow-y: auto; z-index: 1;
    display: flex; align-items: safe center; justify-content: center;
    transition: opacity .45s ease, transform .6s ease;
}
.gm-cover__inner { width: 100%; max-width: 420px; padding: 1.1rem .9rem 1.4rem; text-align: center; }
.gm-cover__eyebrow { margin-bottom: .55rem; color: var(--gm-gold-hi); }

/* leaving: the content fades, then the halves slide apart (Alpine waits for the cover's own opacity) */
.gm-cover--leave { transition: opacity .3s ease 1.25s; }
.gm-cover--gone { opacity: 0; }
.gm-cover--gone .gm-cover__scroll { opacity: 0; transform: translateY(-14px); }
.gm-cover--gone .gm-cover__veil, .gm-cover--gone .gm-cover__marawa { opacity: 0; }
.gm-cover--gone .gm-cover__door--left { transform: translateX(-101%); }
.gm-cover--gone .gm-cover__door--right { transform: translateX(101%); }

/* the rumah gadang: roof (svg 360×158 units), the photo as the wall between two carved pillars, the beam */
.gm-house {
    --hw: min(94vw, 390px, calc((100svh - 318px) / 1.2));
    --wall: calc(var(--hw) * .74);
    position: relative; width: var(--hw); margin: 0 auto 1rem; padding-top: calc(var(--hw) * .027);
}
.gm-house__roof { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35)); }
.gm-house__suntiang { position: absolute; z-index: 3; top: 0; left: 27%; width: 46%; height: auto; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .35)); }
.gm-house__wall {
    position: relative; z-index: 1; height: var(--wall);
    margin: calc(var(--hw) * -.039) 9.4% 0;
    background: linear-gradient(170deg, var(--inv-primary), var(--gm-red-lo));
    box-shadow: 0 18px 34px rgb(0 0 0 / .4);
}
.gm-house__photo { position: absolute; inset: 0; overflow: hidden; }
.gm-house__img { position: absolute; inset: 0; background-position: center 30%; }
.gm-house__monogram {
    position: absolute; inset: 0; display: grid; place-items: center; padding-top: 12%;
    font-size: calc(var(--hw) * .2); color: var(--gm-gold-hi); opacity: .9;
}
.gm-house__pillar { position: absolute; top: 0; bottom: 0; width: calc(var(--hw) * .055); height: 100%; box-shadow: inset 0 0 0 1px var(--gm-gold); }
.gm-house__pillar--l { left: 0; }
.gm-house__pillar--r { right: 0; }
.gm-house__beam {
    position: relative; z-index: 2; display: block; width: 88%; height: 14px; margin: 0 auto;
    box-shadow: inset 0 1px 0 var(--gm-gold-hi), inset 0 -1px 0 var(--gm-gold);
}

.gm-cover__names { margin: 0 0 .25rem; font-size: 3rem; }
.gm-cover__date { margin: 0 0 1rem; font-size: .76rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gm-gold-hi); }
.gm-cover__guest {
    margin: 0 auto 1.15rem; padding: .7rem 1rem .75rem; max-width: 310px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gm-dark) 45%, transparent) 20%, color-mix(in srgb, var(--gm-dark) 45%, transparent) 80%, transparent);
    border-top: 1px solid var(--gm-line);
}
.gm-cover__guest p { margin: 0 0 .15rem; font-size: .72rem; letter-spacing: .06em; opacity: .85; }
.gm-cover__guest-name { display: block; font-family: var(--gm-heading); font-weight: 500; font-size: 1.3rem; line-height: 1.3; letter-spacing: .02em; }

/* opening moment: the roof settles, the photo fades in from a slight zoom, the suntiang unfolds ray by ray */
.gm-suntiang__ray { transform-box: view-box; transform-origin: 160px 166px; transform: rotate(var(--a)); }
@keyframes gm-settle { from { opacity: 0; transform: translateY(-18px); } }
@keyframes gm-photo-in { from { opacity: 0; transform: scale(1.1); } }
@keyframes gm-fade { from { opacity: 0; } }
@keyframes gm-unfold { from { opacity: 0; transform: rotate(0deg) scale(.3); } }
html.inv-anim .gm-house__roof { animation: gm-settle 1.1s cubic-bezier(.2, .7, .2, 1) .15s both; }
html.inv-anim .gm-house__wall, html.inv-anim .gm-house__beam { animation: gm-fade .7s ease .2s both; }
html.inv-anim .gm-house__img { animation: gm-photo-in 1.6s cubic-bezier(.2, .7, .2, 1) .35s both; }
html.inv-anim .gm-house__suntiang .gm-suntiang__ray { animation: gm-unfold 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.8s + var(--i) * 45ms); }
html.inv-anim .gm-house__suntiang { animation: gm-fade .6s ease .75s both; }

/* ---------- intro: songket surface, monogram, date, photo row ---------- */

.gm-intro { position: relative; padding: 0 0 3.25rem; text-align: center; }
.gm-intro .gm-marawa { margin-bottom: 3rem; }
.gm-intro__label { color: var(--gm-gold-hi); }
.gm-monogram {
    display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: .6rem 0 0;
    font-family: var(--gm-heading); font-weight: 500; font-size: 3.3rem; line-height: 1; color: var(--gm-gold-hi);
    text-shadow: 0 2px 12px rgb(0 0 0 / .35);
}
.gm-monogram__bar { width: 1px; height: 3.4rem; background: var(--gm-gold); transform: rotate(18deg); }
.gm-intro__date { margin: 1.1rem 0 0; font-size: .78rem; letter-spacing: .42em; color: var(--gm-on-dark); }
.gm-strip { overflow: hidden; margin-top: 2.25rem; padding: 4px 0; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.gm-strip__track { display: flex; gap: .7rem; width: max-content; animation: gm-strip 46s linear infinite; }
.gm-strip__track img {
    width: 112px; height: 150px; object-fit: cover;
    -webkit-mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat; mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat;
}
@keyframes gm-strip { to { transform: translateX(-50%); } }

/* ---------- opening: light over a faint photo, the verse on a horned red block ---------- */

.gm-opening { padding-top: 4.5rem; }
.gm-arabic { margin-bottom: 1rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.8rem; line-height: 1.7; color: var(--inv-primary); }
.gm-opening__greeting { font-family: var(--gm-heading); font-weight: 600; font-size: 1.2rem; line-height: 1.4; color: var(--inv-primary); }
.gm-opening__message { max-width: 320px; margin-inline: auto; }
.gm-quote {
    --horn: 26px;
    position: relative; margin: 2.5rem -.4rem 0; padding: calc(var(--horn) + 1.4rem) 1.4rem 1.8rem;
    background:
        radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--gm-red-hi) 70%, transparent), transparent 70%),
        linear-gradient(175deg, var(--inv-primary), var(--gm-red-lo));
    color: var(--gm-on-dark); --tone-ornament: var(--gm-gold); --tone-seed: var(--gm-red-lo);
    -webkit-mask: var(--gm-horn-top) top / 100% var(--horn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--horn) - 1px) / 100% 100% no-repeat;
    mask: var(--gm-horn-top) top / 100% var(--horn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--horn) - 1px) / 100% 100% no-repeat;
    box-shadow: inset 0 -3px 0 var(--gm-gold);
}
.gm-quote .gm-divider { margin-bottom: 1rem; }
.gm-quote blockquote { margin: 0; font-style: italic; font-size: .98rem; line-height: 1.85; }
.gm-quote figcaption { margin-top: .9rem; font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gm-gold-hi); }

/* ---------- couple: dark, offset photos on red blocks ---------- */

.gm-person { text-align: left; }
.gm-person__media { position: relative; width: 64%; margin: 0 0 1.4rem 2%; }
.gm-person__block {
    position: absolute; top: 16%; bottom: -7%; left: 22%; right: -16%; z-index: -1;
    background: linear-gradient(160deg, var(--gm-red-hi), var(--gm-red-lo));
}
.gm-person__tag {
    position: absolute; top: 18%; left: calc(100% + 1.6rem);
    writing-mode: vertical-rl; font-size: .66rem; font-weight: 500; letter-spacing: .4em; text-transform: uppercase; color: var(--gm-gold);
    white-space: nowrap;
}
.gm-person--bride { text-align: right; }
.gm-person--bride .gm-person__media { margin: 0 2% 1.4rem auto; }
.gm-person--bride .gm-person__block { left: -16%; right: 22%; }
.gm-person--bride .gm-person__tag { left: auto; right: calc(100% + 1.6rem); transform: rotate(180deg); }
.gm-person--bride .gm-arch__line { left: -10px; }
.gm-person__nickname { margin: .4rem 0 0; font-size: 3.2rem; line-height: 1.2; }
.gm-person__name { margin: 0 0 .5rem; font-family: var(--gm-heading); font-weight: 600; font-size: 1.3rem; line-height: 1.3; color: var(--gm-on-dark); }
.gm-person__parents { font-size: .88rem; color: var(--tone-muted); }
.gm-person__parents strong { font-weight: 500; color: var(--gm-on-dark); }
.gm-couple__amp { display: grid; justify-items: center; margin: 2.25rem 0 2rem; }
.gm-couple__suntiang { width: 120px; height: auto; }
.gm-couple__amp .gm-display { margin-top: -.6rem; font-size: 3.6rem; line-height: 1; }

/* ---------- countdown: veiled photo in red, horned tiles with a gold outline ---------- */

.gm-countdown__date { margin: -1rem 0 1.75rem; font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gm-gold-hi); }
.gm-countdown .inv-countdown { gap: .6rem; }
.gm-countdown .inv-countdown__item {
    position: relative; isolation: isolate; flex: 1; max-width: 5rem; min-width: 0; padding: 1.5rem .2rem .85rem; border-radius: 0;
    background: var(--gm-gold-grad); color: var(--gm-on-dark);
    -webkit-mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat; mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat;
}
.gm-countdown .inv-countdown__item::before {
    content: ''; position: absolute; inset: 1.5px; z-index: -1;
    background: linear-gradient(170deg, color-mix(in srgb, var(--gm-dark) 55%, var(--inv-primary)), color-mix(in srgb, var(--gm-dark) 80%, var(--inv-primary)));
    -webkit-mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat; mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat;
}
.gm-countdown .inv-countdown__value { font-family: var(--gm-heading); font-weight: 600; font-size: 2rem; color: var(--gm-gold-hi); }
.gm-countdown .inv-countdown__label { margin-top: .15rem; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.gm-countdown .inv-countdown__actions { margin-top: 1.75rem; }

/* ---------- events: light, pucuak rabuang edge, horned photo + red date block ---------- */

.gm-edge-band { position: absolute; top: 0; left: 0; width: 100%; height: 20px; box-shadow: inset 0 -1px 0 var(--gm-gold); }
.gm-events { padding-top: calc(4.75rem + 20px); }
.gm-event { filter: drop-shadow(0 16px 22px color-mix(in srgb, var(--gm-dark) 22%, transparent)); }
.gm-event__body, .gm-event .inv-maps { background: #fffdf8; }
.gm-event + .gm-event { margin-top: 2.75rem; }
.gm-event__head {
    --horn: 30px;
    position: relative; display: flex; align-items: flex-end; min-height: 120px; padding: calc(var(--horn) + 1rem) 1.2rem 1.1rem;
    background: linear-gradient(170deg, var(--inv-primary), var(--gm-red-lo));
    -webkit-mask: var(--gm-horn-top) top / 100% var(--horn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--horn) - 1px) / 100% 100% no-repeat;
    mask: var(--gm-horn-top) top / 100% var(--horn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--horn) - 1px) / 100% 100% no-repeat;
}
.gm-event--photo .gm-event__head { aspect-ratio: 4 / 3; }
.gm-event__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-event--photo .gm-event__head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--gm-dark) 82%, transparent)); }
.gm-event__name { position: relative; z-index: 1; margin: 0; font-family: var(--gm-heading); font-weight: 600; font-size: 1.75rem; line-height: 1.15; color: var(--gm-on-dark); text-align: left; }
.gm-event__body { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1.1rem; margin: 0; padding: 1.25rem 1.1rem .4rem; text-align: left; }
.gm-event__when {
    display: grid; align-content: center; justify-items: center; margin: 0; padding: .8rem .3rem;
    background: linear-gradient(170deg, var(--inv-primary), var(--gm-red-lo)); color: var(--gm-on-dark); text-align: center; line-height: 1.2;
    box-shadow: inset 0 3px 0 var(--gm-gold);
}
.gm-event__weekday { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.gm-event__day { font-family: var(--gm-heading); font-weight: 600; font-size: 2.4rem; line-height: 1.05; color: var(--gm-gold-hi); }
.gm-event__month { font-size: .62rem; letter-spacing: .06em; }
.gm-event__time { margin-bottom: .35rem; font-weight: 500; font-size: .9rem; color: var(--inv-primary); }
.gm-event__venue { margin-bottom: .2rem; font-family: var(--gm-heading); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.gm-event__address, .gm-event__dress { margin-bottom: .4rem; font-size: .84rem; line-height: 1.6; color: var(--tone-muted); }
.gm-event .inv-maps { padding: .6rem 1.1rem 1.4rem; }

/* ---------- love story: red, gold thread on the left ---------- */

.gm-paku--story { top: -14px; right: -34px; width: 150px; height: 150px; transform: scaleX(-1); opacity: .4; }
.gm-chapters { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.1rem; text-align: left; }
.gm-chapters::before {
    content: ''; position: absolute; top: .4rem; bottom: .4rem; left: .45rem; width: 1px;
    background: linear-gradient(transparent, var(--gm-gold) 6%, var(--gm-gold) 94%, transparent);
}
.gm-chapter { position: relative; }
.gm-chapter + .gm-chapter { margin-top: 2.5rem; }
.gm-chapter__node {
    position: absolute; top: .35rem; left: calc(-2.1rem + .45rem - 7px); width: 14px; height: 14px;
    background: var(--gm-gold-grad); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--inv-primary);
}
.gm-chapter__arch { width: 62%; margin: 0 0 1.4rem; }
.gm-chapter__date { font-size: .66rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gm-gold-hi); }
.gm-chapter h3 { margin: .15rem 0 .45rem; font-family: var(--gm-heading); font-weight: 600; font-size: 1.45rem; line-height: 1.25; color: var(--gm-on-dark); }
.gm-chapter p { margin: 0; font-size: .92rem; color: var(--tone-muted); }

/* ---------- gallery: mosaic with hairline gaps, the first photo horned ---------- */

.gm-gallery .inv-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 104px; grid-auto-flow: dense; gap: 5px; }
.gm-gallery .inv-gallery__item { aspect-ratio: auto; height: 100%; border-radius: 2px; }
.gm-gallery .inv-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gm-gallery .inv-gallery__item:nth-child(6n + 4) { grid-row: span 2; }
.gm-gallery .inv-gallery__item:nth-child(6n + 5), .gm-gallery .inv-gallery__item:nth-child(6n) { grid-column: span 2; }
.gm-gallery .inv-gallery__item:first-child { border-radius: 0; -webkit-mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat; mask: var(--gm-arch-mask) 0 0 / 100% 100% no-repeat; }
.gm-gallery .inv-gallery__item img { transition: transform .8s ease; }
.gm-gallery .inv-gallery__item:hover img { transform: scale(1.04); }

/* ---------- live streaming: horned red panel ---------- */

.gm-stream { padding-block: 3.5rem; }
.gm-stream__panel {
    --horn: 26px;
    padding: calc(var(--horn) + 1.8rem) 1.4rem 2.1rem;
    background: linear-gradient(170deg, var(--inv-primary), var(--gm-red-lo)); color: var(--gm-on-dark);
    --tone-title: var(--gm-on-dark); --tone-ornament: var(--gm-gold); --tone-seed: var(--gm-red-lo);
    -webkit-mask: var(--gm-horn-top) top / 100% var(--horn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--horn) - 1px) / 100% 100% no-repeat;
    mask: var(--gm-horn-top) top / 100% var(--horn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--horn) - 1px) / 100% 100% no-repeat;
}
.gm-stream__panel .gm-heading { margin-bottom: 1.4rem; }
.gm-stream__note { font-size: .88rem; color: var(--gm-gold-hi); }
.gm-stream .inv-button { margin-top: .5rem; }

/* ---------- gift: songket surface, dark cards with a gold chip ---------- */

.gm-gift .inv-gift { margin-top: 1.75rem; }
.gm-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.gm-gift .inv-gift__accounts .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gm-gift .inv-gift__account p { margin: 0; }
.gm-gift .inv-gift__accounts .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0; margin: 0; padding: 3.1rem .85rem .85rem; text-align: left; overflow: hidden; border-radius: 6px;
    background:
        radial-gradient(110% 80% at 100% 100%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 60%),
        linear-gradient(140deg, color-mix(in srgb, var(--gm-dark) 80%, var(--inv-primary)), var(--gm-dark));
    box-shadow: 0 14px 28px rgb(0 0 0 / .4), inset 0 0 0 1px var(--gm-line);
}
/* the chip */
.gm-gift .inv-gift__accounts .inv-gift__account::after {
    content: ''; position: absolute; top: 1.2rem; left: .85rem; width: 1.7rem; height: 1.25rem; border-radius: 4px;
    background: var(--gm-gold-grad); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
.gm-gift .inv-gift__accounts .inv-gift__bank {
    position: absolute; top: 1.1rem; right: .85rem; max-width: calc(100% - 3.4rem); text-align: right; overflow-wrap: anywhere;
    font-size: .7rem; font-weight: 500; line-height: 1.5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-gold-hi);
}
.gm-gift .inv-gift__accounts .inv-gift__logo { height: 1.5rem; padding: .2rem .4rem; border-radius: .35rem; }
.gm-gift .inv-gift__accounts .inv-gift__logo img { max-width: 4rem; }
.gm-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-weight: 500;
    font-size: 1rem; line-height: 1.3; letter-spacing: .04em; overflow-wrap: anywhere;
}
.gm-gift .inv-gift__holder { margin-top: .15rem !important; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; opacity: .88; overflow-wrap: anywhere; }
.gm-gift .inv-gift__accounts .inv-button--outline { margin-top: .6rem; padding: .35rem .7rem; font-size: .62rem; letter-spacing: .1em; }
.gm-gift .inv-gift__address {
    margin-top: .9rem; padding: 1.5rem 1.25rem; border-radius: 6px;
    background: color-mix(in srgb, var(--gm-dark) 82%, transparent); box-shadow: inset 0 0 0 1px var(--gm-line);
}
.gm-gift .inv-gift__address .inv-gift__bank { font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gm-gold); }
.gm-gift .inv-gift__address .inv-gift__holder { font-size: .85rem; letter-spacing: .04em; text-transform: none; }
.gm-gift .inv-gift__address .inv-button { margin-top: .75rem; }

/* ---------- rsvp + wishes: clean paper panels with a red top rule ---------- */

.gm-panel {
    padding: 1.6rem 1.3rem; text-align: left; color: var(--inv-text);
    background: var(--gm-paper); border-top: 3px solid var(--inv-primary);
    box-shadow: 0 24px 44px -28px color-mix(in srgb, var(--gm-dark) 80%, transparent);
}
.gm-dark .gm-panel { border-top-color: var(--gm-gold); }
.gm-panel .inv-form input:not([type=radio]):not([type=checkbox]),
.gm-panel .inv-form select,
.gm-panel .inv-form textarea {
    border: 0; border-bottom: 1px solid color-mix(in srgb, var(--inv-text) 28%, transparent); border-radius: 0;
    background: transparent; padding-inline: 0; color: var(--inv-text);
}
.gm-panel .inv-form input:focus, .gm-panel .inv-form select:focus, .gm-panel .inv-form textarea:focus { outline: none; border-bottom-color: var(--inv-primary); }
.gm-panel .inv-form .inv-button { justify-self: stretch; margin-top: .5rem; }
.gm-panel .inv-button--outline { color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 60%, transparent); }
.gm-panel .inv-wishes { --inv-wishes-height: 20rem; }
.gm-panel .inv-wishes__list { scrollbar-color: var(--gm-line) transparent; }
.gm-panel .inv-wish { padding: .65rem .8rem; background: color-mix(in srgb, var(--inv-accent) 12%, var(--gm-paper)); border-left: 2px solid var(--inv-primary); border-radius: 0; }
.gm-panel .inv-wish__name { font-family: var(--gm-heading); font-weight: 600; font-size: .98rem; color: var(--inv-primary); }
.gm-panel .inv-wish__message { font-size: .88rem; line-height: 1.45; }
.gm-panel .inv-wish__time { font-size: .7rem; }

/* ---------- closing: full-bleed photo melting into merah saga ---------- */

.gm-closing {
    min-height: 760px; display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: 15rem;
    background-image:
        radial-gradient(90% 40% at 50% 62%, color-mix(in srgb, var(--gm-red-hi) 55%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-primary), var(--gm-red-lo));
}
.gm-closing__photo {
    position: absolute; inset: 0 0 auto; height: 72%; z-index: -1;
    -webkit-mask-image: linear-gradient(#000 35%, rgb(0 0 0 / .5) 62%, transparent); mask-image: linear-gradient(#000 35%, rgb(0 0 0 / .5) 62%, transparent);
}
.gm-closing__photo { filter: sepia(.45) saturate(1.5) brightness(.82) contrast(1.06); }
/* a warm wash so black-and-white photos turn rosy-gold instead of grey */
.gm-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gm-dark) 45%, transparent), transparent 30%, color-mix(in srgb, var(--inv-primary) 70%, transparent)),
        color-mix(in srgb, var(--inv-primary) 38%, transparent);
    mix-blend-mode: multiply;
}
.gm-closing__inner { position: relative; max-width: 360px; margin: 0 auto; }
.gm-closing__crown { position: relative; width: 250px; margin: 0 auto 1.1rem; }
.gm-closing__roof { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgb(0 0 0 / .35)); }
.gm-closing__suntiang { position: absolute; top: 0; left: 32%; width: 36%; height: auto; z-index: 1; }
.gm-closing .gm-eyebrow { color: var(--gm-gold-hi); }
.gm-closing__message { font-size: .92rem; }
.gm-closing__names { margin: 1rem 0 .5rem; font-size: 3.4rem; }
.gm-closing__signature { margin: 0; font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gm-gold-hi); }
.gm-paku--cl, .gm-paku--cr { top: auto; bottom: 5px; width: 104px; height: 104px; opacity: .8; }
.gm-paku--cl { left: 0; transform: rotate(-90deg); }
.gm-paku--cr { right: 0; transform: rotate(180deg); }
.gm-closing__marawa { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- shared components outside the sections ---------- */

.gm-page { background: var(--inv-background); }
.inv-music__button { background: var(--gm-dark); color: var(--gm-gold); box-shadow: 0 0 0 1px var(--gm-gold), 0 8px 20px rgb(0 0 0 / .35); }
.inv-checkin { margin: 2rem 1.6rem; border-radius: 0; }
.inv-branding { background: var(--gm-dark); color: var(--gm-on-dark); }

/* ---------- wide screens: royal panel left, invitation right ---------- */

@media (min-width: 1024px) {
    .gm-aside {
        position: fixed; inset: 0 var(--gm-column) 0 0; z-index: 0;
        display: flex; align-items: center; justify-content: center; padding: 3rem 5rem;
        background-position: center 30%; text-align: center; color: var(--gm-on-dark);
        background-image:
            radial-gradient(60% 50% at 50% 35%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 75%),
            linear-gradient(color-mix(in srgb, var(--gm-dark) 72%, transparent), color-mix(in srgb, var(--gm-dark) 88%, transparent)),
            var(--gm-photo, linear-gradient(160deg, var(--inv-primary), var(--gm-dark)));
    }
    /* marawa down the edge against the invitation column */
    .gm-aside::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 6px; background: linear-gradient(180deg, #141010 0 33.4%, #b8161f 0 66.7%, #e2b33c 0); }
    .gm-aside__inner { position: relative; max-width: 640px; }
    .gm-aside__crown { position: relative; width: 360px; margin: 0 auto 1.5rem; }
    .gm-aside__roof { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .4)); }
    .gm-aside__suntiang { position: absolute; top: 0; left: 32%; width: 36%; height: auto; }
    .gm-aside__names { margin: .5rem 0 1.25rem; font-size: 5.4rem; line-height: 1.2; }
    .gm-aside__quote { max-width: 520px; margin: 0 auto 2rem; font-style: italic; font-size: .95rem; line-height: 1.75; opacity: .9; }
    .gm-aside__guest { display: inline-block; padding: .9rem 2.5rem; border-top: 1px solid var(--gm-line); border-bottom: 1px solid var(--gm-line); }
    .gm-aside__guest p { margin: 0 0 .3rem; font-size: .85rem; opacity: .85; }
    .gm-aside__guest-name { display: block; font-family: var(--gm-heading); font-size: 1.6rem; letter-spacing: .02em; }

    .gm-page {
        position: relative; z-index: 1; width: var(--gm-column); margin-left: auto;
        min-height: 100vh; box-shadow: -24px 0 50px rgb(0 0 0 / .45);
    }
    /* the cover only covers the invitation column; the panel shows names and guest */
    .gm-cover { left: auto; width: var(--gm-column); }
    .gm-cover__guest { display: none; }
    .gm-house { --hw: min(400px, calc((100svh - 250px) / 1.2)); }
}

/* short phones: a shorter wall and smaller names so the button stays in view */
@media (max-height: 760px) {
    .gm-house { --hw: min(92vw, 380px, calc((100svh - 324px) / 1.1)); --wall: calc(var(--hw) * .64); }
    .gm-cover__names { font-size: 2.6rem; }
    .gm-cover__date { margin-bottom: .75rem; }
    .gm-cover__guest { margin-bottom: .9rem; padding-block: .5rem; }
}
@media (max-height: 640px) {
    .gm-house { --hw: min(92vw, 380px, calc((100svh - 286px) / 1.04)); --wall: calc(var(--hw) * .58); margin-bottom: .6rem; }
    .gm-cover__inner { padding-block: .7rem .9rem; }
    .gm-cover__eyebrow { margin-bottom: .3rem; }
    .gm-cover__names { font-size: 2.3rem; }
    .gm-cover__date { margin-bottom: .55rem; font-size: .7rem; }
    .gm-cover__guest { margin-bottom: .7rem; padding-block: .4rem; }
    .gm-cover__guest-name { font-size: 1.15rem; }
}
@media (max-width: 359px) {
    .gm-section { padding-inline: 1.15rem; }
    .gm-cover__names, .gm-closing__names { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-cover__door, .gm-cover__scroll, .gm-cover__veil, .gm-cover__marawa, .gm-cover--leave { transition: none; }
    .gm-strip__track { animation: none; }
    .inv-button, .gm-icon-link, .gm-gallery .inv-gallery__item img { transition: none; }
}

/* ---------- 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; }
.gm-closing { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }

/* ---------- intro scene "Rumah Gadang Bangkit" (scene.json, sections/_scene): the house builds itself on songket ---------- */
.gm-scene-ground { position: absolute; inset: 0; box-shadow: inset 0 0 18vmax rgb(0 0 0 / .5); }
.gm-scene-wall {
    position: absolute; inset: 0; overflow: hidden;
    background: linear-gradient(170deg, var(--inv-primary), var(--gm-red-lo)); box-shadow: 0 18px 34px rgb(0 0 0 / .45);
}
.gm-scene-wall__img { position: absolute; inset: 0; background-position: center 30%; }
.gm-scene-pillar { overflow: visible; box-shadow: inset 0 0 0 1px var(--gm-gold), 0 10px 18px rgb(0 0 0 / .4); }
.gm-scene-beam { box-shadow: inset 0 1px 0 var(--gm-gold-hi), inset 0 -1px 0 var(--gm-gold), 0 6px 12px rgb(0 0 0 / .4); }
.gm-scene-roof, .gm-scene-suntiang { display: flex; align-items: flex-end; width: 100%; height: 100%; }
.gm-scene-roof > svg, .gm-scene-suntiang > svg { width: 100%; height: auto; max-height: 100%; overflow: visible; }
.gm-scene-roof > svg { filter: drop-shadow(0 12px 14px rgb(0 0 0 / .45)); }
.gm-scene-suntiang > svg { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gm-gold) 45%, transparent)) drop-shadow(0 3px 4px rgb(0 0 0 / .4)); }
/* the crown unfolds ray by ray as it rises into the saddle of the roof (the layer starts at 2.56s) */
html.inv-anim .gm-scene-suntiang .gm-suntiang__ray { animation: gm-unfold 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(2.75s + var(--i) * 50ms); }
.gm-scene-ducks { overflow: visible; color: var(--gm-gold); --tone-seed: var(--gm-dark); }
.gm-scene-ducks--r { scale: -1 1; }
/* waddling home: each duck bobs on its own beat */
@keyframes gm-waddle { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.4px) rotate(-4deg); } }
html.inv-anim .gm-scene-duck { transform-box: fill-box; transform-origin: 50% 100%; animation: gm-waddle .42s ease-in-out infinite; animation-delay: calc(var(--d) * -.14s); }
.gm-scene-knot { overflow: visible; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gm-gold) 60%, transparent)); }
.gm-scene-paku { overflow: visible; scale: 1 -1; }
.gm-scene-paku--r { scale: -1 -1; }
.gm-scene-marawa { height: 100%; }
/* the name card is the wall of the house: a veiled red panel between the pillars, a gold frame and a songket band */
.inv-intro--scene .inv-scene__card {
    top: 54%; width: 72vw; height: 43.6%; aspect-ratio: auto; padding: 1.6rem 1.2rem; border-radius: 0;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    background:
        radial-gradient(90% 50% at 50% 30%, color-mix(in srgb, var(--gm-red-hi) 45%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, transparent), color-mix(in srgb, var(--gm-red-lo) 92%, transparent));
    box-shadow: inset 0 0 0 1px var(--gm-line);
}
.inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; inset: 10px; border: 1px solid var(--gm-gold); pointer-events: none;
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gm-dark) 35%, transparent), inset 0 0 0 4px var(--gm-line);
}
.inv-intro--scene .inv-scene__card .inv-intro__label { color: var(--gm-gold-hi); font-family: var(--gm-body); font-size: .66rem; letter-spacing: .32em; }
.inv-intro--scene .inv-scene__card .inv-intro__names {
    padding: 0 .2em; font-family: var(--gm-display); font-weight: 400; font-size: clamp(2.2rem, 10vw, 3.2rem); line-height: 1.2;
    background: var(--gm-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 6px rgb(0 0 0 / .45));
}
.inv-intro--scene .inv-scene__card .inv-intro__date { color: var(--gm-on-dark); font-family: var(--gm-body); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; }
.inv-intro--scene .inv-scene__card .inv-intro__rule { background: var(--gm-marawa); height: 3px; }
.inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--gm-dark) 70%, transparent); color: var(--gm-gold-hi); border-color: var(--gm-line); }