/* ==========================================================================
   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;
}

#intro-title {
    font-family: 'SpecialElite', sans-serif;
    color: var(--op-cream);
    font-size: clamp(24px, 6vw, 58px);
}

body.intro-lock {
    overflow: hidden;
}

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