/* =====================================================================
   Woulfe's K9 — Preloader
   Depends on tokens.css.

   Full-screen black ground, big 0–100% counter, progress bar along the
   bottom. Ported from the Sketch Creative build and re-cut for this system:
   the original ran a pale wash and a purple bar, neither of which exists
   here — on this palette the bar is simply white, because contrast is the
   only accent there is.

   The overlay is display:none by default and only revealed by
   html.wk9pl-on, which an inline head script adds. That ordering is
   deliberate: with JS disabled the class never lands, so the overlay never
   shows and cannot trap anyone.
   ===================================================================== */

.wk9-preloader {
    /* Counter and bar share one inset so they align to the same left edge and
       float clear of the corners — a bar flush to the bottom edge reads as
       browser chrome rather than as part of the page. */
    --wk9pl-inset-x: 5%;
    --wk9pl-inset-y: 5%;
    --wk9pl-bar-h: 5px;
    --wk9pl-bar-gap: 28px;
    display: none;
}

html.wk9pl-on .wk9-preloader {
    position: fixed;
    inset: 0;
    z-index: var(--k9-z-app);   /* above the header, chat widget, cookie bar */
    display: block;
    background-color: var(--k9-black);
    /* The same radial the hero falls back to, so the loader and the page
       underneath are the same surface rather than two different blacks. */
    background-image: radial-gradient(120% 90% at 50% 0%, var(--k9-ink-800) 0%, var(--k9-black) 62%);
    -webkit-backdrop-filter: blur(30px) saturate(140%);
    backdrop-filter: blur(30px) saturate(140%);
    color: var(--k9-text);
    font-family: var(--k9-font-body);
    opacity: 1;
    transition:
        opacity 0.55s var(--k9-ease),
        -webkit-backdrop-filter 0.55s var(--k9-ease),
        backdrop-filter 0.55s var(--k9-ease);
}

/* Lift: the ground fades and the glass behind it clears at the same time, so
   the hero resolves into focus rather than the overlay simply vanishing. */
html.wk9pl-on .wk9-preloader.is-done {
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(0) saturate(100%);
    backdrop-filter: blur(0) saturate(100%);
}

/* Scroll lock while the loader is up. */
html.wk9pl-lock,
html.wk9pl-lock body {
    overflow: hidden !important;
}

.wk9-preloader__inner {
    position: absolute;
    left: var(--wk9pl-inset-x);
    bottom: calc(var(--wk9pl-inset-y) + var(--wk9pl-bar-h) + var(--wk9pl-bar-gap));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--k9-space-2);
    transition: opacity 0.4s var(--k9-ease), transform 0.55s var(--k9-ease);
}

.wk9-preloader.is-done .wk9-preloader__inner {
    opacity: 0;
    transform: translateY(10px);
}

.wk9-preloader__count {
    display: flex;
    align-items: baseline;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: clamp(84px, 17vw, 260px);
    line-height: 0.82;
    letter-spacing: var(--k9-tracking-display);
    color: var(--k9-text);
}

/* Tabular figures so the digits do not jitter as they count. No reserved
   width — that leaves the % stranded away from a two-digit number, and the
   one-off nudge at 100 is far less noticeable than a permanent gap. */
.wk9-preloader__num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.wk9-preloader__pct {
    font-size: 0.34em;
    color: var(--k9-text-muted);
}

.wk9-preloader__caption {
    margin: 0;
    padding-left: 0.15em;
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
}

/* Bar floating above the bottom edge, inset both sides, directly under the
   counter it shares a left edge with. `width` is deliberately left alone —
   setting it alongside left/right would win over the right inset and stretch
   the track back to full bleed. */
.wk9-preloader__track {
    position: absolute;
    left: var(--wk9pl-inset-x);
    right: var(--wk9pl-inset-x);
    bottom: var(--wk9pl-inset-y);
    height: var(--wk9pl-bar-h);
    border-radius: var(--k9-radius-pill);
    background: var(--k9-line);
    /* Rounds the ends of the fill too, rather than the fill carrying its own
       radius — the scaleX driving it would squash that into an oval. */
    overflow: hidden;
}

.wk9-preloader__bar {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--k9-action);
}

/* Only the closing snap to 100% is transitioned — the run itself is driven
   frame by frame, where a transition would just add lag. */
.wk9-preloader.is-finishing .wk9-preloader__bar {
    transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Thinner bar and a tighter gap on phones. Set on the vars so the counter's
   offset follows the bar up rather than drifting away from it. */
@media (max-width: 768px) {
    .wk9-preloader {
        --wk9pl-bar-h: 3px;
        --wk9pl-bar-gap: 20px;
    }
}

/* Belt and braces — the head script already skips the loader entirely here. */
@media (prefers-reduced-motion: reduce) {
    html.wk9pl-on .wk9-preloader { display: none; }
    html.wk9pl-lock,
    html.wk9pl-lock body { overflow: auto !important; }
}

@media print {
    .wk9-preloader { display: none !important; }
}