/* ============================================================
   Intro hook — wave / land / air / space video loop
   Not full screen: the site peeks below to invite scrolling.
   ============================================================ */

.intro {
    position: relative;
    z-index: 4;
    height: 82svh;
    min-height: 480px;
    overflow: hidden;
    background: var(--bg);
}

.intro-sticky {
    position: absolute;
    inset: 0;
}

.intro-videos {
    position: absolute;
    inset: 0;
}

.intro-videos video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.18s ease;
    /* very slight vintage grade */
    filter: sepia(0.22) saturate(0.82) contrast(1.05) brightness(0.97);
}

.intro-videos video.no-grade {
    filter: none;
}

.intro-videos video.on {
    opacity: 1;
}

/* keep text readable over footage; fade bottom into the page bg */
.intro-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(110% 90% at 50% 50%, rgba(5, 6, 8, 0.18) 30%, rgba(5, 6, 8, 0.62) 100%),
        linear-gradient(to bottom, rgba(5, 6, 8, 0.42), transparent 30%, transparent 60%, var(--bg) 100%);
}

.intro-copy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.4rem;
    pointer-events: none;
}

.intro-line {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 5.2vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
    max-width: 17em;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}