/* LONE BREED — Splash
   Black field, wordmark, hairline. It shows for about a second and lifts.
   Motion is opt-out; see the head script in partials/header.php. */

.lb-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--lb-black, #000);
    display: grid;
    place-items: center;
    transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);

    /* Failsafe: if splash.js never runs — blocked, cached badly, JS off — the
       overlay must not trap the visitor behind a black screen. */
    animation: splashFailsafe 0.4s linear 3.6s forwards;
}

@keyframes splashFailsafe {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.lb-splash.is-gone {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.lb-splash-open { overflow: hidden; }

.lb-splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.5rem;
}

.lb-splash-name {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 5vw, 2.4rem);
    letter-spacing: 0.42em;
    text-indent: 0.42em;   /* balances the trailing letter-space */
    color: #fff;
    opacity: 0;
    animation: splashFade 0.9s var(--ease-out) 0.1s forwards;
}

/* Hairline draws out from the centre. */
.lb-splash-rule {
    width: 74px;
    height: 1px;
    background: var(--lb-gold);
    transform: scaleX(0);
    animation: splashRule 0.8s var(--ease-out) 0.45s forwards;
}

.lb-splash-tag {
    font-size: 0.58rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    color: var(--lb-gold);
    opacity: 0;
    animation: splashFade 0.8s var(--ease-out) 0.6s forwards;
}

@keyframes splashFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes splashRule {
    to { transform: scaleX(1); }
}

/* The mark lifts as the field clears, so the exit reads as one gesture. */
.lb-splash.is-gone .lb-splash-inner {
    transition: transform 0.6s var(--ease-out), opacity 0.4s ease;
    transform: translateY(-14px);
    opacity: 0;
}

/* ─────────────── Motion off ─────────────── */

html[data-motion="reduced"] .lb-splash { display: none; }
html[data-motion="reduced"] body.lb-splash-open { overflow: auto; }