/* ═══════════════════════════════════════════
   graduation-glow — shell
   Base layout, the .screen system ReveelTransitions
   depends on, and the one shared button primitive.
   Palette/typography tokens live in css/tokens.css
   (overrides _shared/css/tokens-base.css).
   ═══════════════════════════════════════════ */

html, body {
    height: 100%;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 400;
}

/* ───── Screen system — required contract for ReveelTransitions ─────
   .screen / .screen.active are read by _shared/lib/transitions.js;
   changing these selectors breaks showScreen() for every screen. */
.screen {
    position: fixed;
    inset: 0;
    display: none;
    opacity: 0;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    transition: opacity 700ms var(--ease-silk);
}

.screen.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

/* ───── Entrance stagger ─────
   Every screen module ships exactly ONE direct child under `.screen`
   (its `.<id>-container`) by contract, so this `>` child-combinator
   stagger can only ever touch that single container element. It never
   reaches the elements individual screens toggle themselves further
   down the tree — memory-wall's footer/scroll-prompt, letter-reveal's
   signature, finale's own staggered line reveal all live one or more
   levels deeper and are untouched by this rule. The animation is
   opacity-only (no transform) so it never compounds with a screen's
   own nested motion (e.g. welcome's name rise, finale's line stagger). */
.screen.active > *:nth-child(1) { animation: main-screenReveal 700ms var(--ease-expo-out) 80ms both; }
.screen.active > *:nth-child(2) { animation: main-screenReveal 700ms var(--ease-expo-out) 160ms both; }
.screen.active > *:nth-child(3) { animation: main-screenReveal 700ms var(--ease-expo-out) 240ms both; }
.screen.active > *:nth-child(4) { animation: main-screenReveal 700ms var(--ease-expo-out) 320ms both; }
.screen.active > *:nth-child(5) { animation: main-screenReveal 700ms var(--ease-expo-out) 400ms both; }
.screen.active > *:nth-child(6) { animation: main-screenReveal 700ms var(--ease-expo-out) 480ms both; }

@keyframes main-screenReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ───── Shared button primitive (kept for parity with the rest of the
   template family; available to future screens) ───── */
.btn {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    padding: 0.85rem 1.75rem;
    border: none;
    border-radius: 999px;
    background: var(--accent-warm);
    color: var(--void);
    cursor: pointer;
    transition: transform 300ms var(--ease-back-out), box-shadow 300ms var(--ease-silk);
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px var(--accent-warm-glow-soft);
}

.hidden {
    display: none !important;
}

/* ───── Mobile ───── */
@media (max-width: 480px) {
    .screen {
        padding: 0;
    }
}