/* ============================================================================
   loader.css — the full-screen loading state.

   Shown until the hero's worth of frames has arrived, then it settles and
   dissolves. Markup lives in index.html so it paints before any JS runs;
   js/loader.js only fills in the animation.
   ========================================================================== */

.loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050d1f;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nothing scrolls behind the loader. */
body.is-loading { overflow: hidden; }

/* Removed from the flow once it has faded, so it can never trap clicks. */
.loader.is-gone { opacity: 0; pointer-events: none; }
.loader.is-removed { display: none; }

.loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    will-change: transform, opacity;
}

.loader__inner svg { display: block; overflow: visible; width: min(520px, 78vw); height: auto; }

/* ─────────────────────  split-flap percentage  ─────────────────────── */
.flaps { display: flex; gap: 6px; direction: ltr; }

.flapcell {
    position: relative;
    overflow: hidden;               /* the digits are clipped to the cell */
    width: 42px;
    height: 60px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.flapcell span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}
.flapcell--pct { margin-inline-start: 4px; }
.flapcell--pct span { opacity: 0.55; }

/* A climb rather than a flip: the digits change fast enough that a rotateX
   turnover reads as a smear, while a short vertical slide stays legible.
   They rise from below, matching a counter that is going up. */
@keyframes digit-in {
    from { transform: translateY(100%);  opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
@keyframes digit-out {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(-100%); opacity: 0; }
}
.flapcell span.is-in  { animation: digit-in  190ms cubic-bezier(0.3, 0.9, 0.35, 1); }
.flapcell span.is-out { animation: digit-out 190ms cubic-bezier(0.3, 0.9, 0.35, 1) forwards; }

@media (max-width: 600px) {
    .flapcell { width: 34px; height: 48px; font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .loader { transition: none; }
    .flapcell span.is-in, .flapcell span.is-out { animation: none; }
}