/*
 * Cinematic intro (docs/02 §9, D-072): a narrative screen on paper, then
 * the supplied portrait film on black, then the homepage.
 *
 * Visibility is driven by classes on <html>:
 *   .ru-intro-active  set before first paint by the head script when the
 *                     intro is due; without it (no JS, not due, storage
 *                     blocked) the overlay is never displayed.
 *   .ru-intro-ready   set by intro.js once it has taken control. Until then
 *                     a fail-safe hides the overlay after 12 s, so a script
 *                     that never loads cannot hold a visitor on the intro.
 * The overlay's own states (data-intro-state) are set by intro.js:
 *   screen → film → leaving.
 *
 * Contrast (paper #FCFAF6): ochre title 3.23:1 (large display text only),
 * ink body 16.93:1, taupe labels 5.95:1; the ENTER label is ink.
 */

.ru-intro {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    overflow: hidden auto;
    overscroll-behavior: contain;
    background: var(--ru-neutral-50);
    color: var(--ru-color-text);
}

.ru-intro-active .ru-intro {
    display: block;
}

.ru-intro-active:not(.ru-intro-ready) .ru-intro {
    animation: ru-intro-failsafe 0s linear 12s forwards;
}

@keyframes ru-intro-failsafe {
    to {
        visibility: hidden;
        pointer-events: none;
    }
}

/* The page beneath does not scroll while the intro owns the screen. */
.ru-intro-active.ru-intro-ready,
.ru-intro-active.ru-intro-ready body {
    overflow: hidden;
}

.ru-intro:focus {
    outline: none;
}

.ru-intro :focus-visible {
    outline: 2px solid var(--ru-black);
    outline-offset: 3px;
}

/* Narrative screen. A hairline frame inset from the edges gives the page
   the feel of a mounted sheet; the content sits centred within it. */

.ru-intro__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    transition: opacity 0.6s var(--ru-ease), visibility 0s linear 0s;
}

.ru-intro__screen::before {
    content: "";
    position: absolute;
    inset: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    border: 1px solid var(--ru-neutral-300);
    pointer-events: none;
}

.ru-intro__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ru-space-4);
    padding: var(--ru-space-2) var(--ru-space-3) 0 var(--ru-space-5);
}

.ru-intro__name {
    font-size: var(--ru-fs-50);
    font-weight: 600;
    letter-spacing: var(--ru-tracking-label);
    text-transform: uppercase;
    color: var(--ru-color-muted);
}

/* Subtle by design: small, muted, no frame — it must not compete with ENTER. */
.ru-intro__skip {
    min-height: 44px;
    padding: var(--ru-space-2) var(--ru-space-3);
    border: 0;
    background: none;
    color: var(--ru-color-muted);
    font-family: var(--ru-font-text);
    font-size: var(--ru-fs-50);
    font-weight: 600;
    letter-spacing: var(--ru-tracking-label);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    transition: color var(--ru-duration-ui) var(--ru-ease), text-decoration-color var(--ru-duration-ui) var(--ru-ease);
}

.ru-intro__skip:hover {
    color: var(--ru-color-text);
    text-decoration-color: var(--ru-color-accent);
}

.ru-intro__content {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
    padding: clamp(2rem, 1rem + 4vh, 4.5rem) clamp(1.25rem, 0.5rem + 3vw, 3rem);
    text-align: center;
}

.ru-intro__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-weight: 400;
}

.ru-intro__eyebrow {
    margin-bottom: var(--ru-space-3);
    padding-left: 0.5em; /* balances the trailing letter-spacing */
    font-family: var(--ru-font-text);
    font-size: var(--ru-fs-100);
    font-weight: 400;
    letter-spacing: 0.5em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ru-color-muted);
}

/* The one place the brand ochre is set as text on a light ground: display
   size only (≥ 2.75 rem), where 3.23:1 meets the large-text threshold. */
.ru-intro__title {
    font-family: var(--ru-font-display);
    font-size: clamp(2.75rem, 1.6rem + 5.4vw, 6.25rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--ru-ochre);
}

.ru-intro__title::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 1px;
    margin: clamp(1.25rem, 1rem + 1vw, 2rem) auto 0;
    background: var(--ru-ochre);
}

.ru-intro__body {
    max-width: 36rem;
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    font-size: var(--ru-fs-200);
    line-height: 1.75;
    color: var(--ru-neutral-700);
    text-wrap: pretty;
}

.ru-intro__body p {
    margin: 0 0 var(--ru-space-4);
}

.ru-intro__closing {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    max-width: 30rem;
    margin: var(--ru-space-3) 0 0;
    font-family: var(--ru-font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ru-color-text);
    text-wrap: balance;
}

/* ENTER: the prominent action. A double hairline frame in ochre (non-text,
   decorative) around an ink label; hover fills ochre with black text. */
.ru-intro__enter {
    position: relative;
    min-width: min(100%, 15rem);
    min-height: 3.75rem;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    padding: var(--ru-space-3) var(--ru-space-7);
    border: 1px solid var(--ru-ochre);
    background: transparent;
    color: var(--ru-color-text);
    font-family: var(--ru-font-text);
    font-size: var(--ru-fs-100);
    font-weight: 600;
    letter-spacing: 0.5em;
    text-indent: 0.5em; /* balances the trailing letter-spacing */
    text-transform: uppercase;
    transition: background-color var(--ru-duration-ui) var(--ru-ease), color var(--ru-duration-ui) var(--ru-ease);
}

.ru-intro__enter::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--ru-ochre);
    pointer-events: none;
    transition: border-color var(--ru-duration-ui) var(--ru-ease);
}

.ru-intro__enter:hover {
    background: var(--ru-ochre);
    color: var(--ru-black);
}

.ru-intro__enter:hover::before {
    border-color: var(--ru-black);
}

/* Film: black stage, the whole portrait frame visible (contain) at every
   size, so neither the artwork nor the film's own lettering (which runs
   almost edge to edge) is ever cropped. On portrait phones the 1:2 film
   fills the width with at most a thin band above and below. Hidden until the video is actually
   playing, so a failed load never shows a broken element. */

.ru-intro__film {
    position: fixed;
    inset: 0;
    visibility: hidden;
    background: var(--ru-black);
    opacity: 0;
    transition: opacity 0.6s var(--ru-ease), visibility 0s linear 0.6s;
}

.ru-intro__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s var(--ru-ease);
}

.ru-intro__video.is-playing {
    opacity: 1;
}

.ru-intro[data-intro-state="film"],
.ru-intro[data-intro-state="leaving"] {
    overflow: hidden;
    background: var(--ru-black);
}

.ru-intro[data-intro-state="film"] .ru-intro__screen,
.ru-intro[data-intro-state="leaving"] .ru-intro__screen {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.6s var(--ru-ease), visibility 0s linear 0.6s;
}

.ru-intro[data-intro-state="film"] .ru-intro__film,
.ru-intro[data-intro-state="leaving"] .ru-intro__film {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.6s var(--ru-ease) 0.3s, visibility 0s linear 0s;
}

/* Arrival: the screen's parts settle in once, in sequence (about 1.4 s in
   all). Skipped entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .ru-intro-ready .ru-intro__heading,
    .ru-intro-ready .ru-intro__body,
    .ru-intro-ready .ru-intro__closing,
    .ru-intro-ready .ru-intro__enter {
        animation: ru-intro-arrive 0.9s var(--ru-ease-out) both;
    }

    .ru-intro-ready .ru-intro__body {
        animation-delay: 0.15s;
    }

    .ru-intro-ready .ru-intro__closing {
        animation-delay: 0.3s;
    }

    .ru-intro-ready .ru-intro__enter {
        animation-delay: 0.45s;
    }
}

@keyframes ru-intro-arrive {
    from {
        opacity: 0;
        transform: translate3d(0, 0.75rem, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Short screens (landscape phones, small laptops): tighter rhythm so the
   whole text and ENTER fit with less scrolling. */
@media (max-height: 820px) and (min-width: 576px) {
    .ru-intro__content {
        padding-block: var(--ru-space-5);
    }

    .ru-intro__title {
        font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);
    }

    .ru-intro__body {
        margin-top: var(--ru-space-5);
        line-height: 1.65;
    }

    .ru-intro__enter {
        margin-top: var(--ru-space-6);
    }
}

/* Phones: the whole screen, ENTER included, fits a 360 × 780 viewport
   without scrolling. The vertical rhythm scales with the viewport height
   rather than using the desktop's fixed steps. */
@media (max-width: 575.98px) {
    .ru-intro__bar {
        padding-left: var(--ru-space-4);
        padding-right: var(--ru-space-2);
    }

    .ru-intro__content {
        padding-block: clamp(1rem, 0.25rem + 2.5vh, 2rem);
    }

    .ru-intro__eyebrow {
        margin-bottom: var(--ru-space-2);
        letter-spacing: 0.4em;
        padding-left: 0.4em;
    }

    .ru-intro__body {
        margin-top: clamp(1.25rem, 0.5rem + 2vh, 1.75rem);
        font-size: var(--ru-fs-100);
        line-height: 1.65;
    }

    .ru-intro__body p {
        margin-bottom: var(--ru-space-3);
    }

    .ru-intro__closing {
        margin-top: var(--ru-space-2);
        line-height: 1.3;
    }

    .ru-intro__enter {
        width: 100%;
        max-width: 18rem;
        min-height: 3.5rem;
        margin-top: clamp(1.5rem, 0.75rem + 2vh, 2rem);
    }
}