/* /whats-this-holiday: the WTH: What's This Holiday landing page.
   Colors follow the app's palette (docs/DESIGN.md, refreshed 2026-11-09):
   lilac white #F5F3FF with midnight text #14123A and electric violet #5B35F2
   in light; midnight #0A0D2B with lilac text #F5F3FF and violet #B3A4FF in
   dark. Coral #FF4F6D, gold #FFC21A and teal #00C2B0 are the holiday type
   colors. The app uses the system font, so the page does too, with SF Pro
   Rounded headings where the system has them. Light and dark follow
   prefers-color-scheme. */

.wth {
    position: relative;
    --wth-bg: #F5F3FF;
    --wth-surface: #FFFFFF;
    --wth-sunken: #ECE8FF;
    --wth-text: #14123A;
    --wth-text-2: #575478;
    --wth-sep: #DDD8F5;
    --wth-accent: #5B35F2;
    --wth-accent-2: #C2243F;
    --wth-glow: rgba(91, 53, 242, .16);
    --wth-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
    --wth-round: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif;
    background: var(--wth-bg);
    color: var(--wth-text);
    font-family: var(--wth-font);
    overflow: clip;
}
@media (prefers-color-scheme: dark) {
    .wth {
        --wth-bg: #0A0D2B;
        --wth-surface: #1A1F52;
        --wth-sunken: #141842;
        --wth-text: #F5F3FF;
        --wth-text-2: #B4B6DC;
        --wth-sep: #2A2F66;
        --wth-accent: #B3A4FF;
        --wth-accent-2: #FF8FA3;
        --wth-glow: rgba(179, 164, 255, .16);
    }
}
body.wth-page { background: var(--wth-bg, #F5F3FF); }
@media (prefers-color-scheme: dark) { body.wth-page { background: #0A0D2B; } }

.wth::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 140vh; pointer-events: none;
    background: radial-gradient(60% 50% at 70% 30%, var(--wth-glow), transparent 70%);
}

/* ── The party: glows, confetti, sparkles and bunting ──────────────────────
   A sticky full-screen layer behind the devices and the chapter text (the 3D
   canvas is transparent), clipped to the page so it never runs under the
   footer. Colors are the app's own: coral, gold, teal, violet, pink. */
.wth-festive {
    position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
    overflow: hidden; pointer-events: none; z-index: 0;
    --wth-bit-o: .62;
}
@media (prefers-color-scheme: dark) { .wth-festive { --wth-bit-o: .8; } }
.wth-glow { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); opacity: .22; animation: wth-float 26s ease-in-out infinite alternate; }
.wth-glow-1 { background: #FF4F6D; left: -14vmax; top: -10vmax; }
.wth-glow-2 { background: #FFC21A; right: -16vmax; top: 4vh; animation-delay: -7s; opacity: .2; }
.wth-glow-3 { background: #00C2B0; left: -10vmax; bottom: -18vmax; animation-delay: -13s; opacity: .16; }
.wth-glow-4 { background: #FF5FB0; right: -12vmax; bottom: -14vmax; animation-delay: -19s; opacity: .16; }
@media (prefers-color-scheme: dark) { .wth-glow { opacity: .2; } .wth-glow-3, .wth-glow-4 { opacity: .17; } }
@keyframes wth-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vmax, 5vmax) scale(1.12); } }

/* Confetti: each bit falls from above the screen to below it, swaying and
   spinning, on its own speed and delay (set inline by the page). */
.wth-bit {
    position: absolute; left: var(--x); top: -6vh; display: block;
    width: 9px; height: 16px; border-radius: 2px; background: var(--c); opacity: var(--wth-bit-o);
    scale: var(--s); animation: wth-fall var(--t) linear var(--d) infinite;
}
.wth-bit-dot { width: 10px; height: 10px; border-radius: 50%; }
.wth-bit-square { width: 11px; height: 11px; border-radius: 2px; }
.wth-bit-curl { width: 18px; height: 18px; background: none; border: 3px solid var(--c); border-color: var(--c) transparent transparent var(--c); border-radius: 50%; }
@keyframes wth-fall {
    0%   { transform: translate(0, 0) rotate(var(--r)) rotateX(0deg); }
    25%  { transform: translate(calc(var(--w) * .6), 30vh) rotate(calc(var(--r) + 90deg)) rotateX(180deg); }
    50%  { transform: translate(var(--w), 56vh) rotate(calc(var(--r) + 180deg)) rotateX(360deg); }
    75%  { transform: translate(calc(var(--w) * .2), 84vh) rotate(calc(var(--r) + 270deg)) rotateX(540deg); }
    100% { transform: translate(calc(var(--w) * -.4), 112vh) rotate(calc(var(--r) + 360deg)) rotateX(720deg); }
}

/* Gold four-point sparkles, like the ones on the app icon's party popper. */
.wth-spark {
    position: absolute; left: var(--x); top: var(--y); width: 22px; height: 22px; scale: var(--s);
    background: #FFC21A; opacity: 0;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: wth-twinkle 4s ease-in-out var(--d) infinite;
}
@keyframes wth-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 45%, 55% { opacity: .85; transform: scale(1) rotate(45deg); } }

/* Party bunting strung across the top of the hero; it scrolls away with it. */
.wth-bunting {
    position: absolute; left: 0; top: 0; width: 100%; height: clamp(70px, 9vw, 120px);
    z-index: 1; pointer-events: none; color: var(--wth-text-2); overflow: visible;
}
.wth-flag { transform-box: fill-box; transform-origin: 50% 0; animation: wth-sway 3.2s ease-in-out var(--d) infinite alternate; opacity: .9; }
@keyframes wth-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* Under Reduce Motion the party holds still: confetti scattered in place. */
@media (prefers-reduced-motion: reduce) {
    .wth-glow, .wth-flag, .wth-spark { animation: none; }
    .wth-spark { opacity: .7; }
    .wth-bit { animation: none; top: var(--y); transform: rotate(var(--r)); }
}

/* ── Chapter text ─────────────────────────────────────────────────────────── */
.wth-card { position: relative; z-index: 2; max-width: 440px; }
.wth-card h1, .wth-card h2 { font-family: var(--wth-round); color: var(--wth-text); letter-spacing: -.02em; }
.wth-card h1 { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 800; line-height: 1; margin: 6px 0 18px; }
.wth-card h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.08; margin: 4px 0 14px; }
.wth-card p { color: var(--wth-text-2); font-size: 1.08rem; line-height: 1.6; margin: 0 0 12px; }
.wth-card .wth-lede { font-size: 1.25rem; color: var(--wth-text); }
.wth-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .8rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--wth-accent) !important; margin-bottom: 6px !important;
}
.wth-feature h2 { color: var(--wth-text); }
.wth-aside { font-size: .95rem !important; font-weight: 600; color: var(--wth-text) !important; opacity: .8; }
.wth-note { font-size: .92rem !important; }
.wth-icon img { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 10px 30px rgba(46, 26, 71, .18); display: block; margin-bottom: 18px; }
/* Facts: a quiet two-column list, label left and detail right, split by hairlines. */
.wth-facts { list-style: none; padding: 0; margin: 4px 0 16px; border-top: 1px solid var(--wth-sep); }
.wth-facts li {
    display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 16px; align-items: baseline;
    color: var(--wth-text-2); line-height: 1.5; padding: 11px 0; border-bottom: 1px solid var(--wth-sep);
}
.wth-facts strong {
    color: var(--wth-accent); font-family: var(--wth-round); font-weight: 650;
    font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 380px) { .wth-facts li { grid-template-columns: 1fr; row-gap: 2px; } }
/* Bottom center of the first screen; it scrolls away with the hero. */
.wth-scroll-cue {
    position: absolute; left: 50%; top: calc(100svh - var(--nav-h) - 96px); transform: translateX(-50%);
    margin: 0; text-align: center; white-space: nowrap; z-index: 2;
    font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--wth-text-2);
}
.wth-scroll-cue::after { content: ""; display: block; width: 2px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--wth-accent), transparent); animation: wth-cue 1.8s ease-in-out infinite; }
@keyframes wth-cue { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(8px); opacity: 1; } }

/* ── Store badges ─────────────────────────────────────────────────────────── */
.wth-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
.wth-badge {
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 14px;
    border-radius: 12px; font-family: var(--wth-font); font-size: 1.2rem; font-weight: 600; line-height: 1.05; text-decoration: none;
}
.wth-badge svg { width: 22px; height: 26px; flex: none; }
.wth-badge span { display: flex; flex-direction: column; }
.wth-badge small { font-size: .68rem; font-weight: 500; letter-spacing: .01em; }
.wth-badge-apple { background: #000; color: #fff; border: 1px solid #000; transition: transform .2s, box-shadow .2s; }
.wth-badge-apple:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); color: #fff; }
.wth-badge-apple:focus-visible { outline: 3px solid var(--wth-accent); outline-offset: 3px; }
.wth-badge-play { background: #000; color: #fff; border: 1px solid #000; transition: transform .2s, box-shadow .2s; }
.wth-badge-play:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); color: #fff; }
.wth-badge-play:focus-visible { outline: 3px solid var(--wth-accent); outline-offset: 3px; }
.wth-badge-play svg { width: 20px; height: 22px; }
@media (prefers-color-scheme: dark) { .wth-badge-apple, .wth-badge-play { border-color: #A6A6A6; } }

/* ── Screenshots (shown when the page is not in 3D) ───────────────────────── */
.wth-shot { margin: 0; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.wth-shot img { display: block; width: auto; max-width: 100%; height: auto; max-height: 640px; border-radius: 32px; box-shadow: 0 24px 60px rgba(46, 26, 71, .18); }
.wth-shot-wide img { max-height: 460px; border-radius: 22px; }
.wth-shot-watch img { max-height: 300px; border-radius: 0; box-shadow: none; }
.wth-shot-widgets img { max-height: 200px; border-radius: 0; box-shadow: none; }

/* Flat layout: a normal stack of chapters, text beside the screen. */
.wth-ch { padding: 72px 24px; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.wth-ch + .wth-ch { border-top: 1px solid var(--wth-sep); }
.wth-stage { display: none; }
@media (max-width: 820px) {
    .wth-ch { grid-template-columns: 1fr; gap: 28px; padding: 56px 20px; }
    .wth-shot img { max-height: 520px; }
}

/* ── 3D layout (whats-this-holiday.js adds .is-3d once WebGL is up) ────────────────── */
.wth.is-3d .wth-stage {
    display: block; position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
    z-index: 0; pointer-events: none;
}
.wth.is-3d .wth-stage canvas { display: block; width: 100%; height: 100%; }
.wth.is-3d .wth-shot { display: none; }
.wth.is-3d .wth-ch {
    display: block; max-width: none; margin: 0; border: 0; position: relative; z-index: 1;
    min-height: 170vh; padding: 24vh max(32px, calc((100vw - 1200px) / 2)) 0;
}
.wth.is-3d .wth-hero { min-height: 130vh; padding-top: max(12vh, 64px); }
.wth.is-3d .wth-feature { min-height: 200vh; }
.wth.is-3d .wth-finale { min-height: 190vh; }
.wth.is-3d .wth-card {
    position: sticky; top: max(calc(var(--nav-h) + 24px), 20vh);
    padding: 30px 32px; border-radius: 26px;
    background: color-mix(in srgb, var(--wth-bg) 74%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--wth-sep) 70%, transparent);
    box-shadow: 0 20px 50px rgba(46, 26, 71, .08);
}
.wth.is-3d .wth-hero .wth-card { top: max(12vh, 64px); background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; }

/* Phones and portrait tablets: the devices take the top of the screen and the
   chapter text pins to the bottom. Matches whats-this-holiday.js (aspect below 1). */
@media (max-aspect-ratio: 1/1) {
    .wth.is-3d .wth-ch {
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 0 14px 0; min-height: 150vh;
    }
    .wth.is-3d .wth-feature { min-height: 175vh; }
    .wth.is-3d .wth-hero { min-height: 120vh; }
    .wth.is-3d .wth-card, .wth.is-3d .wth-hero .wth-card {
        position: sticky; top: auto; bottom: 14px; max-width: 560px; width: 100%; margin: 0 auto;
        padding: 20px 22px; border-radius: 22px;
        background: color-mix(in srgb, var(--wth-bg) 80%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
        border: 1px solid color-mix(in srgb, var(--wth-sep) 70%, transparent);
    }
    .wth.is-3d .wth-card h1 { font-size: 2.6rem; margin-bottom: 10px; }
    .wth.is-3d .wth-card h2 { font-size: 1.6rem; margin-bottom: 8px; }
    .wth.is-3d .wth-card p { font-size: .97rem; line-height: 1.5; margin-bottom: 8px; }
    .wth.is-3d .wth-card .wth-lede { font-size: 1.05rem; }
    .wth.is-3d .wth-icon img { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 10px; }
    .wth.is-3d .wth-badges { margin: 12px 0 8px; }
    .wth.is-3d .wth-scroll-cue { display: none; }
    .wth.is-3d .wth-facts li { padding: 7px 0; font-size: .92rem; }
}

/* ── The header while the story plays: slim and see-through ───────────────── */
body.wth-page .nav-inner, body.wth-page .nav-links { transition: height .35s ease; }
body.wth-page .nav-logo img { transition: height .35s ease; }
body.wth-page.wth-immersive .nav {
    background: color-mix(in srgb, var(--white) 55%, transparent);
    border-bottom-color: transparent;
}
/* Only the desktop bar shrinks: on phones the menu is a drawer sized from --nav-h. */
@media (min-width: 769px) {
body.wth-page.wth-immersive .nav {
    --nav-h: 50px;
    background: color-mix(in srgb, var(--white) 55%, transparent);
    border-bottom-color: transparent;
}
body.wth-page.wth-immersive .nav-logo img { height: 34px !important; }
body.wth-page.wth-immersive .nav-links a:not(.nav-cta) { font-size: .82rem; }
}
.wth:not(.is-3d) .wth-scroll-cue { display: none; }

@media (prefers-reduced-motion: reduce) {
    .wth-scroll-cue::after { animation: none; }
    body.wth-page .nav-inner, body.wth-page .nav-links, body.wth-page .nav-logo img { transition: none; }
}

.wth-price { font-family: var(--wth-round); font-size: 1.45rem !important; color: var(--wth-accent) !important; margin: 6px 0 12px !important; }
.wth-aside a { color: var(--wth-accent); }

/* Store badges that are not live yet: plain text, not a badge. */
.wth-badge-soon {
    display: inline-flex; align-items: center; min-height: 52px; padding: 0 4px;
    font-size: .95rem; font-weight: 600; color: var(--wth-text-2);
}

/* The greeting, set in its own script and marked with its language. */
.wth-greeting { margin: 4px 0 14px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--wth-surface) 85%, transparent); border: 1px solid var(--wth-sep); max-width: 360px; }
.wth-greeting .wth-native { display: block; font-size: 1.7rem; font-weight: 700; color: var(--wth-text); line-height: 1.3; }
.wth-greeting .wth-roman { display: block; font-size: 1rem; color: var(--wth-accent); font-weight: 650; }
.wth-greeting .wth-say { display: block; font-size: .92rem; color: var(--wth-text-2); }

/* Holiday type labels: a word and a color, never color alone. */
.wth-types { list-style: none; padding: 0; margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.wth-types li { font-size: .88rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; color: #14123A; }
.wth-types .t-rel { background: #CFC3FF; }
.wth-types .t-nat { background: #FFC2CC; }
.wth-types .t-cul { background: #A8EEE6; }
.wth-types .t-awa { background: #FFE69C; }