/* The long section supplies the scroll distance; the stage stays on screen. */
.scroll-film {
    background: #0c110e;
    color: #fff;
    position: relative;
    z-index: 21;
}
.scroll-film.is-ready:not(.is-reduced) { height: 350vh; height: 350svh; }
.scroll-film__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 280px;
    overflow: hidden;
    display: grid;
    align-items: end;
    isolation: isolate;
}
.scroll-film__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(var(--film-blur, 0px));
    transform: scale(var(--film-scale, 1));
    z-index: -2;
}
.scroll-film__stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
    z-index: -1;
}
.scroll-film.is-ready .scroll-film__stage::before {
    background: none;
    pointer-events: none;
}
.scroll-film__copy { width: 100%; padding: clamp(24px, 6vw, 88px); }
.scroll-film__eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #bbd5c3; }
.scroll-film__title { font-size: clamp(40px, 7vw, 96px); font-weight: 500; line-height: 1.05; letter-spacing: -.05em; margin: 18px 0; }
.scroll-film__hint { color: #d2ddd5; font-size: 14px; max-width: 440px; }
.scroll-film__picker { display: inline-block; position: relative; margin-top: 24px; }
.scroll-film__picker span { display: block; border: 1px solid #ffffff60; border-radius: 30px; padding: 10px 22px; font-size: 14px; }
.scroll-film__picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.scroll-film__picker:focus-within span { outline: 2px solid #fff; outline-offset: 4px; }
.scroll-film__picker:hover span { background: #ffffff18; }
.scroll-film__skip { color: #fff; font-size: 13px; margin-left: 20px; text-underline-offset: 4px; }
.scroll-film__progress { display: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #ffffff20; }
.scroll-film__progress span { display: block; height: 100%; background: #b8e4c5; transform: scaleX(0); transform-origin: left; }
.scroll-film.is-ready .scroll-film__picker { display: none; }
.scroll-film.is-reduced .scroll-film__stage { position: relative; top: 0; }
.scroll-film.is-reduced .scroll-film__video { z-index: 0; }
.scroll-film.is-reduced .scroll-film__copy { padding: 28px; }
.scroll-film.is-reduced .scroll-film__progress { display: none; }
#after-scroll-film { scroll-margin-top: calc(var(--site-header-height, 88px) + 16px); }

/* Keep the exit and upload actions visible over every video frame. */
.scroll-film__skip {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin: 20px 0 0;
    padding: 12px 20px;
    border: 1px solid #bbd5c3;
    border-radius: 10px;
    background: #bbd5c3;
    color: #15291d;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}
.scroll-film__skip:hover { background: #d5ebdb; }
.scroll-film__skip:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.scroll-film__picker { margin-right: 16px; }
.scroll-film__picker span { background: #0c110ee6; border-radius: 10px; padding: 12px 20px; }

.scroll-film__skip { gap: 10px; }
.scroll-film__status { margin-top: 12px; color: #d2ddd5; font-size: 13px; }

/* Keep the film unobstructed; the sports introduction follows the video. */
.scroll-film.is-ready .scroll-film__copy { display: none; }
.scroll-film__story { padding: clamp(32px, 6vw, 88px); background: #0c110e; color: #fff; }
.scroll-film__story .scroll-film__title { font-size: clamp(36px, 5vw, 64px); }

/* The final frames blur behind the title as the scroll reaches the end. */
.scroll-film.is-ready:not(.is-reduced) .scroll-film__story {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    opacity: var(--story-opacity, 0);
    text-shadow: none;
}
.scroll-film__story[inert] { pointer-events: none; }

.scroll-film__story .scroll-film__skip { text-shadow: none; }

.scroll-film__title-card {
    width: min(100%, 720px);
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid #ffffff38;
    border-radius: 24px;
    background: rgb(10 18 13 / 88%);
    box-shadow: 0 16px 64px #0004;
    color: #fff;
}
.scroll-film__title-card .scroll-film__eyebrow { color: #d6f0df; font-size: 12px; font-weight: 650; }
.scroll-film__title-card .scroll-film__title { color: #fff; font-weight: 650; }
.scroll-film__title-card .scroll-film__hint { color: #eef5f0; font-size: 16px; max-width: none; }
.scroll-film__title-card .scroll-film__skip { background: #d4f3b6; color: #15291d; border-color: #d4f3b6; }
.scroll-film__title-card .scroll-film__skip:hover { background: #e5f9d3; }
@media (max-width: 600px) {
    .scroll-film.is-ready:not(.is-reduced) .scroll-film__story { padding: 20px; }
}

/* A quiet visual cue accompanies idle auto-scroll; user input stops it immediately. */
.scroll-film__guide:not([hidden]) { display: grid; }
.scroll-film__guide {
    position: absolute;
    bottom: max(28px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    place-items: center;
    width: 52px;
    height: 68px;
    border-radius: 28px;
    background: #0a120d99;
    color: #fff;
    pointer-events: none;
}
.scroll-film__guide path { animation: film-guide-flow 1.5s ease-in-out infinite; }
.scroll-film__guide path:nth-child(2) { animation-delay: .18s; }
.scroll-film__guide path:nth-child(3) { animation-delay: .36s; }
@keyframes film-guide-flow {
    0%, 100% { opacity: .25; transform: translateY(-2px); }
    50% { opacity: 1; transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-film__guide path { animation: none; } }