/*
 * Entry screen: "The countdown is real." 11:59 PM flips to midnight,
 * pink powder bursts in, "Everything changes." and the enter button.
 * Shown only when <html> has .intro-on (set by the script in the head).
 */

@font-face {
    font-family: 'Permanent Marker';
    src: url("../fonts/permanent-marker-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.intro { display: none; }

.intro-on body { overflow: hidden; }

.intro-on .intro {
    --poster-pink: #f80052;
    --card-h: min(22vw, 24vh, 200px);
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    background: #000;
    color: #f2f2ef;
    opacity: 1;
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}

.intro-leaving .intro { opacity: 0; transform: scale(1.06); pointer-events: none; }

/* ------------------------------------------------------------- layout */
.intro__stage {
    position: relative;
    z-index: 2;
    width: min(92vw, 900px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(.6rem, 2.2vh, 1.4rem);
    margin: auto;
    padding: 3.2rem 0 2rem;
}

.intro__logo {
    width: clamp(120px, 18vw, 200px);
    height: auto;
    mix-blend-mode: screen;
    opacity: 0;
    animation: introUp .9s .2s ease forwards;
}

.intro__kicker,
.intro__line {
    margin: 0;
    font-family: var(--font-display, 'Anton', Impact, sans-serif);
    font-size: clamp(1.15rem, 3.6vw, 2.4rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ecece8;
}

.intro__kicker { opacity: 0; animation: introUp .9s .6s ease forwards; }
.intro__line { opacity: 0; }

/* ----------------------------------------------------------- the clock */
.intro__clock {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: calc(var(--card-h) * .07);
    margin: clamp(.4rem, 2vh, 1.2rem) 0 calc(var(--card-h) * .2);
    perspective: 900px;
    opacity: 0;
    animation: introUp .9s 1s ease forwards;
}

.flip {
    position: relative;
    display: block;
    width: calc(var(--card-h) * .66);
    height: var(--card-h);
    border-radius: calc(var(--card-h) * .06);
    background: linear-gradient(180deg, #1d1d1d 0%, #0f0f0f 49.6%, #050505 50.4%, #141414 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 30px rgba(0, 0, 0, .7);
}

/* hinge pins on each side of the split */
.flip::before,
.flip::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(var(--card-h) * .05);
    height: calc(var(--card-h) * .16);
    transform: translateY(-50%);
    border-radius: 3px;
    background: linear-gradient(90deg, #2a2a2a, #6a6a6a 45%, #222);
    z-index: 4;
}
.flip::before { left: calc(var(--card-h) * -.035); }
.flip::after { right: calc(var(--card-h) * -.035); }

.flip--colon { width: calc(var(--card-h) * .36); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--card-h) * .22); }

.flip__dot {
    width: calc(var(--card-h) * .11);
    height: calc(var(--card-h) * .11);
    border-radius: 50%;
    background: url("../images/intro/grain.png") center / 120px, #eee;
    animation: introBlink 1s steps(1, end) infinite;
}
.is-midnight .flip__dot { animation: none; opacity: 1; }

.flip__half,
.flip__flap {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden;
}
.flip__half--top,
.flip__flap--top { top: 0; border-radius: calc(var(--card-h) * .06) calc(var(--card-h) * .06) 0 0; transform-origin: 50% 100%; }
.flip__half--bottom,
.flip__flap--bottom { bottom: 0; border-radius: 0 0 calc(var(--card-h) * .06) calc(var(--card-h) * .06); transform-origin: 50% 0; }

.flip__flap--top { background: linear-gradient(180deg, #1d1d1d, #0f0f0f); z-index: 3; }
.flip__flap--bottom { background: linear-gradient(180deg, #050505, #141414); z-index: 3; transform: rotateX(90deg); }
.flip__flap { visibility: hidden; }
.flip.is-flipping .flip__flap { visibility: visible; }
.flip.is-flipping .flip__flap--top { animation: introFlapTop .32s ease-in forwards; }
.flip.is-flipping .flip__flap--bottom { animation: introFlapBottom .32s .32s ease-out forwards; }

.flip__num {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--card-h);
    line-height: var(--card-h);
    text-align: center;
    font-family: var(--font-display, 'Anton', Impact, sans-serif);
    font-size: calc(var(--card-h) * .86);
    color: #efefea;
    background: url("../images/intro/grain.png") center / 160px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.flip__half--top .flip__num,
.flip__flap--top .flip__num { top: 0; }
.flip__half--bottom .flip__num,
.flip__flap--bottom .flip__num { bottom: 0; }

/* the thin split line */
.flip:not(.flip--colon) > .flip__half--bottom { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .9); }

.intro__meridiem {
    position: absolute;
    right: calc(var(--card-h) * -.42);
    bottom: calc(var(--card-h) * -.16);
    width: calc(var(--card-h) * .6);
    height: calc(var(--card-h) * .4);
    font-family: 'Permanent Marker', 'Brush Script MT', cursive;
    font-size: calc(var(--card-h) * .3);
    line-height: 1;
    color: var(--poster-pink);
    transform: rotate(-8deg);
}
.intro__pm,
.intro__am { position: absolute; inset: 0; transition: opacity .3s ease, transform .35s ease; }
.intro__am { opacity: 0; transform: scale(1.6); }
.is-midnight .intro__pm { opacity: 0; transform: scale(.5); }
.is-midnight .intro__am { opacity: 1; transform: scale(1); }

/* ----------------------------------------------------------- powder */
.intro__powder {
    position: fixed;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}
.intro__powder--tr {
    top: -6vmin;
    right: -6vmin;
    width: min(70vw, 760px);
    aspect-ratio: 582 / 1020;
    background-image: url("../images/intro/powder-tr.jpg");
    background-position: top right;
    transform-origin: 100% 0;
    transform: translate(18%, -18%) scale(.4) rotate(12deg);
}
.intro__powder--bl {
    bottom: -6vmin;
    left: -6vmin;
    width: min(76vw, 820px);
    aspect-ratio: 660 / 882;
    background-image: url("../images/intro/powder-bl.jpg");
    background-position: bottom left;
    transform-origin: 0 100%;
    transform: translate(-18%, 18%) scale(.4) rotate(-12deg);
}
.is-burst .intro__powder { opacity: 1; transform: none; transition: transform 1.1s cubic-bezier(.12, .9, .2, 1), opacity .5s ease; }
.is-burst .intro__powder--bl { transition-delay: .12s; }

.intro__flash {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 50% 50%, rgba(248, 0, 82, .35), transparent 65%);
    opacity: 0;
    pointer-events: none;
}
.is-burst .intro__flash { animation: introFlash .9s ease-out; }

/* ------------------------------------------------- tagline and button */
.intro__tagline {
    width: min(86vw, 640px);
    height: auto;
    margin: -.8rem 0 -.6rem;
    clip-path: inset(0 100% 0 0);
}
.is-tagline .intro__line { animation: introUp .6s ease forwards; }
.is-tagline .intro__tagline { animation: introWipe .95s .45s cubic-bezier(.6, 0, .2, 1) forwards; }

.intro__enter {
    margin-top: clamp(.6rem, 2.5vh, 1.6rem);
    padding: 1rem 2.1rem;
    border: 2px solid var(--poster-pink);
    border-radius: 0;
    background: var(--poster-pink);
    color: #050505;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: clamp(.8rem, 2.4vw, 1rem);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .5s ease, transform .5s ease, background .2s ease, color .2s ease;
}
.is-ready .intro__enter { opacity: 1; transform: none; pointer-events: auto; animation: introPulse 2.2s 1s ease-in-out infinite; }
.intro__enter:hover { background: #050505; color: #fff; }
.intro__enter:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.intro__skip {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    right: 1rem;
    z-index: 3;
    padding: .5rem .9rem;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .4);
    color: #cfcfcf;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
}
.intro__skip:hover,
.intro__skip:focus-visible { color: #fff; border-color: #fff; outline: none; }
.is-ready .intro__skip { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------- keyframes */
@keyframes introUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes introBlink { 0% { opacity: 1; } 50% { opacity: .08; } }
@keyframes introFlapTop { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes introFlapBottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@keyframes introFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes introWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes introPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 0, 82, .55); } 50% { box-shadow: 0 0 0 12px rgba(248, 0, 82, 0); } }

/* Laptops with short screens. */
@media (max-height: 780px) {
    .intro-on .intro { --card-h: min(20vw, 19vh, 170px); }
    .intro__stage { gap: .55rem; padding-top: 2.6rem; }
    .intro__logo { width: clamp(110px, 14vw, 160px); }
    .intro__tagline { width: min(80vw, 520px); }
}

/* Short landscape phones: shrink the clock so everything fits. */
@media (max-height: 520px) {
    .intro-on .intro { --card-h: min(18vw, 24vh, 160px); }
    .intro__stage { gap: .4rem; }
}

/* No motion: show the midnight state straight away. */
@media (prefers-reduced-motion: reduce) {
    .intro *, .intro { animation: none !important; transition: none !important; }
    .intro__logo, .intro__kicker, .intro__clock, .intro__line { opacity: 1; }
    .intro__tagline { clip-path: none; }
}