/* ==========================================================================
   Hero Transition — Click-triggered cinematic hero-to-header animation
   ========================================================================== */

/* ── Scroll Lock ─────────────────────────────────────────────────────────── */

body.scroll-locked {
    overflow: hidden;
}

html.lenis.scroll-locked,
html.lenis.scroll-locked body {
    overflow: hidden;
}

/* ── Clickable State ─────────────────────────────────────────────────────── */

.hero--clickable .hero-image-wrapper {
    cursor: pointer;
}

/* ── Site Content (hidden until transition completes) ────────────────────── */

.site-content {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    padding: var(--space-sm) var(--space-lg) 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px);
    transition:
        opacity 0.6s var(--ease-out-expo),
        transform 0.6s var(--ease-out-expo);
}

.site-content.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── Erasure Video (hidden by default, shown on tap) ─────────────────────── */

.hero-animation-erase {
    display: none;
}

/* ==========================================================================
   Phase 1 — Text Exit Keyframes
   ========================================================================== */

@keyframes strangerSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
}

@keyframes howdySlideOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
}

/* STRANGER exit — staggered 0–210ms */
.hero--exiting .stranger-letter {
    animation: strangerSlideOut 0.4s ease-in forwards !important;
}
.hero--exiting .stranger-s  { animation-delay: 0s !important; }
.hero--exiting .stranger-t  { animation-delay: 0.03s !important; }
.hero--exiting .stranger-r1 { animation-delay: 0.06s !important; }
.hero--exiting .stranger-a  { animation-delay: 0.09s !important; }
.hero--exiting .stranger-n  { animation-delay: 0.12s !important; }
.hero--exiting .stranger-g  { animation-delay: 0.15s !important; }
.hero--exiting .stranger-e  { animation-delay: 0.18s !important; }
.hero--exiting .stranger-r2 { animation-delay: 0.21s !important; }

/* HOWDY exit — staggered 100–300ms (100ms offset from STRANGER) */
.hero--exiting .howdy-letter {
    animation: howdySlideOut 0.4s ease-in forwards !important;
}
.hero--exiting .howdy-h { animation-delay: 0.1s !important; }
.hero--exiting .howdy-o { animation-delay: 0.15s !important; }
.hero--exiting .howdy-w { animation-delay: 0.2s !important; }
.hero--exiting .howdy-d { animation-delay: 0.25s !important; }
.hero--exiting .howdy-y { animation-delay: 0.3s !important; }

/* ==========================================================================
   Phase 3 — Image Transform (overlay fade only; scale is JS-driven)
   ========================================================================== */

.hero-rectangle.is-zoomed::after {
    opacity: 0;
    transition: opacity 0.8s var(--ease-out);
}

/* ==========================================================================
   Phase 4 — Hero Banner (final anchored state)
   Image stays at its natural size, anchored at the top.
   ========================================================================== */

.hero.hero--banner {
    min-height: auto;
    padding: 0 var(--space-lg);
    justify-content: flex-start;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* Mobile: banner stretches edge-to-edge */
@media (max-width: 480px) {
    .hero.hero--banner {
        max-width: 100vw;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        padding: 0;
    }

    .site-content {
        padding-left: 0;
        padding-right: 0;
    }
}

.hero.hero--banner .hero-stack {
    margin: 0;
    width: 100%;
    display: block;
}

.hero.hero--banner .hero-image-wrapper {
    width: 100%;
    height: 200px;
    aspect-ratio: auto;
    overflow: hidden;
    position: relative;
    background: var(--color-bg);
    border-radius: 0 0 2px 2px;
}

/* Enable background-position transition for the pan-down during Phase 4 */
.hero-rectangle.bg-locked::before {
    transition: background-position 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.hero.hero--banner .hero-rectangle {
    opacity: 1;
    animation: none;
    transform: scale(1.15);
    border-radius: 0;
}

.hero.hero--banner .hero-rectangle::before {
    border-radius: 0;
}

.hero.hero--banner .hero-howdy,
.hero.hero--banner .hero-stranger,
.hero.hero--banner .hero-animation {
    display: none;
}

/* Dream video — plays over the banner after transition */
.hero-dream {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.2);
    max-width: none;
    z-index: 3;
    pointer-events: none;
}

/* ==========================================================================
   Accessibility — Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .site-content {
        transition: none;
    }

    .hero--exiting .stranger-letter,
    .hero--exiting .howdy-letter {
        animation-duration: 0.01s !important;
        animation-delay: 0s !important;
    }

    .hero-rectangle.is-zoomed::after {
        transition: none;
    }
}