/*
 * Template "Retro Disco" (Ulang Tahun, dewasa): "70s disco night, stylish".
 * A deep night colour (chocolate by default) lit by a warm 70s gradient (gold → orange → magenta → violet) with
 * chrome and gold; a faceted mirror ball, vinyl records, a hi-fi receiver, the dance floor.
 * Mobile-first, one centered column (~460px) on a night backdrop with sunset rings on wide screens.
 *
 * Colors come from the chosen color variant (template.json → <x-inv.head>):
 *   --inv-primary (hot magenta / pink / orange), --inv-accent, --inv-background (the warm light ground),
 *   --inv-text (dark ink), --inv-deep (the night colour), --inv-glow (text on the night), --inv-paper (cards),
 *   --inv-btn / --inv-btnink (buttons on light ground), --inv-s1…s4 (the four 70s stripes: gold, orange, hot, violet)
 * Rhythm: the sections of <main> alternate automatically between NIGHT (odd: 1st, 3rd…) and LIGHT (even) by
 * nth-of-type, so hidden sections never break it. A night section redefines the ground/text/card variables locally
 * (--inv-background = night, --inv-text = glow…), so every component inside simply follows. The closing is always
 * a night section.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it every drawing is shown finished and the ball, records and lights stand still.
 *
 * Contents: 1 base + section tones · 2 shared pieces (records, mirror ball, heading, bands, chips, photo background)
 *           · 3 cover · 4 sections in page order · 5 forms (RSVP pass, jukebox) · 6 shared components
 *           · 7 screen sizes · 8 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = "Senja 70-an"; the variant overrides them on html:root */
    --inv-deep: #2a1209;
    --inv-glow: #fff1e0;
    --inv-paper: #fffaf2;
    --inv-btn: #2a1209;
    --inv-btnink: #fde8c9;
    --inv-s1: #f7c548;
    --inv-s2: #f27b2c;
    --inv-s3: #e2366f;
    --inv-s4: #93307f;

    --rd-display: 'Shrikhand', 'Cooper Black', Georgia, serif;
    --rd-serif: 'Fraunces', 'Cooper Black', Georgia, serif;
    --rd-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* the night, fixed here at the root (night sections redefine --inv-deep / --inv-background locally) */
    --rd-night: var(--inv-deep);
    --rd-night-2: color-mix(in srgb, var(--inv-deep) 72%, #000);
    --rd-ink-on-stripe: color-mix(in srgb, var(--inv-deep) 80%, #000);
    /* polished gold (buttons, stickers) and the 70s sunset as one gradient */
    --rd-gold: linear-gradient(140deg, #fff4c8 0%, var(--inv-s1) 28%, color-mix(in srgb, var(--inv-s1) 62%, #7a4a00) 56%, color-mix(in srgb, var(--inv-s1) 70%, #fff) 78%, var(--inv-s1) 100%);
    --rd-sunset: linear-gradient(90deg, var(--inv-s1), var(--inv-s2) 36%, var(--inv-s3) 70%, var(--inv-s4));
    --rd-shadow: 0 20px 40px -26px rgb(0 0 0 / .55);
    --rd-shadow-sm: 0 8px 20px -14px rgb(0 0 0 / .45);
    /* the four stripes as a band (used for edges and dividers) */
    --rd-stripes-x: linear-gradient(90deg, var(--inv-s1) 0 25%, var(--inv-s2) 0 50%, var(--inv-s3) 0 75%, var(--inv-s4) 0);
    --rd-stripes-y: linear-gradient(var(--inv-s1) 0 25%, var(--inv-s2) 0 50%, var(--inv-s3) 0 75%, var(--inv-s4) 0);

    --inv-radius: 18px;
    --inv-font-display: var(--rd-display);
}

/* tones derived from the local ground and text: recomputed wherever a section changes them */
:root, .retro-disco-section, .retro-disco-cover {
    --rd-line: color-mix(in srgb, var(--inv-text) 16%, transparent);
    --rd-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    /* the hot color as text: deep magenta on cream, light pink on the night */
    --rd-hot: color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text));
    --rd-label: var(--rd-hot);
    --rd-field: color-mix(in srgb, var(--inv-background) 45%, var(--inv-paper));
}

/* NIGHT sections: every odd section of <main> and the closing */
.retro-disco-main > section:nth-of-type(odd), .retro-disco-main > .retro-disco-closing {
    --inv-background: var(--rd-night);
    --inv-text: var(--inv-glow);
    --inv-paper: color-mix(in srgb, var(--inv-glow) 9%, var(--rd-night));
    --inv-deep: var(--rd-night-2);
    --inv-btn: var(--inv-s1);
    --inv-btnink: var(--rd-ink-on-stripe);
    --rd-label: var(--inv-s1);
    --rd-shadow: 0 22px 44px -24px rgb(0 0 0 / .8);
    --rd-shadow-sm: 0 10px 22px -14px rgb(0 0 0 / .7);
}

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--rd-sans);
    font-size: 15.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--rd-hot); }

.retro-disco-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

/* the one column of the page */
.retro-disco-main { max-width: 460px; margin: 0 auto; padding: 0 1.25rem; background: var(--inv-background); overflow-x: clip; }
.retro-disco-branding { max-width: 460px; margin: 0 auto; }

/* every section: full column width, the same rhythm, content centered */
.retro-disco-section {
    position: relative; isolation: isolate; margin: 0 -1.25rem; padding: 3.8rem 1.25rem;
    text-align: center; color: var(--inv-text); background-color: var(--inv-background);
}
.retro-disco-section > p { margin: 0 auto 1rem; max-width: 34ch; }

/* LIGHT sections: warm cream with a sunset glow in two corners and a soft sunburst rising from the top corner */
.retro-disco-main > section:nth-of-type(even) {
    background:
        radial-gradient(75% 38% at 100% 0, color-mix(in srgb, var(--inv-s2) 26%, transparent), transparent 72%),
        radial-gradient(70% 34% at 0 100%, color-mix(in srgb, var(--inv-s3) 20%, transparent), transparent 72%),
        linear-gradient(color-mix(in srgb, var(--inv-s1) 10%, var(--inv-background)), var(--inv-background) 40%, color-mix(in srgb, var(--inv-s3) 6%, var(--inv-background)));
}
.retro-disco-main > section:nth-of-type(even)::before {
    content: ''; position: absolute; right: -9rem; top: -9rem; z-index: -1; width: 22rem; aspect-ratio: 1; pointer-events: none;
    background: repeating-conic-gradient(color-mix(in srgb, var(--inv-s2) 16%, transparent) 0 6deg, transparent 6deg 12deg);
    -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%);
}
/* NIGHT sections: the night with a magenta glow from above, an orange one below, and static mirror-light dots */
.retro-disco-main > section:nth-of-type(odd) {
    background:
        radial-gradient(85% 40% at 50% 0, color-mix(in srgb, var(--inv-s3) 30%, transparent), transparent 72%),
        radial-gradient(70% 34% at 100% 100%, color-mix(in srgb, var(--inv-s2) 24%, transparent), transparent 72%),
        radial-gradient(60% 30% at 0 70%, color-mix(in srgb, var(--inv-s4) 26%, transparent), transparent 72%),
        var(--rd-night);
}
.retro-disco-main > section:nth-of-type(odd)::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; z-index: 1; pointer-events: none;
    background: var(--rd-stripes-y);
}
.retro-disco-main > section:nth-of-type(odd)::after, .retro-disco-closing::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle, rgb(255 255 255 / .8) 0 1px, transparent 1.7px) 0 0 / 43px 47px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-s1) 85%, transparent) 0 1.4px, transparent 2.1px) 17px 23px / 67px 59px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-s3) 80%, transparent) 0 1.6px, transparent 2.4px) 31px 9px / 89px 77px,
        radial-gradient(circle, rgb(255 255 255 / .55) 0 2.2px, transparent 3.4px) 52px 61px / 131px 113px;
    opacity: .32;
    -webkit-mask: linear-gradient(#000, rgb(0 0 0 / .35) 55%, #000); mask: linear-gradient(#000, rgb(0 0 0 / .35) 55%, #000);
}

/* ---------- 2. shared pieces ---------- */

/* a vinyl record (size from --size); its label in the middle, a sheen that turns */
.retro-disco-record {
    --size: 120px;
    --label: var(--inv-s3);
    position: relative; display: grid; place-items: center; flex: none;
    width: var(--size); height: var(--size); border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 36%, rgb(255 255 255 / .07) 36.5% 37.5%, transparent 38% 61%, rgb(255 255 255 / .06) 61.5% 62.5%, transparent 63%),
        repeating-radial-gradient(circle, #1d1714 0 1.5px, #2a211c 1.5px 3px);
    box-shadow: 0 12px 24px -14px rgb(0 0 0 / .7), 0 0 0 1.5px color-mix(in srgb, var(--inv-glow) 24%, #0d0a08);
}
.retro-disco-record::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 25deg, transparent 0 6%, rgb(255 255 255 / .2) 11%, transparent 17% 50%, rgb(255 255 255 / .14) 60%, transparent 67%);
}
.retro-disco-record__label {
    position: relative; z-index: 1; display: grid; place-items: center; align-content: center;
    width: 40%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    background: var(--label); color: var(--rd-ink-on-stripe); line-height: 1; text-align: center;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 25%, transparent);
}
.retro-disco-record__label b { font-family: var(--rd-display); font-weight: 400; font-size: calc(var(--size) * .14); line-height: 1; }
.retro-disco-record__label small { font-size: calc(var(--size) * .062); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.retro-disco-record__label .retro-disco-icon { width: 46%; height: 46%; }
/* an empty label gets the spindle hole */
.retro-disco-record__label:empty::after { content: ''; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #1d1714; }
.retro-disco-record--mini { --size: 74px; }
.retro-disco-record--tiny { --size: 30px; }

/* the mirror ball (size from --ball): chrome string + cap, the faceted SVG globe, three star glints */
.retro-disco-ballsprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.retro-disco-ballsprite__warm { stop-color: var(--inv-s2); }
.retro-disco-tile--t0 { fill: #4a4558; }
.retro-disco-tile--t1 { fill: #67637a; }
.retro-disco-tile--t2 { fill: #8b889f; }
.retro-disco-tile--t3 { fill: #b2b0c4; }
.retro-disco-tile--t4 { fill: #d7d6e2; }
.retro-disco-tile--t5 { fill: #f3f3f8; }
.retro-disco-tile--f { fill: #fff; }
.retro-disco-tile--w1 { fill: color-mix(in srgb, var(--inv-s1) 82%, #fff); }
.retro-disco-tile--w2 { fill: color-mix(in srgb, var(--inv-s2) 85%, #fff); }
.retro-disco-tile--w3 { fill: color-mix(in srgb, var(--inv-s3) 85%, #fff); }
.retro-disco-tile--w4 { fill: color-mix(in srgb, var(--inv-s4) 80%, #fff); }

.retro-disco-ball { --ball: 64px; position: relative; width: var(--ball); height: var(--ball); }
.retro-disco-ball__string {
    position: absolute; left: 50%; bottom: 96%; width: 2px; height: 60svh; margin-left: -1px;
    background: linear-gradient(to top, #e9eaf0, color-mix(in srgb, #c7cbd9 30%, transparent));
}
.retro-disco-ball__cap {
    position: absolute; left: 50%; top: -4%; z-index: 1; width: 18%; height: 9%; translate: -50% 0; border-radius: 3px 3px 1px 1px;
    background: linear-gradient(90deg, #7d8293, #f4f5f9 45%, #8e93a3);
}
.retro-disco-ball__globe {
    display: block; width: 100%; height: 100%; overflow: visible;
    filter: drop-shadow(0 0 calc(var(--ball) * .18) color-mix(in srgb, var(--inv-s2) 45%, transparent)) drop-shadow(0 calc(var(--ball) * .1) calc(var(--ball) * .12) rgb(0 0 0 / .45));
}
.retro-disco-ball__glint {
    position: absolute; z-index: 2; width: 26%; aspect-ratio: 1; background: #fff;
    clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
    filter: drop-shadow(0 0 4px #fff);
}
.retro-disco-ball__glint--1 { left: 18%; top: 12%; }
.retro-disco-ball__glint--2 { right: 8%; top: 44%; width: 17%; }
.retro-disco-ball__glint--3 { left: 42%; bottom: 6%; width: 13%; }

/* a section background: the client photo under a strong gradient of the section's own ground */
.retro-disco-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.retro-disco-bg--photo { background: var(--rd-photo) center 28% / cover no-repeat; }
.retro-disco-bg--photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(90% 50% at 50% 0, color-mix(in srgb, var(--inv-s3) 22%, transparent), transparent 75%),
        linear-gradient(color-mix(in srgb, var(--inv-background) 62%, transparent), color-mix(in srgb, var(--inv-background) 80%, transparent) 45%, color-mix(in srgb, var(--inv-background) 95%, transparent) 80%, var(--inv-background));
}

/* section heading: a little 70s sunset over the eyebrow and the title */
.retro-disco-heading { margin: 0 0 1.8rem; }
.retro-disco-heading__rainbow { display: block; width: 4.6rem; height: auto; margin: 0 auto .5rem; overflow: visible; }
.retro-disco-heading__arc { fill: none; stroke-width: 4.6; stroke-linecap: round; }
.retro-disco-heading__arc--1 { stroke: var(--inv-s1); }
.retro-disco-heading__arc--2 { stroke: var(--inv-s2); }
.retro-disco-heading__arc--3 { stroke: var(--inv-s3); }
.retro-disco-heading__arc--4 { stroke: var(--inv-s4); }
.retro-disco-heading__spark { fill: var(--rd-label); }
.retro-disco-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .35rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--rd-label);
}
.retro-disco-heading__eyebrow::before, .retro-disco-heading__eyebrow::after { content: ''; width: 1.3rem; height: 2px; border-radius: 2px; background: var(--rd-sunset); flex: none; }
.retro-disco-heading__title {
    margin: 0; font-family: var(--rd-serif); font-style: italic; font-weight: 640; font-size: 2.15rem; line-height: 1.12;
    font-variation-settings: 'SOFT' 100, 'opsz' 96; letter-spacing: -.01em; color: var(--inv-text);
}

/* four tapering stripes, used as a divider */
.retro-disco-bands { display: grid; justify-items: center; gap: 3px; margin: 1.6rem auto 0; }
.retro-disco-bands i { display: block; height: 4px; border-radius: 4px; }
.retro-disco-bands i:nth-child(1) { width: 7.5rem; background: var(--inv-s1); }
.retro-disco-bands i:nth-child(2) { width: 6rem; background: var(--inv-s2); }
.retro-disco-bands i:nth-child(3) { width: 4.5rem; background: var(--inv-s3); }
.retro-disco-bands i:nth-child(4) { width: 3rem; background: var(--inv-s4); }

.retro-disco-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* a small rounded link with an icon (Instagram, TikTok) */
.retro-disco-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.2rem 0 0 !important; max-width: none !important; }
.retro-disco-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem 1.05rem;
    border-radius: 999px; font-size: .86rem; font-weight: 700; text-decoration: none; color: var(--inv-text);
    background: var(--inv-paper); box-shadow: inset 0 0 0 1.5px var(--rd-line);
}
.retro-disco-chip .retro-disco-icon { color: var(--rd-hot); }

/* ---------- 3. cover ---------- */
.retro-disco-cover {
    --arch-h: min(44svh, 100vw);
    --arch-w: min(calc(var(--arch-h) * .76), 64vw);
    --ring: calc(var(--arch-w) * .03);
    --ball: calc(var(--arch-w) * .44);
    --inv-background: var(--rd-night);
    --inv-text: var(--inv-glow);
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 1.5rem 1.25rem 2.4rem;
    isolation: isolate; text-align: center; color: var(--inv-glow);
    background:
        radial-gradient(85% 50% at 50% 30%, color-mix(in srgb, var(--inv-s3) 34%, transparent), transparent 72%),
        radial-gradient(90% 40% at 50% 104%, color-mix(in srgb, var(--inv-s2) 38%, transparent), transparent 70%),
        radial-gradient(50% 30% at 0 55%, color-mix(in srgb, var(--inv-s4) 30%, transparent), transparent 70%),
        linear-gradient(var(--rd-night), var(--rd-night-2));
}
/* the 70s sunburst behind the arch (it turns very slowly) */
.retro-disco-cover__burst {
    position: absolute; left: 50%; top: 36%; z-index: -3; width: 240vmax; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
    background: repeating-conic-gradient(color-mix(in srgb, var(--inv-s1) 17%, transparent) 0 5deg, transparent 5deg 10deg, color-mix(in srgb, var(--inv-s3) 15%, transparent) 10deg 15deg, transparent 15deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 3%, transparent 30%); mask: radial-gradient(circle, #000 3%, transparent 30%);
}
/* static reflections of the ball scattered over the night */
.retro-disco-cover__lights { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.retro-disco-cover__spot {
    position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
    background: radial-gradient(circle, #fff 0 18%, var(--spot) 30%, color-mix(in srgb, var(--spot) 30%, transparent) 52%, transparent 72%);
    opacity: .85;
}
.retro-disco-cover__spot--1 { --spot: var(--inv-glow); }
.retro-disco-cover__spot--2 { --spot: var(--inv-s1); }
.retro-disco-cover__spot--3 { --spot: var(--inv-s3); }

/* the lit dance floor at the bottom, in perspective */
.retro-disco-cover__floor { position: absolute; left: -20%; right: -20%; bottom: 0; z-index: -1; height: 22svh; perspective: 260px; pointer-events: none; }
.retro-disco-cover__floor span {
    --tile: 36px;
    position: absolute; inset: 0; transform: rotateX(58deg); transform-origin: 50% 100%;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--inv-glow) 26%, transparent) 1.5px, transparent 1.5px) 0 0 / var(--tile) var(--tile),
        linear-gradient(color-mix(in srgb, var(--inv-glow) 26%, transparent) 1.5px, transparent 1.5px) 0 0 / var(--tile) var(--tile),
        conic-gradient(color-mix(in srgb, var(--inv-s3) 46%, transparent) 0 25%, color-mix(in srgb, var(--inv-s1) 36%, transparent) 0 50%, color-mix(in srgb, var(--inv-s2) 46%, transparent) 0 75%, color-mix(in srgb, var(--inv-s4) 42%, transparent) 0) 0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
    -webkit-mask: linear-gradient(transparent, #000 60%); mask: linear-gradient(transparent, #000 60%);
}

.retro-disco-cover__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }

/* the arch with the photo; the ball hangs at its right shoulder, the age sticker at its lower left corner */
.retro-disco-cover__stage { position: relative; margin-top: calc(var(--ball) * .42); }
.retro-disco-cover__arch {
    width: var(--arch-w); height: var(--arch-h); margin: 0 calc(var(--ring) * 4);
    border-radius: 999px 999px 0 0;
    box-shadow:
        0 0 0 var(--ring) var(--inv-s1), 0 0 0 calc(var(--ring) * 2) var(--inv-s2), 0 0 0 calc(var(--ring) * 3) var(--inv-s3),
        0 0 0 calc(var(--ring) * 4) var(--inv-s4), 0 0 0 calc(var(--ring) * 4 + 2px) color-mix(in srgb, #fff 70%, var(--inv-s1)),
        0 0 calc(var(--arch-w) * .3) calc(var(--ring) * 3) color-mix(in srgb, var(--inv-s3) 34%, transparent);
    clip-path: inset(calc(var(--arch-w) * -.5) calc(var(--arch-w) * -.5) 0 calc(var(--arch-w) * -.5));
}
.retro-disco-cover__window {
    position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 108%, var(--inv-s1) 0 20%, var(--inv-s2) 20% 38%, var(--inv-s3) 38% 56%, var(--inv-s4) 56% 74%, var(--rd-night-2) 74%);
}
.retro-disco-cover__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.retro-disco-cover__window::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--rd-night) 55%, transparent), transparent 22%), radial-gradient(70% 40% at 30% 10%, rgb(255 255 255 / .12), transparent 70%);
}
.retro-disco-cover__monogram {
    position: relative; z-index: 1; margin-top: -14%; font-family: var(--rd-display); font-size: calc(var(--arch-h) * .4); line-height: 1;
    color: var(--inv-glow); text-shadow: 3px 3px 0 var(--rd-night-2);
}
.retro-disco-ball--cover { position: absolute; z-index: 2; right: calc(var(--ball) * -.08); top: calc(var(--ball) * -.42); }
/* the age as a round gold sticker on the arch's lower left corner */
.retro-disco-cover__age {
    position: absolute; left: calc(var(--ring) * -2 - .7rem); bottom: calc(var(--arch-h) * .05); z-index: 3;
    display: grid; place-items: center; align-content: center; width: calc(var(--arch-w) * .3); min-width: 3.6rem; aspect-ratio: 1; margin: 0;
    border-radius: 50%; rotate: -10deg; line-height: 1;
    background: var(--rd-gold); color: var(--rd-ink-on-stripe);
    box-shadow: 0 0 0 3px var(--rd-night), 0 0 0 4.5px color-mix(in srgb, var(--inv-s1) 60%, transparent), 0 12px 22px -10px rgb(0 0 0 / .7);
}
.retro-disco-cover__age::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--rd-ink-on-stripe) 40%, transparent); }
.retro-disco-cover__age span { font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
.retro-disco-cover__age strong { font-family: var(--rd-display); font-weight: 400; font-size: calc(var(--arch-w) * .12); }

.retro-disco-cover__title {
    display: inline-flex; align-items: center; gap: .6rem; margin: 1.3rem 0 0; max-width: 100%;
    font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; line-height: 1.4; color: var(--inv-s1);
}
.retro-disco-cover__title::before, .retro-disco-cover__title::after { content: ''; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--rd-sunset); flex: none; }
.retro-disco-cover__name {
    max-width: 100%; margin: .2rem 0 0; font-family: var(--rd-display); font-weight: 400; font-size: 3.4rem; line-height: 1.12;
    overflow-wrap: anywhere; letter-spacing: .01em;
}
/* the name: a sunset gradient fill with a violet drop line under it */
.retro-disco-cover__name span, .retro-disco-closing__title span {
    display: inline-block; padding: 0 .12em .05em;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-s1) 30%, #fff) 0%, var(--inv-s1) 34%, var(--inv-s2) 62%, var(--inv-s3) 92%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--inv-s4) 80%, #000)) drop-shadow(0 10px 16px rgb(0 0 0 / .5));
}
.retro-disco-cover__date { display: inline-flex; align-items: center; gap: .45rem; margin: .55rem 0 0; font-size: .94rem; font-weight: 600; }
.retro-disco-cover__date .retro-disco-icon { color: var(--inv-s1); }
.retro-disco-cover__quote {
    max-width: 31ch; margin: .4rem auto 0; font-family: var(--rd-serif); font-size: .98rem; font-style: italic; line-height: 1.42;
    color: color-mix(in srgb, var(--inv-glow) 86%, var(--rd-night));
}
/* the guest's name on a ticket with notches and a gold hairline */
.retro-disco-cover__guest {
    width: min(100%, 18rem); margin: 1rem 0 0; padding: .5rem 1.2rem .6rem;
    background: linear-gradient(color-mix(in srgb, var(--inv-glow) 12%, var(--rd-night)), color-mix(in srgb, var(--inv-glow) 6%, var(--rd-night)));
    border-radius: 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-s1) 45%, transparent);
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
}
.retro-disco-cover__guest p { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-s1); }
.retro-disco-cover__guest-name { display: block; font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--inv-glow); overflow-wrap: anywhere; }

.retro-disco-cover__open.inv-button {
    margin-top: 1.05rem; min-height: 3.1rem; padding: .7rem 1.7rem; gap: .55rem;
    font-weight: 700; font-size: .98rem; letter-spacing: .01em;
    background: var(--rd-gold); color: var(--rd-ink-on-stripe);
    box-shadow: 0 0 0 3px var(--rd-night), 0 0 0 4.5px color-mix(in srgb, var(--inv-s1) 60%, transparent), 0 14px 30px -10px color-mix(in srgb, var(--inv-s2) 70%, #000);
}
.retro-disco-cover__open .retro-disco-icon { width: 1.25rem; height: 1.25rem; }
.retro-disco-cover__open:focus-visible { outline: 2px solid var(--inv-glow); outline-offset: 6px; }

/* opening: the ball drops, the light spots scatter, the content fades, then the cover (≈1s in all) */
.retro-disco-cover--leave { transition: opacity .45s ease .55s; }
.retro-disco-cover--gone { opacity: 0; }
.retro-disco-cover--leave .inv-enter { animation: none !important; transition: opacity .35s ease .1s, translate .5s ease; }
.retro-disco-cover--gone .retro-disco-cover__inner > .inv-enter { opacity: 0; translate: 0 16px; }
.retro-disco-cover--gone .retro-disco-cover__arch { opacity: 0; translate: 0 10px; }
.retro-disco-cover--gone .retro-disco-cover__age { opacity: 0; }
.retro-disco-cover--leave .retro-disco-ball--cover { animation: none !important; transition: translate .8s cubic-bezier(.55, 0, .85, .35); }
.retro-disco-cover--gone .retro-disco-ball--cover { translate: 0 85svh; }
.retro-disco-cover--leave .retro-disco-cover__lights { transition: scale .95s cubic-bezier(.2, .7, .2, 1), opacity .95s ease; }
.retro-disco-cover--gone .retro-disco-cover__lights { scale: 2.4; opacity: 0; }
.retro-disco-cover--leave .retro-disco-cover__floor { transition: opacity .6s ease, filter .3s ease; }
.retro-disco-cover--gone .retro-disco-cover__floor { opacity: 0; filter: brightness(1.8); }

/* ---------- 4. sections ---------- */

/* opening: on a faint client photo; a record with the tone arm, the greeting, the sentence */
.retro-disco-opening { padding-top: 4.6rem; padding-bottom: 4.2rem; }
.retro-disco-opening__deck { position: relative; width: 8.4rem; height: 6.4rem; margin: 0 auto 1.3rem; }
.retro-disco-opening__deck .retro-disco-record { --size: 96px; --label: var(--inv-s3); position: absolute; left: 0; top: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-s1) 30%, transparent), 0 0 30px color-mix(in srgb, var(--inv-s2) 45%, transparent), 0 14px 26px -12px rgb(0 0 0 / .8); }
.retro-disco-opening__arm { position: absolute; right: .6rem; top: -.3rem; width: 2.9rem; height: auto; overflow: visible; }
.retro-disco-opening__arm circle { fill: #d9dbe3; stroke: #8d909c; stroke-width: 2.5; }
.retro-disco-opening__arm path { fill: none; stroke: #e6e7ed; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.retro-disco-opening__arm rect { fill: var(--inv-s1); }
.retro-disco-opening__greeting {
    margin: 0 auto .7rem !important; font-family: var(--rd-serif); font-style: italic; font-weight: 640; font-size: 2.2rem; line-height: 1.15;
    font-variation-settings: 'SOFT' 100, 'opsz' 96; color: var(--rd-label);
}
.retro-disco-opening__message { color: var(--inv-text); font-size: 1.04rem; line-height: 1.75; }

/* celebrant: the LP (sleeve + record sliding out) */
.retro-disco-lp { position: relative; width: min(100%, 19rem); margin: 0 auto; padding-top: .9rem; }
.retro-disco-lp__record {
    --size: calc(min(100vw - 2.5rem, 19rem) * .66);
    --label: var(--inv-primary);
    position: absolute; left: 4%; top: calc(.9rem + 3%); z-index: 1;
    translate: 32% 0; transition: translate 1.1s cubic-bezier(.2, .7, .2, 1) .25s;
}
.retro-disco-lp__sleeve {
    position: relative; z-index: 2; width: 72%; aspect-ratio: 1; margin: 0; overflow: hidden;
    border-radius: 6px; background: var(--inv-deep); box-shadow: var(--rd-shadow), 6px 0 14px -10px rgb(0 0 0 / .6);
}
.retro-disco-lp__photo { position: absolute; inset: 0 0 20% 0; width: 100%; height: 80%; object-fit: cover; }
.retro-disco-lp__empty {
    position: absolute; inset: 0 0 20% 0; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 115%, var(--inv-s1) 0 22%, var(--inv-s2) 22% 40%, var(--inv-s3) 40% 58%, var(--inv-s4) 58% 76%, color-mix(in srgb, var(--inv-deep) 82%, #000) 76%);
}
.retro-disco-lp__empty span { margin-top: -18%; font-family: var(--rd-display); font-size: 4.6rem; line-height: 1; color: var(--inv-glow); text-shadow: 3px 3px 0 var(--inv-deep); }
/* the album title strip at the bottom of the sleeve, under four thin stripes */
.retro-disco-lp__caption {
    position: absolute; left: 0; right: 0; bottom: 0; height: 20%; display: grid; place-items: center; padding: 0 .8rem;
    font-family: var(--rd-display); font-size: 1.3rem; line-height: 1.1; color: var(--inv-glow); background: var(--inv-deep);
    overflow-wrap: anywhere;
}
.retro-disco-lp__caption::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; background: var(--rd-stripes-y); }
.retro-disco-lp__sticker {
    position: absolute; left: -.5rem; top: 0; z-index: 3; display: grid; place-items: center;
    width: 5.6rem; aspect-ratio: 1; margin: 0; padding: .55rem; border-radius: 50%; rotate: -12deg;
    background: var(--inv-s1); color: var(--rd-ink-on-stripe); box-shadow: 0 8px 18px -8px rgb(0 0 0 / .6);
    font-size: .66rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.retro-disco-lp__sticker span { overflow-wrap: anywhere; }
.retro-disco-celebrant__name { margin: 1.6rem auto .7rem; max-width: 18ch; font-family: var(--rd-display); font-weight: 400; font-size: 1.7rem; line-height: 1.2; }
/* the album credits */
.retro-disco-credits { width: min(100%, 19rem); margin: 0 auto; text-align: left; }
.retro-disco-credits div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1.5px dashed var(--rd-line); }
.retro-disco-credits dt { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); }
.retro-disco-credits dd { margin: 0; font-weight: 700; text-align: right; }

/* message: liner notes with the stripes down the left edge */
.retro-disco-notes {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 1.7rem 1.3rem 1.3rem 2.3rem; text-align: left;
    border-radius: 4px 20px 20px 4px; background: var(--inv-paper); box-shadow: var(--rd-shadow);
}
.retro-disco-notes::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border-radius: 4px 0 0 4px; background: var(--rd-stripes-x); }
.retro-disco-notes__mark { position: absolute; right: 1rem; top: -1.1rem; font-family: var(--rd-display); font-size: 4.2rem; line-height: 1; color: var(--inv-s3); }
.retro-disco-notes__text { margin: 0; }
.retro-disco-notes__text p { margin: 0; font-size: 1rem; font-style: italic; line-height: 1.75; }
.retro-disco-notes__from { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-family: var(--rd-display); font-size: 1.15rem; color: var(--rd-hot); }
.retro-disco-notes__from::before { content: ''; width: 1.6rem; height: 2px; background: currentColor; }

/* events: records in their sleeves */
.retro-disco-events__list { display: grid; gap: 2.6rem; }
.retro-disco-sleeve { --rec: 8.4rem; --tone: var(--inv-s3); position: relative; padding-top: calc(var(--rec) * .7); }
.retro-disco-sleeve--1 { --tone: var(--inv-s3); }
.retro-disco-sleeve--2 { --tone: var(--inv-s2); }
.retro-disco-sleeve--3 { --tone: var(--inv-s1); }
.retro-disco-sleeve--4 { --tone: var(--inv-s4); }
.retro-disco-sleeve__record {
    --size: var(--rec); --label: var(--tone);
    position: absolute; left: 50%; top: 0; z-index: 0; margin-left: calc(var(--rec) / -2);
    transition: translate 1s cubic-bezier(.2, .7, .2, 1) .2s;
}
.retro-disco-sleeve__body {
    position: relative; z-index: 1; padding: 1.5rem 1.2rem 1.3rem; border-radius: 22px 22px 18px 18px;
    background: var(--inv-paper); box-shadow: var(--rd-shadow);
}
.retro-disco-sleeve__body::before {
    content: ''; position: absolute; left: 1.2rem; right: 1.2rem; top: 0; height: 9px; border-radius: 0 0 6px 6px;
    background: linear-gradient(var(--tone) 0 33%, transparent 0 50%, color-mix(in srgb, var(--tone) 55%, transparent) 0 83%, transparent 0);
}
.retro-disco-sleeve__side { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--rd-hot); }
.retro-disco-sleeve__photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: .8rem 0 .2rem; border-radius: 14px; }
.retro-disco-sleeve__name { margin: .35rem 0 1rem; font-family: var(--rd-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.retro-disco-sleeve__rows { display: grid; gap: .75rem; margin: 0 0 1.1rem; padding: 0; list-style: none; text-align: left; }
.retro-disco-sleeve__rows li { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; line-height: 1.5; }
.retro-disco-sleeve__rows li > span:last-child { padding-top: .4rem; }
.retro-disco-sleeve__icon {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%;
    color: var(--inv-text); background: color-mix(in srgb, var(--tone) 24%, var(--inv-paper)); box-shadow: inset 0 0 0 1.5px var(--tone);
}
.retro-disco-sleeve__venue { display: block; font-weight: 700; }
.retro-disco-sleeve__address { display: block; font-size: .88rem; color: var(--rd-muted); }
.retro-disco-sleeve .inv-maps .inv-button { width: 100%; min-height: 2.9rem; }
.retro-disco-sleeve .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: the hi-fi receiver */
.retro-disco-hifi {
    --metal: #d4d6dc;
    width: min(100%, 23rem); margin: 0 auto; padding: .9rem 1.5rem 1.05rem; border-radius: 14px; color: #2c2b33;
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 1px, transparent 1px 3px),
        linear-gradient(#e7e8ec, #c3c6ce);
    box-shadow:
        inset 12px 0 0 var(--inv-deep), inset -12px 0 0 var(--inv-deep),
        inset 13.5px 0 0 color-mix(in srgb, var(--inv-glow) 18%, var(--inv-deep)), inset -13.5px 0 0 color-mix(in srgb, var(--inv-glow) 18%, var(--inv-deep)),
        var(--rd-shadow);
}
.retro-disco-hifi__top { display: flex; align-items: center; justify-content: space-between; padding: 0 .3rem .6rem; }
.retro-disco-hifi__brand { font-family: var(--rd-display); font-size: .95rem; letter-spacing: .02em; color: #3a3540; }
.retro-disco-hifi__lamp { width: .6rem; height: .6rem; border-radius: 50%; background: var(--inv-primary); box-shadow: 0 0 8px var(--inv-primary); }
.retro-disco-hifi__dial {
    position: relative; height: 2.5rem; border-radius: 6px; overflow: hidden;
    background:
        repeating-linear-gradient(90deg, rgb(255 179 71 / .45) 0 1px, transparent 1px 8px) 0 100% / 100% 30% no-repeat,
        linear-gradient(#1d1a1e, #121014);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .6);
}
.retro-disco-hifi__scale { position: absolute; left: .4rem; right: .4rem; top: .25rem; display: flex; justify-content: space-between; font-size: .62rem; font-weight: 700; color: #ffb347; letter-spacing: .04em; }
.retro-disco-hifi__scale i { font-style: normal; }
.retro-disco-hifi__needle { position: absolute; left: 58%; top: 0; bottom: 0; width: 2px; background: var(--inv-primary); box-shadow: 0 0 6px var(--inv-primary); }
.retro-disco-hifi__display { margin-top: .75rem; }
/* the LED window: amber digits with faint "8" segments behind them */
.retro-disco-led .inv-countdown {
    gap: 0; padding: .85rem .3rem .7rem; border-radius: 10px;
    background: radial-gradient(120% 140% at 50% 0, #2a1a10, #0f0a08 70%);
    box-shadow: inset 0 3px 10px rgb(0 0 0 / .8), 0 0 0 2px #8b8e97;
}
.retro-disco-led .inv-countdown__item { position: relative; flex: 1 1 0; min-width: 0; padding: 0; background: none; border-radius: 0; }
.retro-disco-led .inv-countdown__item + .inv-countdown__item::before {
    content: ''; position: absolute; left: 0; top: 18%; height: 42%; width: 1px; background: rgb(255 179 71 / .2);
}
.retro-disco-led .inv-countdown__value {
    position: relative; display: block; font-family: var(--rd-sans); font-size: 2.15rem; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; letter-spacing: .04em; color: #ffb347; transform: skewX(-7deg);
    text-shadow: 0 0 6px rgb(255 150 50 / .75), 0 0 16px rgb(255 120 40 / .35);
}
.retro-disco-led .inv-countdown__value::before {
    content: attr(data-ghost); position: absolute; inset: 0; z-index: -1; color: rgb(255 179 71 / .08); text-shadow: none;
}
.retro-disco-led .inv-countdown__label { margin-top: .3rem; font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 179 71 / .72); opacity: 1; }
.retro-disco-led .inv-countdown__done { margin: 0; padding: 1rem; border-radius: 10px; background: #120c09; color: #ffb347; font-weight: 600; }
/* "Simpan ke kalender" as the receiver's push buttons */
.retro-disco-led .inv-countdown__actions { gap: .5rem; margin-top: .85rem; }
.retro-disco-led .inv-countdown__actions .inv-button {
    flex: 1 1 9rem; min-height: 2.75rem; padding: .5rem .7rem; border-radius: 7px;
    font-size: .78rem; font-weight: 700; line-height: 1.25; color: #2c2b33;
    background: linear-gradient(#fbfbfc, #d2d4da); box-shadow: 0 3px 0 #8d9099, inset 0 0 0 1px #a7aab3;
}
.retro-disco-led .inv-countdown__actions .inv-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #8d9099, inset 0 0 0 1px #a7aab3; }
.retro-disco-hifi__knobs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; padding: 0 .2rem; }
.retro-disco-hifi__knob {
    position: relative; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: conic-gradient(#f6f6f8, #9b9ea8, #f0f1f4, #8d909a, #f6f6f8);
    box-shadow: 0 3px 6px rgb(0 0 0 / .35), inset 0 0 0 4px rgb(255 255 255 / .35);
}
.retro-disco-hifi__knob::after { content: ''; position: absolute; left: 50%; top: 4px; width: 2px; height: 30%; margin-left: -1px; background: #3a3540; border-radius: 2px; }
.retro-disco-hifi__knob:last-child { rotate: 120deg; }
.retro-disco-hifi__bars { display: flex; align-items: flex-end; gap: 4px; height: 1.6rem; }
.retro-disco-hifi__bars i { width: 6px; height: 100%; border-radius: 2px; transform-origin: bottom; background: var(--inv-s3); }
.retro-disco-hifi__bars i:nth-child(4n + 1) { background: var(--inv-s1); scale: 1 .55; }
.retro-disco-hifi__bars i:nth-child(4n + 2) { background: var(--inv-s2); scale: 1 .8; }
.retro-disco-hifi__bars i:nth-child(4n + 3) { background: var(--inv-s3); scale: 1 .4; }
.retro-disco-hifi__bars i:nth-child(4n) { background: var(--inv-s4); scale: 1 .7; }
.retro-disco-countdown .inv-cal {
    --inv-cal-bg: var(--inv-paper); --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--rd-hot);
    margin-top: 2.2rem; border-radius: 16px; box-shadow: var(--rd-shadow);
}

/* party: the gig poster */
.retro-disco-poster {
    position: relative; isolation: isolate; overflow: hidden; padding: 1.9rem 1.15rem 1.35rem; border-radius: 26px;
    background: var(--inv-deep); color: var(--inv-glow); box-shadow: var(--rd-shadow);
}
.retro-disco-poster__burst {
    position: absolute; left: 50%; top: 3.6rem; z-index: -1; width: 46rem; aspect-ratio: 1; translate: -50% -50%;
    background: repeating-conic-gradient(color-mix(in srgb, var(--inv-s2) 20%, transparent) 0 7.5deg, transparent 7.5deg 15deg);
    -webkit-mask: radial-gradient(circle, #000 8%, transparent 42%); mask: radial-gradient(circle, #000 8%, transparent 42%);
}
.retro-disco-poster__label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-s1); }
.retro-disco-poster__theme-name {
    margin: .25rem 0 0; font-family: var(--rd-display); font-size: 2rem; line-height: 1.15; overflow-wrap: anywhere;
    text-shadow: 2px 2px 0 var(--inv-s3), 4px 4px 0 var(--inv-s4);
}
.retro-disco-poster__dress { margin-top: 1.4rem; padding: 1rem .9rem .9rem; border-radius: 18px; background: color-mix(in srgb, var(--inv-glow) 8%, var(--inv-deep)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-glow) 14%, transparent); }
.retro-disco-poster__dress-head { display: flex; align-items: center; justify-content: center; gap: .85rem; text-align: left; }
.retro-disco-poster__shirt {
    display: grid; place-items: center; width: 3.4rem; height: 3.4rem; flex: none; border-radius: 50%;
    background: color-mix(in srgb, var(--inv-glow) 92%, var(--inv-deep));
}
.retro-disco-poster__shirt .retro-disco-icon { width: 2rem; height: 2rem; fill: var(--retro-disco-pick, var(--inv-s2)); stroke: #2c2b33; stroke-width: 1.3; transition: fill .35s ease; }
.retro-disco-poster__dress-name { margin: .1rem 0 0; font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.retro-disco-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1rem; }
/* each color as a little colored vinyl record */
.retro-disco-swatch {
    width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background:
        radial-gradient(circle, #1d1714 0 5%, color-mix(in srgb, var(--retro-disco-swatch) 75%, #fff) 6% 26%, transparent 27%),
        repeating-radial-gradient(circle, color-mix(in srgb, var(--retro-disco-swatch) 88%, #000) 0 1.5px, var(--retro-disco-swatch) 1.5px 3px);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-glow) 30%, transparent), 0 6px 12px -6px rgb(0 0 0 / .7);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.retro-disco-swatch[aria-pressed="true"] { transform: scale(1.14) rotate(200deg); box-shadow: 0 0 0 3px var(--inv-s1), 0 0 18px color-mix(in srgb, var(--inv-s1) 55%, transparent); }
.retro-disco-swatch:focus-visible { outline: 2px solid var(--inv-glow); outline-offset: 4px; }
.retro-disco-poster__hint { margin: .75rem 0 0; font-size: .8rem; color: color-mix(in srgb, var(--inv-glow) 78%, var(--inv-deep)); }
.retro-disco-party__note {
    display: flex; gap: .6rem; align-items: flex-start; max-width: 22rem !important; margin: 1.3rem auto 0 !important; padding: .9rem 1rem;
    border-radius: 16px; background: var(--inv-paper); text-align: left; font-size: .93rem; box-shadow: inset 0 0 0 1.5px var(--rd-line);
}
.retro-disco-party__note .retro-disco-icon { margin-top: .15rem; color: var(--rd-hot); }
.retro-disco-party__hashtag {
    display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; margin-top: 1.2rem; padding: .3rem .3rem .3rem 1.1rem;
    border-radius: 999px; background: var(--inv-paper); box-shadow: inset 0 0 0 1.5px var(--rd-line);
}
.retro-disco-party__hashtag-text { font-weight: 700; color: var(--rd-hot); overflow-wrap: anywhere; }
.retro-disco-party__copy {
    min-height: 2.75rem; padding: 0 1.05rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 700 .82rem var(--rd-sans); background: var(--inv-btn); color: var(--inv-btnink);
}
.retro-disco-party__copy:focus-visible { outline: 2px solid var(--rd-hot); outline-offset: 2px; }
.retro-disco-party__hint { margin-top: .55rem !important; font-size: .8rem; color: var(--rd-muted); }

/* rundown: the tracklist with Side A and Side B */
.retro-disco-tracklist {
    position: relative; display: grid; gap: 1.25rem; max-width: 24rem; margin: 0 auto; padding: 1.4rem 1.15rem 1.3rem; text-align: left;
    border-radius: 10px; background: var(--inv-paper); box-shadow: var(--rd-shadow);
}
.retro-disco-tracklist::before {
    content: 'Stereo'; position: absolute; right: 1rem; top: 1.05rem; padding: .1rem .45rem; border-radius: 4px;
    font-size: .58rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--rd-muted); box-shadow: inset 0 0 0 1px var(--rd-line);
}
.retro-disco-tracklist__side + .retro-disco-tracklist__side { padding-top: 1.15rem; border-top: 1.5px dashed var(--rd-line); }
.retro-disco-tracklist__head { display: flex; align-items: center; gap: .55rem; margin: 0; font-family: var(--rd-display); font-size: 1.3rem; line-height: 1.2; color: var(--rd-hot); }
.retro-disco-tracklist__side:nth-child(2) .retro-disco-record { --label: var(--inv-s2); }
.retro-disco-tracklist__list { display: grid; gap: .8rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.retro-disco-track { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.retro-disco-track__no {
    display: grid; place-items: center; height: 1.6rem; margin-top: .05rem; border-radius: 6px;
    font-size: .74rem; font-weight: 700; color: var(--rd-ink-on-stripe); background: var(--inv-s1);
}
.retro-disco-tracklist__side:nth-child(2) .retro-disco-track__no { background: var(--inv-s2); }
.retro-disco-track__line { display: flex; align-items: baseline; gap: .45rem; margin: 0; }
.retro-disco-track__title { font-weight: 700; line-height: 1.35; }
.retro-disco-track__dots { flex: 1 1 1rem; min-width: 1rem; border-bottom: 2px dotted color-mix(in srgb, var(--inv-text) 30%, transparent); translate: 0 -.25rem; transform-origin: left; }
.retro-disco-track__time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rd-hot); }
.retro-disco-track__desc { margin: .1rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--rd-muted); }

/* story: a stack of singles joined by a groove line */
.retro-disco-singles { position: relative; display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.retro-disco-singles::before {
    content: ''; position: absolute; left: calc(2.4rem - 1.5px); top: 2.6rem; bottom: 2.6rem; width: 3px; transform-origin: top;
    background: repeating-linear-gradient(var(--inv-s2) 0 8px, transparent 8px 14px);
}
.retro-disco-single { position: relative; display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); gap: .85rem; align-items: start; }
.retro-disco-single--1 { --tone: var(--inv-s1); }
.retro-disco-single--2 { --tone: var(--inv-s2); }
.retro-disco-single--3 { --tone: var(--inv-s3); }
.retro-disco-single--4 { --tone: var(--inv-s4); }
.retro-disco-single__record { --size: 4.8rem; --label: var(--tone); transition: rotate 1s cubic-bezier(.2, .7, .2, 1), translate 1s cubic-bezier(.2, .7, .2, 1); }
.retro-disco-single:nth-child(2) .retro-disco-single__record { transition-delay: .15s; }
.retro-disco-single:nth-child(3) .retro-disco-single__record { transition-delay: .3s; }
.retro-disco-single:nth-child(n + 4) .retro-disco-single__record { transition-delay: .45s; }
.retro-disco-single__card { padding: .95rem 1.05rem 1rem; border-radius: 16px; background: var(--inv-paper); box-shadow: var(--rd-shadow-sm), inset 3px 0 0 var(--tone); }
.retro-disco-single__year { margin: 0; font-family: var(--rd-display); font-size: 1.3rem; line-height: 1.1; color: var(--rd-hot); }
.retro-disco-single__card h3 { margin: .2rem 0 .3rem; font-size: 1.02rem; line-height: 1.35; }
.retro-disco-single__card p:not(.retro-disco-single__year) { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--rd-muted); }
.retro-disco-single__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: .75rem; border-radius: 12px; }

/* gallery: photos in 70s shapes (arches on a diagonal) with a thin stripe ring */
.retro-disco-gallery .inv-gallery { gap: .9rem; padding: 5px; }
.retro-disco-gallery .inv-gallery__item { --tone: var(--inv-s2); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 3px var(--inv-paper), 0 0 0 5px var(--tone); }
.retro-disco-gallery .inv-gallery__item:nth-child(4n + 1), .retro-disco-gallery .inv-gallery__item:nth-child(4n) { border-radius: 999px 999px 16px 16px; }
.retro-disco-gallery .inv-gallery__item:nth-child(4n + 1) { --tone: var(--inv-s3); }
.retro-disco-gallery .inv-gallery__item:nth-child(4n + 2) { --tone: var(--inv-s1); }
.retro-disco-gallery .inv-gallery__item:nth-child(4n) { --tone: var(--inv-s4); }

/* live streaming: a 70s television */
.retro-disco-tv { position: relative; width: min(100%, 19rem); margin: 0 auto; padding-top: 2.4rem; }
.retro-disco-tv__antenna { position: absolute; left: 50%; top: 0; width: 6rem; height: 2.6rem; translate: -50% 0; }
.retro-disco-tv__antenna::before, .retro-disco-tv__antenna::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 3px; height: 2.8rem; border-radius: 3px; background: var(--rd-muted); transform-origin: bottom;
}
.retro-disco-tv__antenna::before { rotate: -32deg; }
.retro-disco-tv__antenna::after { rotate: 30deg; }
.retro-disco-tv__set {
    display: grid; grid-template-columns: minmax(0, 1fr) 1.6rem; gap: .8rem; align-items: center; padding: 1rem;
    border-radius: 34px; background: var(--inv-deep); box-shadow: var(--rd-shadow), inset 0 -6px 0 color-mix(in srgb, #000 25%, var(--inv-deep));
}
.retro-disco-tv__screen {
    position: relative; overflow: hidden; padding: 1.3rem .9rem 1.1rem; border-radius: 30px / 24px; color: var(--inv-glow);
    background:
        repeating-linear-gradient(rgb(255 255 255 / .045) 0 2px, transparent 2px 4px),
        radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--inv-glow) 20%, var(--inv-deep)), color-mix(in srgb, var(--inv-glow) 5%, var(--inv-deep)) 75%);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, #000 30%, var(--inv-deep));
}
.retro-disco-tv__screen p { margin: .6rem 0 0; font-size: .9rem; line-height: 1.45; }
.retro-disco-tv__play { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--inv-s1); color: var(--rd-ink-on-stripe); }
.retro-disco-tv__play .retro-disco-icon { width: 1.8rem; height: 1.8rem; }
.retro-disco-tv__knobs { display: grid; gap: .7rem; }
.retro-disco-tv__knobs i { display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6 0 20%, transparent 21%), var(--inv-s1); }
.retro-disco-tv__knobs i + i { background: radial-gradient(circle at 35% 35%, #fff6 0 20%, transparent 21%), var(--inv-s3); }
.retro-disco-stream__note { margin: 1.1rem auto 0 !important; font-size: .9rem; color: var(--rd-muted); }
.retro-disco-stream__button.inv-button { margin-top: 1rem; min-height: 2.9rem; font-weight: 700; background: var(--inv-btn); color: var(--inv-btnink); }

/* gift: cassette tapes, two per row, and an airmail address card */
.retro-disco-gift__intro { color: var(--rd-muted); margin-bottom: 1.4rem !important; }
.retro-disco-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.4rem), 1fr)); gap: .8rem; }
.retro-disco-gift .inv-gift__accounts .inv-gift__account {
    --tone: var(--inv-s2);
    position: relative; margin: 0; padding: 3.2rem .75rem .85rem; border-radius: 12px; text-align: center;
    background: var(--inv-deep); color: var(--inv-glow);
    box-shadow: var(--rd-shadow-sm), inset 0 7px 0 var(--tone);
}
.retro-disco-gift .inv-gift__accounts .inv-gift__account:nth-child(3n + 2) { --tone: var(--inv-s3); }
.retro-disco-gift .inv-gift__accounts .inv-gift__account:nth-child(3n) { --tone: var(--inv-s1); }
/* the window with the two reels */
.retro-disco-gift .inv-gift__accounts .inv-gift__account::before {
    content: ''; position: absolute; left: 50%; top: 1rem; width: 72%; height: 1.75rem; translate: -50% 0; border-radius: 999px;
    background:
        radial-gradient(circle at 22% 50%, var(--inv-deep) 0 .22rem, var(--inv-glow) .24rem .5rem, transparent .53rem),
        radial-gradient(circle at 78% 50%, var(--inv-deep) 0 .22rem, var(--inv-glow) .24rem .5rem, transparent .53rem),
        linear-gradient(90deg, transparent 32%, color-mix(in srgb, var(--tone) 70%, transparent) 32% 68%, transparent 68%) 50% 50% / 100% 30% no-repeat,
        color-mix(in srgb, var(--inv-glow) 16%, var(--inv-deep));
}
.retro-disco-gift .inv-gift__bank { margin: 0 0 .35rem; font-weight: 700; font-size: .9rem; }
.retro-disco-gift .inv-gift__number { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.retro-disco-gift .inv-gift__holder { margin: .15rem 0 .7rem; font-size: .8rem; color: color-mix(in srgb, var(--inv-glow) 80%, var(--inv-deep)); overflow-wrap: anywhere; }
.retro-disco-gift .inv-gift__accounts .inv-button--outline {
    width: 100%; min-height: 2.75rem; padding: .45rem .5rem; font-size: .8rem; font-weight: 700;
    color: var(--inv-glow); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-glow) 45%, transparent);
}
.retro-disco-gift .inv-gift__address {
    margin-top: .95rem; padding: 1.1rem 1rem 1rem; border-radius: 14px; text-align: center; color: var(--inv-text);
    border: 7px solid transparent;
    background:
        linear-gradient(var(--inv-paper), var(--inv-paper)) padding-box,
        repeating-linear-gradient(-45deg, var(--inv-s3) 0 10px, var(--inv-paper) 10px 15px, var(--inv-s2) 15px 25px, var(--inv-paper) 25px 30px) border-box;
}
.retro-disco-gift .inv-gift__address .inv-gift__bank { font-family: var(--rd-display); font-weight: 400; font-size: 1.2rem; color: var(--rd-hot); }
.retro-disco-gift .inv-gift__address .inv-gift__holder { color: var(--inv-text); font-weight: 700; font-size: .92rem; margin-bottom: .2rem; }
.retro-disco-gift .inv-gift__address p { margin: .2rem 0; font-size: .92rem; }
.retro-disco-gift .inv-gift__address .inv-button--outline { min-height: 2.75rem; margin-top: .6rem; padding: .5rem 1.3rem; font-weight: 700; color: var(--inv-text); box-shadow: inset 0 0 0 1.5px var(--rd-line); }

/* wishlist: singles in paper sleeves that slide out */
.retro-disco-wishlist__intro { color: var(--rd-muted); font-size: .9rem; }
.retro-disco-wishlist__list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.retro-disco-wishlist__item { --tone: var(--inv-s3); border-radius: 16px; background: var(--inv-paper); box-shadow: var(--rd-shadow-sm); overflow: hidden; }
.retro-disco-wishlist__item--2 { --tone: var(--inv-s2); }
.retro-disco-wishlist__item--3 { --tone: var(--inv-s1); }
.retro-disco-wishlist__item--4 { --tone: var(--inv-s4); }
.retro-disco-wishlist__head {
    display: grid; grid-template-columns: 5rem minmax(0, 1fr) 2rem; align-items: center; gap: .7rem; width: 100%; min-height: 4.8rem;
    padding: .75rem .9rem; border: 0; background: none; color: var(--inv-text); font: inherit; text-align: left; cursor: pointer;
}
.retro-disco-wishlist__head:focus-visible { outline: 2px solid var(--rd-hot); outline-offset: -4px; border-radius: 16px; }
.retro-disco-wishlist__single { position: relative; width: 5rem; height: 3.4rem; }
.retro-disco-wishlist__sleeve {
    position: absolute; left: 0; top: 0; z-index: 1; width: 3.4rem; height: 3.4rem; border-radius: 5px;
    background: radial-gradient(circle, color-mix(in srgb, var(--tone) 55%, #000) 0 17%, transparent 18%), var(--tone);
    box-shadow: 3px 0 6px -3px rgb(0 0 0 / .45);
}
.retro-disco-wishlist__record { --size: 3.1rem; --label: var(--tone); position: absolute; left: .15rem; top: .15rem; transition: translate .5s cubic-bezier(.2, .7, .2, 1), rotate .5s ease; }
.retro-disco-wishlist__item.is-open .retro-disco-wishlist__record { translate: 1.6rem 0; rotate: 120deg; }
.retro-disco-wishlist__label { display: grid; }
.retro-disco-wishlist__number { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rd-hot); }
.retro-disco-wishlist__name { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.retro-disco-wishlist__toggle { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rd-line); transition: rotate .3s ease; }
.retro-disco-wishlist__item.is-open .retro-disco-wishlist__toggle { rotate: 180deg; }
.retro-disco-wishlist__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s ease; }
.retro-disco-wishlist__item.is-closed .retro-disco-wishlist__body { grid-template-rows: 0fr; }
.retro-disco-wishlist__inner { min-height: 0; overflow: hidden; padding: 0 1rem; }
.retro-disco-wishlist__item.is-open .retro-disco-wishlist__inner, .retro-disco-wishlist__item:not(.is-closed) .retro-disco-wishlist__inner { padding-bottom: 1rem; }
.retro-disco-wishlist__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.retro-disco-wishlist__note { margin: .6rem 0 0; font-size: .92rem; color: var(--rd-muted); }
.retro-disco-wishlist__shop.inv-button { margin-top: .75rem; min-height: 2.75rem; font-size: .88rem; font-weight: 700; background: var(--inv-btn); color: var(--inv-btnink); }

/* co-hosts: the "featuring" line-up */
.retro-disco-lineup { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.retro-disco-lineup__name { max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }
.retro-disco-lineup__name:nth-child(odd) { font-family: var(--rd-display); font-size: 1.32rem; }
.retro-disco-lineup__name:nth-child(even) { font-size: .86rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rd-hot); }
.retro-disco-lineup__name + .retro-disco-lineup__name::before {
    content: ''; display: block; width: .8rem; height: .8rem; margin: .35rem auto .45rem; background: var(--inv-s2);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* contacts: hotline cards with a rotary dial */
.retro-disco-contacts__list { display: grid; gap: .9rem; }
.retro-disco-hotline {
    display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); align-items: center; gap: .9rem; padding: 1rem;
    border-radius: 20px; background: var(--inv-paper); box-shadow: var(--rd-shadow-sm); text-align: left;
}
.retro-disco-hotline__dial {
    position: relative; display: grid; place-items: center; width: 3.9rem; height: 3.9rem; border-radius: 50%;
    background: var(--inv-s2); color: var(--rd-ink-on-stripe);
}
.retro-disco-hotline__dial::before {
    content: ''; position: absolute; inset: 4px; border-radius: 50%;
    background: repeating-conic-gradient(from 8deg, color-mix(in srgb, #fff 60%, transparent) 0 18deg, transparent 18deg 32deg);
    -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 53% 92%, transparent 93%); mask: radial-gradient(circle, transparent 0 52%, #000 53% 92%, transparent 93%);
}
.retro-disco-hotline__dial span { position: relative; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--inv-paper); color: var(--inv-text); font-family: var(--rd-display); font-size: 1rem; }
.retro-disco-hotline__name { margin: 0; font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.retro-disco-hotline__role { margin: .1rem 0 0; font-size: .85rem; color: var(--rd-muted); }
.retro-disco-hotline__button.inv-button { grid-column: 1 / -1; min-height: 2.9rem; font-weight: 700; background: var(--inv-btn); color: var(--inv-btnink); }
.retro-disco-hotline__phone { grid-column: 1 / -1; margin: 0; font-weight: 700; text-align: center; }

/* health protocol: round stickers */
.retro-disco-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.retro-disco-protocol__list li {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .45rem 1rem; border-radius: 999px;
    background: var(--inv-paper); box-shadow: inset 0 0 0 2px var(--inv-s2); font-size: .9rem; font-weight: 600;
}
.retro-disco-protocol__list li:nth-child(even) { box-shadow: inset 0 0 0 2px var(--inv-s3); }
.retro-disco-protocol__list .retro-disco-icon { color: var(--rd-hot); }
.retro-disco-protocol__note { margin-top: 1rem !important; color: var(--rd-muted); }

/* vendors: album credits */
.retro-disco-vendors__list { max-width: 24rem; margin: 0 auto; padding: .4rem 1.1rem; list-style: none; text-align: left; border-radius: 10px; background: var(--inv-paper); box-shadow: var(--rd-shadow-sm); }
.retro-disco-vendor { display: flex; align-items: baseline; gap: .5rem; padding: .75rem 0; }
.retro-disco-vendor + .retro-disco-vendor { border-top: 1.5px dashed var(--rd-line); }
.retro-disco-vendor__role { flex: 0 1 auto; max-width: 45%; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-muted); }
.retro-disco-vendor__dots { flex: 1 1 .8rem; min-width: .8rem; border-bottom: 2px dotted color-mix(in srgb, var(--inv-text) 25%, transparent); }
.retro-disco-vendor__who { display: grid; justify-items: end; text-align: right; max-width: 55%; }
.retro-disco-vendor__name { font-weight: 700; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.retro-disco-vendor__link { display: inline-flex; align-items: center; min-height: 1.9rem; font-size: .82rem; font-weight: 600; color: var(--rd-hot); overflow-wrap: anywhere; }

/* closing: the closing photo full-bleed, fading into the night; the ball at the top right; the thanks below */
.retro-disco-main > .retro-disco-closing { padding: 0 1.25rem 1.1rem; overflow: hidden; background: var(--rd-night); }
.retro-disco-closing__photo { position: absolute; left: 0; right: 0; top: 0; z-index: -2; height: 33rem; }
.retro-disco-closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.retro-disco-closing__shade {
    position: absolute; inset: 0;
    background:
        linear-gradient(color-mix(in srgb, var(--rd-night) 35%, transparent), transparent 22%, color-mix(in srgb, var(--rd-night) 40%, transparent) 46%, color-mix(in srgb, var(--rd-night) 88%, transparent) 68%, var(--rd-night) 92%),
        radial-gradient(90% 45% at 50% 82%, color-mix(in srgb, var(--inv-s3) 34%, transparent), transparent 72%);
}
/* without a photo: a sunset rising behind a sunburst */
.retro-disco-closing__photo--empty {
    background:
        repeating-conic-gradient(from 0deg at 50% 62%, color-mix(in srgb, var(--inv-s1) 14%, transparent) 0 5deg, transparent 5deg 10deg),
        radial-gradient(80% 60% at 50% 62%, color-mix(in srgb, var(--inv-s3) 34%, var(--rd-night)), var(--rd-night) 75%);
}
.retro-disco-closing__rings {
    position: absolute; left: 50%; top: 62%; width: 11rem; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--inv-s1) 70%, #fff), var(--inv-s1) 60%);
    box-shadow: 0 0 0 12px var(--inv-s2), 0 0 0 24px var(--inv-s3), 0 0 0 36px var(--inv-s4), 0 0 80px 40px color-mix(in srgb, var(--inv-s3) 35%, transparent);
    clip-path: inset(-140px -140px 50% -140px);
}
.retro-disco-ball--closing { --ball: 5.4rem; position: absolute; right: 1.5rem; top: 2.6rem; z-index: 1; }
.retro-disco-ball--closing .retro-disco-ball__string { height: 2.8rem; }
.retro-disco-closing__body { position: relative; padding-top: 20.5rem; }
.retro-disco-closing__label {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .2rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-s1);
}
.retro-disco-closing__label::before, .retro-disco-closing__label::after { content: ''; width: 1.3rem; height: 2px; border-radius: 2px; background: var(--rd-sunset); flex: none; }
.retro-disco-closing__title { margin: 0; font-family: var(--rd-display); font-weight: 400; font-size: 2.6rem; line-height: 1.15; }
.retro-disco-closing__message { max-width: 31ch; margin: 1rem auto 0; font-size: 1rem; line-height: 1.75; color: var(--inv-glow); }
.retro-disco-closing__signature { margin: 1.5rem 0 0; font-family: var(--rd-serif); font-style: italic; font-size: 1.02rem; color: color-mix(in srgb, var(--inv-glow) 85%, var(--rd-night)); }
.retro-disco-closing__name {
    margin: .15rem 0 0; font-family: var(--rd-display); font-size: 2.3rem; line-height: 1.15; overflow-wrap: anywhere; color: var(--inv-glow);
    text-shadow: 2px 2px 0 var(--inv-s3), 4px 4px 0 var(--inv-s4);
}
.retro-disco-bands--closing { margin-top: 1.3rem; }

/* ---------- 5. forms (shared RSVP + wishes, restyled) ---------- */
.retro-disco-main .inv-form { --field-bg: var(--rd-field); --field-text: var(--inv-text); --field-ring: color-mix(in srgb, var(--inv-text) 22%, transparent); --field-label: var(--rd-muted); gap: 1rem; }
.retro-disco-main .inv-form label, .retro-disco-main .inv-form__choices legend {
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--field-label);
}
.retro-disco-main .inv-form input:not([type=radio]):not([type=checkbox]),
.retro-disco-main .inv-form select,
.retro-disco-main .inv-form textarea {
    width: 100%; min-height: 2.95rem; margin-top: .3rem; padding: .7rem .95rem; border: 0; border-radius: 12px;
    font: 500 .98rem/1.4 var(--rd-sans); letter-spacing: 0; text-transform: none; color: var(--field-text); background: var(--field-bg);
    box-shadow: inset 0 0 0 1.5px var(--field-ring); transition: box-shadow .2s ease;
}
.retro-disco-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.retro-disco-main .inv-form select option { color: #222; background: #fff; }
.retro-disco-main .inv-form input:not([type=radio]):focus-visible,
.retro-disco-main .inv-form select:focus-visible,
.retro-disco-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--rd-hot), 0 0 0 4px color-mix(in srgb, var(--inv-s1) 45%, transparent);
}
.retro-disco-main .inv-form button[type=submit] {
    width: 100%; min-height: 3.1rem; font-weight: 700; font-size: 1rem; background: var(--inv-btn); color: var(--inv-btnink);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-btn) 60%, #000);
}
.retro-disco-main .inv-form .inv-button--outline { width: 100%; min-height: 2.9rem; font-weight: 700; color: var(--inv-text); box-shadow: inset 0 0 0 1.5px var(--field-ring); }
.retro-disco-main .inv-form__notice { text-align: center; color: var(--inv-text); background: color-mix(in srgb, var(--inv-s1) 24%, var(--inv-paper)); }
.retro-disco-main .inv-form__error { color: #8f1d14; background: #fde5e2; }
.retro-disco-main .inv-rsvp__deadline { margin: 0 0 .8rem; font-size: .84rem; text-align: center; color: var(--rd-muted); }

/* RSVP: the dance-floor pass */
.retro-disco-pass { position: relative; max-width: 23rem; margin: 2.6rem auto 0; border-radius: 22px; background: var(--inv-paper); box-shadow: var(--rd-shadow); text-align: left; }
/* the lanyard strap and the punched slot */
.retro-disco-pass__slot { position: absolute; left: 50%; top: .85rem; z-index: 2; width: 3.4rem; height: .7rem; translate: -50% 0; border-radius: 999px; background: color-mix(in srgb, var(--inv-background) 70%, #000 0%); box-shadow: inset 0 2px 3px rgb(0 0 0 / .45); }
.retro-disco-pass__slot::before {
    content: ''; position: absolute; left: 50%; bottom: .35rem; width: 1.5rem; height: 3.2rem; translate: -50% 0; border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--inv-s2) 0 33%, var(--inv-s3) 0 66%, var(--inv-s1) 0);
}
.retro-disco-pass__head {
    position: relative; overflow: hidden; padding: 2.1rem 1.2rem 1.4rem; border-radius: 22px 22px 0 0;
    background: var(--inv-deep); color: var(--inv-glow); text-align: center;
}
.retro-disco-pass__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--rd-stripes-y); }
.retro-disco-pass__kind { margin: 0; font-family: var(--rd-display); font-size: 1.55rem; line-height: 1.2; text-shadow: 2px 2px 0 var(--inv-s3); }
.retro-disco-pass__guest { margin: .45rem 0 .2rem; }
.retro-disco-pass__guest span:first-child { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-s1); }
.retro-disco-pass__guest-name { display: block; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.retro-disco-pass__body { padding: 1.3rem 1.15rem 1.1rem; }
.retro-disco-pass__intro { margin: 0 0 1.1rem; text-align: center; color: var(--rd-muted); font-size: .95rem; }
.retro-disco-pass__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.2rem 1rem; border-top: 2px dashed var(--rd-line); }
.retro-disco-pass__foot::before, .retro-disco-pass__foot::after { content: ''; position: absolute; top: -.7rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--inv-background); }
.retro-disco-pass__foot::before { left: -.65rem; }
.retro-disco-pass__foot::after { right: -.65rem; }
.retro-disco-pass__barcode { width: 8rem; height: 1.6rem; background: repeating-linear-gradient(90deg, var(--inv-text) 0 2px, transparent 2px 4px, var(--inv-text) 4px 5px, transparent 5px 8px, var(--inv-text) 8px 11px, transparent 11px 13px); opacity: .7; }
.retro-disco-pass__admit { font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--rd-hot); }

/* the three answers as light-up dance-floor tiles (the radio is hidden but still focusable) */
.retro-disco-pass .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.retro-disco-pass .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.retro-disco-pass .inv-form__choices label {
    --tile: var(--inv-s1);
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4rem;
    min-height: 5.6rem; padding: .75rem .3rem .7rem; border-radius: 10px; cursor: pointer; text-align: center; overflow: hidden;
    font-size: .84rem; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.2; color: var(--inv-text);
    background:
        linear-gradient(90deg, transparent calc(50% - .75px), var(--rd-line) calc(50% - .75px) calc(50% + .75px), transparent 0),
        linear-gradient(transparent calc(50% - .75px), var(--rd-line) calc(50% - .75px) calc(50% + .75px), transparent 0),
        var(--rd-field);
    box-shadow: inset 0 0 0 1.5px var(--rd-line);
    transition: background-color .25s ease, color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.retro-disco-pass .inv-form__choices label:nth-of-type(2) { --tile: var(--inv-s3); }
.retro-disco-pass .inv-form__choices label:nth-of-type(3) { --tile: var(--inv-s2); }
.retro-disco-pass .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a round lamp (::before) with a check, a cross or a question mark (::after, a mask in the text color) */
.retro-disco-pass .inv-form__choices label::before {
    content: ''; width: 2.2rem; height: 2.2rem; margin-bottom: auto; border-radius: 50%; flex: none;
    background: color-mix(in srgb, var(--tile) 30%, transparent); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.retro-disco-pass .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.25rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; pointer-events: none;
    -webkit-mask: var(--rd-choice-icon) center / contain no-repeat; mask: var(--rd-choice-icon) center / contain no-repeat;
}
.retro-disco-pass .inv-form__choices label:nth-of-type(1) {
    --rd-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.retro-disco-pass .inv-form__choices label:nth-of-type(2) {
    --rd-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.retro-disco-pass .inv-form__choices label:nth-of-type(3) {
    --rd-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8.5 8.8a3.5 3.5 0 1 1 4.9 3.2c-.9.4-1.4 1.1-1.4 2v.5M12 19h.01'/%3E%3C/svg%3E");
}
/* lit: the tile glows in its color */
.retro-disco-pass .inv-form__choices label:has(input:checked) {
    color: var(--rd-ink-on-stripe); transform: translateY(-3px);
    background:
        linear-gradient(90deg, transparent calc(50% - .75px), rgb(255 255 255 / .45) calc(50% - .75px) calc(50% + .75px), transparent 0),
        linear-gradient(transparent calc(50% - .75px), rgb(255 255 255 / .45) calc(50% - .75px) calc(50% + .75px), transparent 0),
        radial-gradient(circle at 50% 45%, color-mix(in srgb, #fff 45%, var(--tile)), var(--tile) 70%);
    box-shadow: 0 0 0 2px var(--tile), 0 10px 26px -6px color-mix(in srgb, var(--tile) 85%, transparent);
}
.retro-disco-pass .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .4); transform: scale(1.12); }
.retro-disco-pass .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--rd-hot); outline-offset: 3px; }

/* after sending: the mirror-ball stamp and glints around the pass */
.retro-disco-pass__sent { margin: 0 0 1rem; text-align: center; }
.retro-disco-pass__stamp {
    display: grid; place-items: center; width: 5.4rem; height: 5.4rem; margin: 0 auto .6rem; border-radius: 50%;
    background: color-mix(in srgb, var(--inv-s1) 22%, var(--inv-paper)); box-shadow: 0 0 0 2px var(--inv-s1), 0 0 0 6px color-mix(in srgb, var(--inv-s1) 25%, transparent);
}
.retro-disco-ball--stamp { --ball: 3.4rem; }
.retro-disco-ball--stamp .retro-disco-ball__string, .retro-disco-ball--stamp .retro-disco-ball__cap { display: none; }
.retro-disco-pass__thanks { margin: 0; font-family: var(--rd-display); font-size: 1.35rem; line-height: 1.25; color: var(--rd-hot); }
.retro-disco-pass__line { margin: .35rem auto 0; max-width: 30ch; font-size: .92rem; color: var(--rd-muted); }
.retro-disco-pass__glints { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.retro-disco-pass__glints i {
    position: absolute; width: 1.1rem; height: 1.1rem; opacity: 0; scale: 0; background: var(--inv-s1);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    transition: opacity .3s ease, scale .5s cubic-bezier(.34, 1.56, .64, 1);
}
.retro-disco-pass__glints i:nth-child(1) { left: -.5rem; top: 18%; }
.retro-disco-pass__glints i:nth-child(2) { right: -.6rem; top: 8%; width: 1.4rem; height: 1.4rem; background: var(--inv-primary); }
.retro-disco-pass__glints i:nth-child(3) { right: -.4rem; top: 55%; width: .8rem; height: .8rem; }
.retro-disco-pass__glints i:nth-child(4) { left: -.7rem; top: 70%; width: 1.3rem; height: 1.3rem; background: var(--inv-s2); }
.retro-disco-pass__glints i:nth-child(5) { left: 30%; top: -.6rem; width: .9rem; height: .9rem; background: var(--inv-primary); }
.retro-disco-pass__glints i:nth-child(6) { right: 22%; bottom: -.5rem; }
.retro-disco-pass.is-stamped .retro-disco-pass__glints i { opacity: 1; scale: 1; }
.retro-disco-pass.is-stamped .retro-disco-pass__glints i:nth-child(2n) { transition-delay: .15s; }
.retro-disco-pass.is-stamped .retro-disco-pass__glints i:nth-child(3n) { transition-delay: .3s; }

/* wishes: the jukebox */
.retro-disco-jukebox { max-width: 23rem; margin: 0 auto; }
.retro-disco-jukebox__crown {
    position: relative; height: 6.2rem; overflow: hidden; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--inv-deep);
}
.retro-disco-jukebox__arc {
    position: absolute; left: 50%; bottom: 0; width: 48%; height: 3.6rem; translate: -50% 0; border-radius: 999px 999px 0 0;
    background: color-mix(in srgb, var(--inv-glow) 12%, var(--inv-deep));
    box-shadow: 0 0 0 7px var(--inv-s1), 0 0 0 14px var(--inv-s2), 0 0 0 21px var(--inv-s3), 0 0 0 28px var(--inv-s4);
}
.retro-disco-jukebox__lights { position: absolute; left: 50%; bottom: .9rem; display: flex; gap: .45rem; translate: -50% 0; }
.retro-disco-jukebox__lights i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--inv-glow); box-shadow: 0 0 8px var(--inv-glow); opacity: .85; }
.retro-disco-jukebox .inv-form {
    --field-bg: color-mix(in srgb, var(--inv-glow) 9%, var(--inv-deep));
    --field-text: var(--inv-glow);
    --field-ring: color-mix(in srgb, var(--inv-glow) 26%, transparent);
    --field-label: color-mix(in srgb, var(--inv-glow) 80%, var(--inv-deep));
    padding: 1.2rem 1.15rem 1.3rem; border-radius: 0 0 22px 22px; background: var(--inv-deep); box-shadow: var(--rd-shadow);
}
.retro-disco-jukebox .inv-form button[type=submit] { background: var(--inv-s1); color: var(--rd-ink-on-stripe); box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-s1) 55%, #000); }
.retro-disco-jukebox .inv-form__notice { color: var(--inv-glow); background: color-mix(in srgb, var(--inv-glow) 14%, var(--inv-deep)); }
.retro-disco-wishes .inv-wishes { --inv-wishes-height: 21rem; }
.retro-disco-wishes .inv-wishes__list { margin-top: 1.2rem; }
.retro-disco-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .2rem .35rem .2rem .1rem; }
/* every wish a dedication slip with a tiny record */
.retro-disco-wishes .inv-wish {
    position: relative; padding: .8rem 1rem .75rem 2.6rem; border-radius: 4px 16px 16px 4px;
    background: var(--inv-paper); box-shadow: var(--rd-shadow-sm), inset 5px 0 0 var(--inv-s3);
}
.retro-disco-wishes .inv-wish:nth-child(4n + 2) { box-shadow: var(--rd-shadow-sm), inset 5px 0 0 var(--inv-s2); }
.retro-disco-wishes .inv-wish:nth-child(4n + 3) { box-shadow: var(--rd-shadow-sm), inset 5px 0 0 var(--inv-s1); }
.retro-disco-wishes .inv-wish:nth-child(4n) { box-shadow: var(--rd-shadow-sm), inset 5px 0 0 var(--inv-s4); }
.retro-disco-wishes .inv-wish::before {
    content: ''; position: absolute; left: .85rem; top: .95rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: radial-gradient(circle, #1d1714 0 10%, var(--inv-s3) 12% 36%, #1d1714 38%);
}
.retro-disco-wishes .inv-wish__name { font-weight: 700; color: var(--rd-hot); }
.retro-disco-wishes .inv-wish__message { font-size: .92rem; line-height: 1.5; }
.retro-disco-wishes .inv-wish__time { font-size: .72rem; color: var(--rd-muted); opacity: 1; }
.retro-disco-wishes .inv-wishes__empty { color: var(--rd-muted); opacity: 1; }
.retro-disco-wishes .inv-wishes__more { min-height: 2.75rem; font-weight: 700; color: var(--inv-text); box-shadow: inset 0 0 0 1.5px var(--rd-line); }

/* ---------- 6. shared components ---------- */
.retro-disco-main .inv-button { font-weight: 700; }
.retro-disco-main .inv-maps .inv-button, .retro-disco-main .inv-gallery + .inv-button { background: var(--inv-btn); color: var(--inv-btnink); }
.retro-disco-body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--rd-night) 93%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-glow) 78%, transparent);
    --inv-nav-active: var(--inv-s1);
    font-family: var(--rd-sans); border-color: color-mix(in srgb, var(--inv-s1) 35%, transparent);
}
.retro-disco-body .inv-music__button { background: var(--rd-night); color: var(--inv-s1); box-shadow: 0 0 0 2px var(--inv-s1), 0 6px 14px rgb(0 0 0 / .3); }
.retro-disco-body .inv-ambient { --inv-ambient-1: var(--inv-s1); --inv-ambient-2: var(--inv-primary); }
.retro-disco-body .inv-checkin { background: var(--inv-paper); color: var(--inv-text); }

/* ---------- 7. screen sizes ---------- */

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 780px) {
    .retro-disco-cover { --arch-h: min(39svh, 100vw); padding-top: 1.2rem; padding-bottom: 2.2rem; }
    .retro-disco-cover__title { margin-top: 1.1rem; }
    .retro-disco-cover__name { font-size: 3rem; }
    .retro-disco-cover__quote { font-size: .92rem; }
    .retro-disco-cover__guest { margin-top: .85rem; }
    .retro-disco-cover__open.inv-button { margin-top: .95rem; }
}
@media (max-height: 680px) {
    .retro-disco-cover { --arch-h: min(34svh, 100vw); padding-top: 1rem; padding-bottom: 2rem; }
    .retro-disco-cover__title { margin-top: .95rem; font-size: .66rem; }
    .retro-disco-cover__name { font-size: 2.6rem; }
    .retro-disco-cover__date { margin-top: .4rem; font-size: .88rem; }
    .retro-disco-cover__quote { margin-top: .3rem; font-size: .86rem; line-height: 1.38; }
    .retro-disco-cover__guest { margin-top: .7rem; padding: .4rem 1rem .45rem; }
    .retro-disco-cover__guest-name { font-size: 1.02rem; }
    .retro-disco-cover__open.inv-button { margin-top: .8rem; min-height: 2.9rem; padding: .6rem 1.4rem; }
}
@media (max-height: 590px) {
    .retro-disco-cover { --arch-h: min(29svh, 100vw); padding-top: .8rem; padding-bottom: 1.6rem; }
    .retro-disco-cover__title { margin-top: .8rem; }
    .retro-disco-cover__name { font-size: 2.3rem; }
    .retro-disco-cover__quote { font-size: .82rem; }
    .retro-disco-cover__guest { margin-top: .55rem; }
    .retro-disco-cover__open.inv-button { margin-top: .7rem; min-height: 2.75rem; }
}

/* narrow phones: the LED digits shrink a little */
@media (max-width: 380px) {
    .retro-disco-led .inv-countdown__value { font-size: 1.85rem; }
    .retro-disco-hifi { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* wide screens: the phone-width column on the night-club backdrop with sunset rings */
@media (min-width: 560px) {
    body.retro-disco-body { background: var(--rd-night); }
    body.retro-disco-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background:
            radial-gradient(circle at 50% 135%, transparent 0 30%, var(--inv-s1) 30% 33%, transparent 33% 35%, var(--inv-s2) 35% 38%, transparent 38% 40%, var(--inv-s3) 40% 43%, transparent 43% 45%, var(--inv-s4) 45% 48%, transparent 48%),
            radial-gradient(circle, color-mix(in srgb, var(--inv-glow) 22%, transparent) 1.4px, transparent 2px) 0 0 / 46px 46px;
        opacity: .55;
    }
    .retro-disco-main { box-shadow: 0 0 0 1px var(--rd-line), 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 8. motion ---------- */
@keyframes retro-disco-spin { to { rotate: 1turn; } }
@keyframes retro-disco-twinkle { 0%, 100% { opacity: .2; scale: .7; } 50% { opacity: .9; scale: 1.15; } }
@keyframes retro-disco-glint { 0%, 70%, 100% { scale: 0; } 80% { scale: 1.1; } 90% { scale: .5; } }
@keyframes retro-disco-floor { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes retro-disco-sway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@keyframes retro-disco-eq { 0%, 100% { scale: 1 .3; } 50% { scale: 1 1; } }
@keyframes retro-disco-flicker { 0% { opacity: .35; } 30% { opacity: 1; } 45% { opacity: .7; } 100% { opacity: 1; } }
@keyframes retro-disco-drop { 0% { translate: 0 -2.5rem; scale: .6; } 60% { translate: 0 .3rem; scale: 1.05; } 100% { translate: 0 0; scale: 1; } }
@keyframes retro-disco-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes retro-disco-dial { from { left: 8%; } to { left: 90%; } }
@keyframes retro-disco-grow { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes retro-disco-draw-x { from { scale: 0 1; } to { scale: 1 1; } }

@keyframes retro-disco-ball-in { 0% { translate: 0 -55svh; } 62% { translate: 0 .5rem; } 80% { translate: 0 -.2rem; } 100% { translate: 0 0; } }
@keyframes retro-disco-photo-in { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes retro-disco-glint-once { 0% { scale: 0; opacity: 0; } 35% { scale: 1.25; opacity: 1; } 100% { scale: .8; opacity: .9; } }
@keyframes retro-disco-glint-idle { 0%, 86%, 100% { scale: .8; } 92% { scale: 1.15; } }

/* the mirror ball: on the cover it drops in on its string and settles (once), then sways gently; its glints
   flash once, then catch the light now and then */
html.inv-anim .retro-disco-ball--cover {
    transform-origin: 50% -60svh;
    animation: retro-disco-ball-in 1.5s cubic-bezier(.3, .9, .4, 1) .15s both, retro-disco-sway 9s ease-in-out 1.7s infinite;
}
html.inv-anim .retro-disco-ball--closing { transform-origin: 50% -2.8rem; animation: retro-disco-sway 9s ease-in-out infinite; }
html.inv-anim .retro-disco-ball__glint { animation: retro-disco-glint-once .9s ease-out 1.4s both, retro-disco-glint-idle 7s ease-in-out 2.4s infinite; }
html.inv-anim .retro-disco-ball__glint--2 { animation-delay: 1.6s, 4.7s; }
html.inv-anim .retro-disco-ball__glint--3 { animation-delay: 1.8s, 6.1s; }
html.inv-anim .retro-disco-cover__photo { animation: retro-disco-photo-in 1.6s cubic-bezier(.2, .7, .2, 1) both; }
/* the sunburst turns very slowly */
html.inv-anim .retro-disco-cover__burst { animation: retro-disco-spin 160s linear infinite; }
/* every record's sheen turns */
html.inv-anim .retro-disco-record::after { animation: retro-disco-spin 4s linear infinite; }
html.inv-anim .retro-disco-record--mini { animation: retro-disco-spin 2.2s linear infinite; }
html.inv-anim .retro-disco-poster__burst { animation: retro-disco-spin 90s linear infinite; }
html.inv-anim .retro-disco-hifi__bars i { animation: retro-disco-eq 1.1s ease-in-out infinite; }
html.inv-anim .retro-disco-hifi__bars i:nth-child(2n) { animation-duration: .8s; animation-delay: -.3s; }
html.inv-anim .retro-disco-hifi__bars i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -.6s; }
html.inv-anim .retro-disco-hifi__lamp { animation: retro-disco-blink 2.4s ease-in-out infinite; }
html.inv-anim .retro-disco-led .inv-countdown__value.is-flicker { animation: retro-disco-flicker .35s linear; }

/* the heading's little rainbow draws itself when it scrolls into view */
html.inv-anim .retro-disco-heading__arc { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.3, .7, .2, 1) .15s; }
html.inv-anim .retro-disco-heading__arc--2 { transition-delay: .3s; }
html.inv-anim .retro-disco-heading__arc--3 { transition-delay: .45s; }
html.inv-anim .retro-disco-heading.is-revealed .retro-disco-heading__arc { stroke-dashoffset: 0; }

/* the LP's record slides out of its sleeve; the event records rise out of theirs; the singles roll in */
html.inv-anim .retro-disco-lp:not(.is-revealed) .retro-disco-lp__record { translate: 0 0; }
html.inv-anim .retro-disco-sleeve:not(.is-revealed) .retro-disco-sleeve__record { translate: 0 45%; }
html.inv-anim .retro-disco-singles:not(.is-revealed) .retro-disco-single__record { rotate: -220deg; translate: -1.5rem 0; }

/* RSVP: the stamp drops onto the pass, the glints twinkle, the jukebox lights blink after a wish */
html.inv-anim .retro-disco-pass__sent .retro-disco-pass__stamp { animation: retro-disco-drop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .retro-disco-pass.is-stamped .retro-disco-pass__glints i { animation: retro-disco-twinkle 2.2s ease-in-out .6s infinite; }
html.inv-anim .retro-disco-pass.is-stamped .retro-disco-pass__glints i:nth-child(2n) { animation-delay: 1s; }
html.inv-anim .retro-disco-jukebox.is-playing .retro-disco-jukebox__lights i { animation: retro-disco-blink .4s ease-in-out 4; }
html.inv-anim .retro-disco-jukebox.is-playing .retro-disco-jukebox__lights i:nth-child(2n) { animation-delay: .2s; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .retro-disco-hifi__needle { animation: retro-disco-dial linear both; animation-timeline: view(); animation-range: entry 10% exit 40%; }
    html.inv-anim .retro-disco-singles::before { animation: retro-disco-grow linear both; animation-timeline: view(); animation-range: entry 15% cover 55%; }
    html.inv-anim .retro-disco-track__dots { animation: retro-disco-draw-x linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    html.inv-anim .retro-disco-vendor__dots { animation: retro-disco-draw-x linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
}

@media (prefers-reduced-motion: reduce) {
    .retro-disco-cover--leave, .retro-disco-cover--leave *, .retro-disco-lp__record, .retro-disco-sleeve__record, .retro-disco-single__record,
    .retro-disco-wishlist__record, .retro-disco-wishlist__toggle, .retro-disco-wishlist__body, .retro-disco-swatch, .retro-disco-pass__glints i { transition: none !important; }
    .retro-disco-ball__glint, .retro-disco-ball, .retro-disco-cover__burst, .retro-disco-cover__photo,
    .retro-disco-record, .retro-disco-record::after, .retro-disco-hifi__bars i { animation: none !important; }
    .retro-disco-ball__glint { scale: 1; opacity: 1; }
}

/* ---------- 9. intro scene "Lantai Dansa Menyala" (scene.json + sections/_scene; the intro lives in <body>) ----------
   The disco night begins: the sunburst opens, the light-up floor rises, the mirror ball drops on its string, its
   reflections wheel over the walls under two light cones, two records roll in, then the name in an arched window. */
.retro-disco-scene-burst {
    position: absolute; left: 50%; top: 13%; width: 200vmax; aspect-ratio: 1; translate: -50% -50%;
    background: repeating-conic-gradient(color-mix(in srgb, var(--inv-s1) 20%, transparent) 0 5deg, transparent 5deg 10deg, color-mix(in srgb, var(--inv-s3) 18%, transparent) 10deg 15deg, transparent 15deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 3%, transparent 44%); mask: radial-gradient(circle, #000 3%, transparent 44%);
}
.retro-disco-scene-floor { position: absolute; inset: 0; perspective: 300px; perspective-origin: 50% 0; }
.retro-disco-scene-floor > div {
    position: absolute; left: -45%; right: -45%; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
    transform: rotateX(52deg); transform-origin: 50% 100%; padding: 3px; background: color-mix(in srgb, var(--rd-night-2) 80%, #000);
    -webkit-mask: linear-gradient(transparent, #000 34%); mask: linear-gradient(transparent, #000 34%);
}
.retro-disco-scene-floor i {
    border-radius: 2px; opacity: .3;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000));
}
.inv-intro.is-playing .retro-disco-scene-floor i { animation: retro-disco-scene-tile 2.4s steps(1) calc(var(--d) * -.27s) infinite; }
@keyframes retro-disco-scene-tile { 0% { opacity: .95; } 33% { opacity: .25; } 66% { opacity: .55; } }
.retro-disco-scene-beam {
    --c: var(--inv-s1); position: absolute; inset: 0;
    clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
    -webkit-mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent);
    background: linear-gradient(color-mix(in srgb, var(--c) 70%, #fff), color-mix(in srgb, var(--c) 30%, transparent) 55%, transparent);
}
.retro-disco-scene-beam--s3 { --c: var(--inv-s3); }
.retro-disco-scene-spots { position: absolute; inset: 0; overflow: hidden; }
.retro-disco-scene-spots > div {
    position: absolute; left: 50%; top: 13%; width: 210vmax; aspect-ratio: 1; translate: -50% -50%;
    background:
        radial-gradient(circle, #fff 0 1.2px, color-mix(in srgb, var(--inv-glow) 50%, transparent) 2.2px, transparent 3.4px) 0 0 / 53px 61px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-s1) 90%, #fff) 0 1.6px, color-mix(in srgb, var(--inv-s1) 40%, transparent) 3px, transparent 4.4px) 21px 34px / 79px 71px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-s3) 90%, #fff) 0 1.8px, color-mix(in srgb, var(--inv-s3) 40%, transparent) 3.4px, transparent 5px) 40px 12px / 97px 89px,
        radial-gradient(circle, #fff 0 2.4px, color-mix(in srgb, var(--inv-s2) 45%, transparent) 4.4px, transparent 7px) 66px 50px / 131px 143px;
    -webkit-mask: radial-gradient(circle, transparent 3%, #000 7%); mask: radial-gradient(circle, transparent 3%, #000 7%);
}
.inv-intro.is-playing .retro-disco-scene-spots > div { animation: retro-disco-spin 34s linear infinite; }
.inv-intro.is-playing .retro-disco-scene-burst { animation: retro-disco-spin 90s linear infinite reverse; }
.retro-disco-scene-ball { container-type: size; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; }
.retro-disco-scene-ball .retro-disco-ball { --ball: min(100cqw, 100cqh); }
.retro-disco-scene-ball .retro-disco-ball__string { height: 100svh; }
.retro-disco-scene-ball .retro-disco-ball__globe { filter: drop-shadow(0 0 calc(var(--ball) * .3) color-mix(in srgb, var(--inv-s2) 60%, transparent)) drop-shadow(0 calc(var(--ball) * .1) calc(var(--ball) * .12) rgb(0 0 0 / .5)); }
.inv-intro.is-playing .retro-disco-scene-ball .retro-disco-ball__glint { animation: retro-disco-glint-idle 1.6s ease-in-out infinite; }
.inv-intro.is-playing .retro-disco-scene-ball .retro-disco-ball__glint--2 { animation-delay: -.6s; }
.inv-intro.is-playing .retro-disco-scene-ball .retro-disco-ball__glint--3 { animation-delay: -1.1s; }
.retro-disco-scene-record { container-type: inline-size; width: 100%; }
.retro-disco-scene-record .retro-disco-record { --size: 100cqw; box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-glow) 22%, #0d0a08), 0 0 calc(var(--size) * .2) color-mix(in srgb, var(--inv-s3) 40%, transparent), 0 18px 30px -16px rgb(0 0 0 / .8); }
.retro-disco-scene-record .retro-disco-record__label small { font-size: calc(var(--size) * .07); }
.retro-disco-scene-record .retro-disco-record__label b { font-size: calc(var(--size) * .15); }

/* the name card: the cover's arched window ringed by the four stripes, on the night */
body.retro-disco-body .inv-intro--scene .inv-scene__card {
    --ring: 6px;
    top: 47%; aspect-ratio: auto; width: min(var(--scene-card-w, 78vw), 19rem); padding: 2.6rem 1.4rem 1.7rem;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-radius: 999px 999px 18px 18px; color: var(--inv-glow);
    background: radial-gradient(90% 60% at 50% 0, color-mix(in srgb, var(--inv-s3) 34%, transparent), transparent 75%), color-mix(in srgb, var(--rd-night) 88%, transparent);
    box-shadow:
        0 0 0 var(--ring) var(--inv-s1), 0 0 0 calc(var(--ring) * 2) var(--inv-s2), 0 0 0 calc(var(--ring) * 3) var(--inv-s3),
        0 0 0 calc(var(--ring) * 4) var(--inv-s4), 0 0 0 calc(var(--ring) * 4 + 2px) color-mix(in srgb, #fff 70%, var(--inv-s1)),
        0 0 70px calc(var(--ring) * 3) color-mix(in srgb, var(--inv-s3) 40%, transparent);
}
body.retro-disco-body .inv-scene__card .inv-intro__label { color: var(--inv-s1); font: 700 .7rem/1.4 var(--rd-sans); letter-spacing: .24em; text-transform: uppercase; }
body.retro-disco-body .inv-scene__card .inv-intro__names {
    margin-block: .35rem .2rem; font-family: var(--rd-display) !important; font-weight: 400; font-size: clamp(2.2rem, 11vw, 3.1rem); line-height: 1.12; overflow-wrap: anywhere;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-s1) 30%, #fff) 0%, var(--inv-s1) 34%, var(--inv-s2) 62%, var(--inv-s3) 92%);
    -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .1em .06em;
    filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--inv-s4) 80%, #000));
}
body.retro-disco-body .inv-scene__card .inv-intro__rule { height: 4px; border-radius: 4px; background: var(--rd-stripes-x); width: 5rem; }
body.retro-disco-body .inv-scene__card .inv-intro__date { color: var(--inv-glow); font: 600 .86rem/1.4 var(--rd-sans); }
body.retro-disco-body .inv-intro--scene .inv-intro__skip { background: rgb(0 0 0 / .45); color: var(--inv-glow); border-color: color-mix(in srgb, var(--inv-glow) 35%, transparent); }
@media (prefers-reduced-motion: reduce) {
    .retro-disco-scene-floor i, .retro-disco-scene-spots > div, .retro-disco-scene-burst, .retro-disco-scene-ball .retro-disco-ball__glint { animation: none !important; }
}