/* ==========================================================================
   HOMEPAGE INTRO OVERLAY (home.html only — see extra_css block)
   The overlay's own position/background/z-index/opacity, plus the
   html.no-intro and prefers-reduced-motion display:none overrides, are
   inlined in _intro_animation.html instead of living here — see the comment
   there. Everything below only matters after first paint.
   ========================================================================== */
#intro-overlay {
    /* No-JS / failure safety net: hides on its own even if intro.js never
       runs or its element lookup fails. intro.js overrides this (adds
       .intro-js, which disables this animation) in favor of its own
       identically-timed setTimeout cleanup once it runs successfully. */
    animation: intro-fallback-hide 0s linear 2s forwards;
}
#intro-overlay.intro-js {
    animation: none;
}

/* Twin of the fallback hide above, for the black canvas colour home.html
   inlines while the overlay is up. That rule keys on the overlay still being
   in the DOM, and the fallback hide only hides the overlay — it never
   removes it — so with no JS the canvas would stay black for good. Hand it
   back on the same timer the hide fires on (2s). Restores to --op-bg rather
   than transparent because html is where the page's base colour lives (see
   style.css) — handing back `transparent` would leave the canvas
   browser-default white, which is the flash this whole mechanism exists to
   prevent. .intro-js opts out: once intro.js is running it removes the
   overlay itself, which drops the rule exactly. */
html:has(#intro-overlay) {
    animation: intro-base-restore 0s linear 2s forwards;
}
html:has(#intro-overlay.intro-js) {
    animation: none;
}

@keyframes intro-base-restore {
    to {
        background-color: var(--op-bg);
    }
}

#intro-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

#intro-logo-img {
    height: 25vh;
    width: auto;
    display: block;
}

/* Holds the title's size so the tagline's em resolves against it. */
#intro-wordmark {
    font-size: clamp(24px, 6vw, 58px);
    text-align: center;
}

#intro-title {
    font-family: 'SpecialElite', sans-serif;
    color: var(--op-white);
}

/* Styled like the header's .logo-tagline. 0.298em is that rule's ratio, which
   makes the tagline as wide as the title; the 11px floor keeps it readable
   on phones, where the title bottoms out at 24px and 0.298em would be ~7px.
   There it runs wider than the title, still on one line. */
#intro-tagline {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-style: italic;
    color: var(--op-white);
    font-size: max(11px, 0.298em);
    letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: nowrap;
}

body.intro-lock {
    overflow: hidden;
}

@keyframes intro-fallback-hide {
    to {
        opacity: 0;
        visibility: hidden;
    }
}