/*
 * The Bag Archive — optional GSAP intro animation styles.
 *
 * Deliberately isolated in its own file, loaded only when the intro is
 * actually going to run for this visitor (see app/View/layouts/public.php
 * and assets/js/intro.js) — never bundled into app.css, so a returning
 * visitor who won't see the intro never even downloads this.
 *
 * #intro-overlay is display:none by default — it is ONLY ever revealed by
 * the tiny inline bootstrap script adding .intro-active to <html>, which
 * itself only happens after a successful storage/frequency check and a
 * reduced-motion check. If JavaScript never runs at all, this file alone
 * guarantees the overlay never appears and never blocks the page beneath it.
 */

#intro-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--colour-background);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-5);
    /* clip-path is the exit mechanism (assets/js/intro.js) — declared here
       so the browser has it composited from the start, not applied for
       the first time mid-animation. */
    clip-path: inset(0 0 0% 0);
}

html.intro-active #intro-overlay {
    display: flex;
}

#intro-symbol {
    max-width: min(220px, 40vw);
    max-height: 25vh;
    width: auto;
    height: auto;
    margin-bottom: var(--space-6);
    /* Initial state for the masked reveal — assets/js/intro.js overrides
       these via gsap.set() before animating, but declaring sane values
       here means there's no flash-of-full-size symbol if the GSAP-driven
       gsap.set() call is ever delayed by a tick. */
    opacity: 0;
}

#intro-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 46ch;
}

.intro-text-line {
    overflow: hidden; /* required for the clip-path/mask line reveal */
}

.intro-text-line span {
    display: block;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--colour-text);
    opacity: 0;
}

.intro-text-line:first-child span {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
}

#intro-skip {
    position: absolute;
    bottom: var(--space-5);
    right: var(--space-5);
    background: none;
    border: 1px solid var(--colour-line);
    color: var(--colour-text-soft);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
}

#intro-skip:hover,
#intro-skip:focus-visible {
    color: var(--colour-text);
    border-color: var(--colour-text);
    outline: none;
}

@media (max-width: 640px) {
    /* Designed independently for mobile, not just shrunk — per spec §11:
       smaller symbol ceiling, tighter text measure, skip control moved to
       avoid thumb-reach conflicts with any browser chrome at the bottom. */
    #intro-symbol {
        max-width: 55vw;
        max-height: 20vh;
        margin-bottom: var(--space-5);
    }
    .intro-text-line:first-child span { font-size: 1.25rem; }
    .intro-text-line span { font-size: 0.95rem; }
    #intro-skip {
        bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
        right: var(--space-4);
    }
}

/* Reduced motion: assets/js/intro.js's bootstrap check already skips
   adding .intro-active entirely for these visitors (the preferred
   approach per spec §7), so this is a pure CSS backstop in case that
   check is ever bypassed (e.g. a future preview-mode edge case) —
   belt-and-braces, not the primary mechanism. */
@media (prefers-reduced-motion: reduce) {
    html.intro-active #intro-overlay { display: none !important; }
}