/* ═══════════════════════════════════════════════════════════════
 *  Login Transition — White Frost Focus
 *
 *  Companion styles for js/login-transition.js. The JS module
 *  injects two elements at runtime (.lt-veil and .lt-wordmark)
 *  and toggles state classes on them; this stylesheet supplies
 *  all the visuals.
 *
 *  Phase 1 — veil bg 0 → 1 (white wash over dark login)        480ms
 *  Phase 2 — frost armed (invisible under opaque white) +
 *            wordmark presents on a quiet white frame          ~1.2s
 *  Phase 3 — veil bg 1 → 0 + backdrop-blur 32 → 0
 *            (dashboard "comes into focus")                    ~680ms
 *  Total                                                       ~2500ms
 * ═══════════════════════════════════════════════════════════════ */

/* ── Veil overlay ─────────────────────────────────────────────── */
/* Single fixed rectangle. backdrop-filter applies blur to whatever
   sits behind, so the dashboard DOM never gets filter:blur applied
   to it directly — the codebase has had 30s+ GPU stalls when blur
   is applied to the content tree (see comments in earlier versions
   of login-transition.js). The veil is the cheap, safe way to do it.

   v1.5.88: veil tint changed from pure-white (#fff) to warm-off-white
   (#fafaf7) to match the splash brand canvas. Aligns with the demo
   reference. All three states (default / whiten / clear) carry the
   same rgb so transitions only animate alpha — no hue shift mid-fade. */
.lt-veil {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(250, 250, 247, 0);
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
    pointer-events: none;
    will-change: background, backdrop-filter;
}

/* Phase 1 — dark login dissolves into warm off-white (#fafaf7) */
.lt-veil.whiten {
    /* v1.4.4: 480 → 180ms (see login-transition.js COLD timeline change). */
    transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(250, 250, 247, 1);
}

/* Phase 2 (instant) — load blur while bg is fully opaque, so the
   blur swap is invisible to the eye. */
.lt-veil.frost {
    -webkit-backdrop-filter: blur(32px);
            backdrop-filter: blur(32px);
}

/* Phase 3 — frost lifts: bg 1 → 0, blur 32 → 0. Slightly slower
   than the whiten so the dashboard eases into focus. */
.lt-veil.clear {
    /* v1.4.4: 560/680 → 200/240ms. */
    transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-backdrop-filter 240ms cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 240ms cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(250, 250, 247, 0);
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
}

/* ── Wordmark host (SVG rolling logo container) ───────────────── */
/* v1.5.79+: the PNG wordmark + CSS fade were replaced by an inline
   SVG logo that rolls in from the right like a wheel. Markup +
   physics live in js/lt-logo-roll.js; this stylesheet only sizes
   and centers the host element. The SVG fills the host
   (width:100%) and the rolling animation is JS-driven (RAF).

   .show toggles opacity 0→1 instantly — the roll animation handles
   its own visual progression. opacity:0 default avoids a single-
   frame flash of the static SVG (blob at start position) before
   the JS RAF loop has a chance to apply frame[0]. */
.lt-wordmark {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 99999;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    /* Desktop splash size: matches the reference demo
       (vita-logo-roll.html stage = min(95vw, 1100px)). Gives the
       wordmark a full presence centered on the warm-off-white canvas.
       v1.5.88 bump from min(540px, 72vw) per design feedback. */
    width: min(1100px, 95vw);
    will-change: opacity;
}

.lt-wordmark svg {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

.lt-wordmark.show {
    opacity: 1;
}