/* Scroll timing and artwork alignment are intentionally adjustable here. */
:root {
    --intro-scroll-height: 300vh;
    --intro-viewport-height: 100vh;
    --intro-fade-start: 0.90;
    --intro-fade-end: 1;
    --intro-logo-appear-start: 0.91;
    --intro-logo-flight-start: 0.95;
    --intro-logo-handoff-start: 0.995;
    --intro-logo-flight-end: 1;
    --intro-logo-desktop-x: 50%;
    --intro-logo-desktop-y: 50%;
    --intro-logo-desktop-size: 53vh;
    --intro-logo-mobile-x: 50%;
    --intro-logo-mobile-y: 50%;
    --intro-logo-mobile-size: min(54vh, 120vw);
    --intro-logo-start-x: var(--intro-logo-desktop-x);
    --intro-logo-start-y: var(--intro-logo-desktop-y);
    --intro-logo-start-size: var(--intro-logo-desktop-size);
    --header-logo-mobile-size: 92px;
    --intro-hint-delay: 700ms;
}

@supports (height: 100dvh) {
    :root { --intro-viewport-height: 100dvh; }
}

.intro-scroll {
    position: relative;
    z-index: 10000;
    flex: none;
    width: 100%;
    height: var(--intro-scroll-height);
    /* The real headers/nav/hero start underneath the last sticky viewport. */
    margin: 0 0 calc(-1 * var(--intro-viewport-height));
    padding: 0;
    background: transparent;
    overflow-anchor: none;
    pointer-events: none;
}

.intro-scroll[hidden] {
    display: none !important;
    /* Keep the existing page-position helper aware of the removed layout footprint. */
    height: calc(var(--intro-scroll-height) - var(--intro-viewport-height));
}

.intro-scroll__stage {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--intro-viewport-height);
    overflow: hidden;
    background: transparent;
    pointer-events: auto;
    touch-action: pinch-zoom;
    overscroll-behavior: contain;
}

.intro-scroll__poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.intro-scroll__poster img { width: 100%; height: 100%; object-fit: cover; }
.intro-scroll.is-video-ready .intro-scroll__poster,
.intro-scroll.is-complete .intro-scroll__poster { visibility: hidden; }

.intro-scroll.is-complete .intro-scroll__stage {
    pointer-events: none;
}

.intro-scroll.is-complete .intro-scroll__close {
    visibility: hidden;
}

.intro-scroll.is-resetting .intro-scroll__video { visibility: hidden; }

/* Intro's scroll spacer must not offset the existing hero parallax at handoff. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .intro-is-active #hero-slider .hero-slide > a > img {
        transform: translate3d(0, 0, 0) scale(1.045) !important;
    }
    .intro-is-active #hero-slider .hero-slide > a > .relative.z-10 {
        transform: translate3d(0, 0, 0) !important;
    }
}

.intro-scroll__video {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    object-fit: cover;
    pointer-events: none;
    background: #08090b;
    will-change: opacity;
}

.intro-scroll__flying-logo {
    position: absolute;
    z-index: 2;
    left: var(--intro-logo-start-x);
    top: var(--intro-logo-start-y);
    width: var(--intro-logo-start-size);
    height: var(--intro-logo-start-size);
    object-fit: cover;
    clip-path: circle(45% at 50% 50%);
    transform-origin: 0 0;
    transform: translate3d(-50%, -50%, 0);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.intro-scroll__close {
    position: absolute;
    z-index: 3;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    display: grid;
    place-items: center;
    min-width: 48px;
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 26px;
    background: rgba(8, 9, 11, 0.7);
    color: #fff;
    font: 500 14px/1.4 'Montserrat', sans-serif;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.intro-scroll__close:hover {
    background: rgba(8, 9, 11, 0.95);
}

.intro-scroll__close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

/* Passive guidance: CSS handles the delayed reveal and the indicator's motion. */
.intro-scroll__hint {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: max(clamp(32px, 7vh, 72px), env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    color: rgba(255, 250, 239, 0.9);
    font: 500 14px/1.5 'Montserrat', sans-serif;
    text-align: center;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
    opacity: 1;
    pointer-events: none;
    transition: opacity 240ms ease;
}
.intro-scroll__hint-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: inherit;
    opacity: 0;
    animation: introHintReveal 320ms ease var(--intro-hint-delay) forwards;
}
.intro-scroll__hint.is-dismissed {
    opacity: 0;
}
.intro-scroll.is-complete .intro-scroll__hint { visibility: hidden; }
.intro-scroll__hint-mouse {
    position: relative;
    width: 24px;
    height: 38px;
    border: 1.5px solid rgba(255, 250, 239, 0.95);
    border-radius: 13px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.intro-scroll__hint-mouse::before {
    content: '';
    position: absolute;
    top: 7px;
    left: calc(50% - 1.5px);
    width: 3px;
    height: 6px;
    border-radius: 3px;
    background: #fffaf0;
    animation: introHintWheel 1.8s ease-in-out infinite;
}
.intro-scroll__hint-gesture,
.intro-scroll__hint-mobile { display: none; }
@keyframes introHintReveal { to { opacity: 1; } }
@keyframes introHintWheel {
    0%, 15% { transform: translateY(0); opacity: 1; }
    75%, 100% { transform: translateY(13px); opacity: 0; }
}
@keyframes introHintSwipe {
    0%, 15% { transform: translateY(4px); opacity: 0.55; }
    65%, 100% { transform: translateY(-4px); opacity: 1; }
}
@media (max-width: 768px) {
    .intro-scroll__hint { font-size: 13px; gap: 10px; }
    .intro-scroll__hint-mouse,
    .intro-scroll__hint-desktop { display: none; }
    .intro-scroll__hint-mobile { display: inline; }
    .intro-scroll__hint-gesture {
        position: relative;
        display: block;
        width: 20px;
        height: 34px;
        animation: introHintSwipe 1.8s ease-in-out infinite;
    }
    .intro-scroll__hint-gesture::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 9px;
        width: 2px;
        height: 28px;
        border-radius: 2px;
        background: #fffaf0;
    }
    .intro-scroll__hint-gesture::after {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 12px;
        height: 12px;
        border-top: 2px solid #fffaf0;
        border-left: 2px solid #fffaf0;
        transform: rotate(45deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .intro-scroll__hint { transition: none; }
    .intro-scroll__hint-content { animation-duration: 1ms; }
    .intro-scroll__hint-mouse::before,
    .intro-scroll__hint-gesture { animation: none; }
}

/* Bigger marks retain compact header rows; only the artwork hangs below them. */
body > header,
html.pm-page-scrolled body > header.pm-site-header {
    overflow: visible;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    transition: none !important;
}

body > header:not(.mobile-header) {
    position: relative;
    z-index: 60;
}

@media (max-width: 768px) {
    :root {
        --intro-logo-start-x: var(--intro-logo-mobile-x);
        --intro-logo-start-y: var(--intro-logo-mobile-y);
        --intro-logo-start-size: var(--intro-logo-mobile-size);
    }
    body > .mobile-header,
    html.pm-page-scrolled body > .mobile-header.pm-site-header {
        display: block !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    body > header:not(.mobile-header),
    body > .clay-site-nav { display: none !important; }
    .mobile-logo-link {
        position: relative;
        width: var(--header-logo-mobile-size);
        height: 38px;
        overflow: visible;
    }
    body > header .mobile-logo {
        position: absolute;
        top: 18px;
        width: var(--header-logo-mobile-size) !important;
        height: var(--header-logo-mobile-size) !important;
        transform: none !important;
    }
    .mobile-address {
        max-width: calc(50% - var(--header-logo-mobile-size) / 2 - 14px);
        text-align: left;
        font-size: 9.5px;
    }
}