/* Frigid Coolers — "cold open". Luis 2026-08-26: arriving on the site should feel like
   walking into a walk-in — dark, cold fog, and it clears as you step in.

   v3 — ONE motion, not stages (Luis: "it's one, two, three… it needs to be one all the way
   through, darker to light"). Everything starts at t=0 and only ever moves one way on one
   shared curve: the darkness lifts, the fog (already present in the dark) brightens then thins
   as it drifts up, the page comes forward. No holds, no delays, no door sliver, no separate
   frost beat, no end-fade step.

   Plays once per browser tab (sessionStorage), never for reduced-motion users, skips on any
   click/key/scroll, removes itself from the DOM when done. Replay with ?fog on the URL. */

:root { --co-t: 5.5s; --co-ease: cubic-bezier(.45, .05, .3, 1); }  /* v4: slower, flatter — Luis 2026-08-26 'slow it down' */

#cold-open {
    position: fixed; inset: 0; z-index: 9999;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    /* the overlay as a whole fades on the same single curve — the fog is the last thing to go */
    animation: co-out var(--co-t) var(--co-ease) both;
}
#cold-open[hidden] { display: none; }
@keyframes co-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* the page underneath comes forward continuously from the first frame */
html.cold-open-on body > *:not(#cold-open) {
    animation: co-page var(--co-t) var(--co-ease) both;
}
@keyframes co-page {
    0%   { transform: scale(.982); }
    100% { transform: none; }
}

/* the dark of the box: lifts from the first frame, faster than the fog thins,
   so the fog is lit from behind as the darkness goes — that is the "door opening" */
#cold-open .co-veil {
    position: absolute; inset: 0; background: #07111f;
    animation: co-veil var(--co-t) cubic-bezier(.3, 0, .2, 1) both;
}
@keyframes co-veil {
    0%   { opacity: .94; }
    100% { opacity: 0; }
}

/* fog: three textured sheets present from t=0, moving as ONE cloud — same start, same
   direction (slow rise), same shape of curve; only slight parallax between them */
#cold-open .co-fog {
    position: absolute;
    left: -35vw; top: -30vh; width: 170vw; height: 160vh;
    background: url("../img/motion/fog-1.webp") center / cover no-repeat;
    will-change: transform, opacity;
    animation: co-fog-a var(--co-t) var(--co-ease) both;
}
#cold-open .co-fog.b { background-image: url("../img/motion/fog-2.webp"); animation-name: co-fog-b; }
#cold-open .co-fog.c { background-image: url("../img/motion/fog-2.webp"); background-position: 35% 65%; animation-name: co-fog-c; }
@keyframes co-fog-a {
    0%   { opacity: .66; transform: translate(-1%, 5%)  scale(1.0); }
    100% { opacity: 0;   transform: translate(2%, -12%) scale(1.26); }
}
@keyframes co-fog-b {
    0%   { opacity: .56; transform: translate(2%, 7%)   scale(1.02) rotate(.6deg); }
    100% { opacity: 0;   transform: translate(-2%, -14%) scale(1.3) rotate(-.4deg); }
}
@keyframes co-fog-c {
    0%   { opacity: .4;  transform: translate(0, 9%)    scale(1.06); }
    100% { opacity: 0;   transform: translate(1%, -16%) scale(1.34); }
}

/* a cold tint at the edges that simply thins with everything else — no beat of its own */
#cold-open .co-frost {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 68% at 50% 50%, rgba(214,232,255,0) 50%, rgba(214,232,255,.22) 78%, rgba(214,232,255,.5) 100%);
    animation: co-frost var(--co-t) var(--co-ease) both;
}
@keyframes co-frost {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* the door-light sliver from v1/v2 read as a separate event — retired */
#cold-open .co-door { display: none; }

@media (prefers-reduced-motion: reduce) {
    #cold-open { display: none !important; }
    html.cold-open-on body > *:not(#cold-open) { animation: none !important; }
}