/* Age Gate — neon interstitial.
   Palette is authored in oklch; the :root block below carries sRGB fallbacks so old
   Android WebViews (TikTok / Facebook in-app) still get the right look. */
:root {
    --bg: #0a0209;
    --screen: #0c030b;
    --disc: #170616;
    --pink: #ff2e88;
    --cyan: #00dfe8;
    --white: #fffafd;
    --muted: #a392a1;
    --faint: #7c6b7a;
    --lobby-a: #31162f;
    --lobby-b: #1b081a;
    --vignette: #060105;

    --pink-a85: rgba(255, 46, 136, .85);
    --pink-a80: rgba(255, 46, 136, .8);
    --pink-a65: rgba(255, 46, 136, .65);
    --pink-a55: rgba(255, 46, 136, .55);
    --pink-a34: rgba(255, 46, 136, .34);
    --pink-a30: rgba(255, 46, 136, .3);
    --pink-a28: rgba(255, 46, 136, .28);
    --pink-a22: rgba(255, 46, 136, .22);
    --cyan-a90: rgba(0, 223, 232, .9);
    --cyan-a75: rgba(0, 223, 232, .75);
    --cyan-a45: rgba(0, 223, 232, .45);
    --cyan-a38: rgba(0, 223, 232, .38);
    --cyan-a20: rgba(0, 223, 232, .2);
    --cyan-a14: rgba(0, 223, 232, .14);
    --cyan-a075: rgba(0, 223, 232, .075);
}

@supports (color: oklch(0.5 0.1 200)) {
    :root {
        --bg: oklch(0.115 0.028 330);
        --screen: oklch(0.12 0.032 330);
        --disc: oklch(0.16 0.045 330);
        --pink: oklch(0.72 0.19 348);
        --cyan: oklch(0.82 0.14 200);
        --white: oklch(0.99 0.008 340);
        --muted: oklch(0.68 0.03 330);
        --faint: oklch(0.55 0.03 330);
        --lobby-a: oklch(0.25 0.06 330);
        --lobby-b: oklch(0.175 0.045 330);
        --vignette: oklch(0.09 0.03 330);

        --pink-a85: oklch(0.72 0.19 348 / 0.85);
        --pink-a80: oklch(0.72 0.19 348 / 0.8);
        --pink-a65: oklch(0.72 0.19 348 / 0.65);
        --pink-a55: oklch(0.72 0.19 348 / 0.55);
        --pink-a34: oklch(0.72 0.19 348 / 0.34);
        --pink-a30: oklch(0.72 0.19 348 / 0.3);
        --pink-a28: oklch(0.72 0.19 348 / 0.28);
        --pink-a22: oklch(0.72 0.19 348 / 0.22);
        --cyan-a90: oklch(0.82 0.14 200 / 0.9);
        --cyan-a75: oklch(0.82 0.14 200 / 0.75);
        --cyan-a45: oklch(0.82 0.14 200 / 0.45);
        --cyan-a38: oklch(0.82 0.14 200 / 0.38);
        --cyan-a20: oklch(0.82 0.14 200 / 0.2);
        --cyan-a14: oklch(0.82 0.14 200 / 0.14);
        --cyan-a075: oklch(0.82 0.14 200 / 0.075);
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    background: var(--bg);
}

body {
    font-family: Archivo, Helvetica, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--white);
}

/* ---------- stage ---------- */

.gate {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--screen);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Lobby — the blurred "what's behind the door" layer. Sharpens on unlock. */
.lobby {
    position: absolute;
    inset: -40px;
    filter: blur(22px) saturate(1.2);
    transform: scale(1.16);
    transition: filter 1100ms cubic-bezier(.2, .8, .2, 1), transform 1500ms cubic-bezier(.2, .8, .2, 1);
}

.gate.done .lobby {
    filter: blur(0) saturate(1.2);
    transform: scale(1);
}

.lobby-stripes {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(50deg, var(--lobby-a) 0 4px, var(--lobby-b) 4px 11px);
}

.lobby-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(110% 55% at 70% 22%, var(--pink-a55), transparent 62%),
        radial-gradient(95% 50% at 20% 80%, var(--cyan-a38), transparent 66%);
}

/* ---------- the gate screen itself ---------- */

.screen {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 1;
    transition: opacity 640ms ease 120ms;
}

.gate.done .screen {
    opacity: 0;
    pointer-events: none;
}

.screen-bg {
    position: absolute;
    inset: 0;
    background: var(--screen);
}

.screen-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--cyan-a075) 1px, transparent 1px),
        linear-gradient(90deg, var(--cyan-a075) 1px, transparent 1px);
    background-size: 34px 34px;
}

.screen-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 44% at 50% 8%, var(--pink-a30), transparent 70%),
        radial-gradient(70% 40% at 50% 100%, var(--cyan-a20), transparent 70%);
}

.screen-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -180px;
    height: 180px;
    background: linear-gradient(180deg, transparent, var(--cyan-a14), transparent);
    animation: scan 7000ms linear infinite;
}

.screen-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 140px var(--vignette);
}

.screen-grid,
.screen-glow,
.screen-scan {
    transition: opacity 380ms ease;
}

.gate.done .screen-grid,
.gate.done .screen-glow,
.gate.done .screen-scan {
    opacity: 0;
}

/* ---------- content ---------- */

.content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 9vh, 74px);
    padding: clamp(48px, 11vh, 96px) clamp(24px, 11vw, 46px) clamp(40px, 7vh, 64px);
}

.question {
    font-size: clamp(30px, 8.5vw, 46px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.05;
    text-align: center;
    color: var(--white);
    text-shadow:
        0 0 5px var(--white),
        0 0 16px var(--pink),
        0 0 42px var(--pink-a85),
        0 0 84px var(--pink-a55);
    animation: flick 5200ms linear infinite;
    text-wrap: pretty;
}

/* ---------- YES button ---------- */

.yes {
    position: relative;
    width: clamp(168px, 46vw, 208px);
    height: clamp(168px, 46vw, 208px);
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transform: scale(1);
    transition: transform 200ms cubic-bezier(.34, 1.4, .64, 1);
}

.yes.pressed {
    transform: scale(.93);
}

.yes .halo {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pink-a34), transparent 68%);
    animation: halo 2400ms ease-in-out infinite;
}

.yes .sweep {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--cyan-a90) 40deg, transparent 96deg);
    animation: spin 3400ms linear infinite;
    filter: blur(3px);
}

.yes .disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--disc);
    border: 2px solid var(--pink);
    box-shadow: 0 0 22px var(--pink-a80), inset 0 0 34px var(--pink-a30);
}

.yes .inner-ring {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    border: 1px solid var(--cyan-a45);
    animation: creep 2400ms ease-in-out infinite;
}

.yes .ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--cyan-a75);
    pointer-events: none;
    opacity: 0;
    transform: scale(.62);
}

.yes .ripple.armed {
    opacity: .95;
    transform: scale(.62);
    transition: none;
}

.yes .ripple.expand {
    opacity: 0;
    transform: scale(2.75);
    transition: transform 780ms cubic-bezier(.2, .8, .2, 1), opacity 780ms ease;
}

.yes .label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(38px, 12vw, 52px);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--white);
    text-shadow:
        0 0 6px var(--white),
        0 0 22px var(--pink),
        0 0 54px var(--pink-a65);
}

/* ---------- redirect loader ----------
   Fades in as the gate opens and stays up until the destination document paints,
   so the hand-off is never a blank screen. */

.loader {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease 240ms;
}

.gate.done .loader {
    opacity: 1;
}

/* Plain border spinner rather than a conic-gradient one — conic support is patchy on
   the older Android webviews this funnel sees. */
.loader-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--cyan-a20);
    border-top-color: var(--cyan);
    box-shadow: 0 0 18px var(--pink-a34), inset 0 0 12px var(--pink-a22);
    animation: spin 900ms linear infinite;
}

.loader-label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .26em;
    color: var(--cyan);
    text-shadow: 0 0 12px var(--cyan-a45);
    animation: creep 1800ms ease-in-out infinite;
}

/* ---------- unlock bloom ---------- */

.bloom {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 63%, var(--white), var(--pink-a34) 34%, transparent 70%);
    transition: opacity 950ms ease;
}

.bloom.on {
    opacity: 1;
}

/* ---------- footer ---------- */

footer {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 20px 36px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.6;
    color: var(--faint);
    text-align: center;
}

footer p {
    margin-bottom: 8px;
    text-wrap: pretty;
}

footer a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid var(--cyan-a45);
}

.legal-meta {
    margin-top: 12px;
    color: var(--muted);
    letter-spacing: .08em;
}

/* ---------- keyframes ---------- */

@keyframes halo {

    0%,
    100% {
        opacity: .4;
        transform: scale(1);
    }

    50% {
        opacity: .85;
        transform: scale(1.08);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes flick {

    0%,
    96%,
    100% {
        opacity: 1;
    }

    97% {
        opacity: .55;
    }

    98.5% {
        opacity: .85;
    }
}

@keyframes scan {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(100vh + 180px));
    }
}

@keyframes creep {

    0%,
    100% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    /* the loader ring keeps spinning — it is the only progress cue during the redirect */
    .question,
    .yes .halo,
    .yes .sweep,
    .yes .inner-ring,
    .screen-scan,
    .loader-label {
        animation: none;
    }

    .lobby,
    .screen,
    .bloom,
    .yes,
    .yes .ripple {
        transition-duration: 1ms;
    }
}