/* The 3D "day" film is the hero. live.js drives the canvas, poster, chapter
   rail and grain; markup keeps the hooks it queries. */
.puck-film { position: relative; overflow: clip; background: var(--puck-hero-bg); }
[data-puck-day] [hidden] { display: none !important; }

.puck-day__stage { margin: 0; background: #283a3d; overflow: hidden; }
.puck-day__stage canvas,
.puck-day__poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.puck-day__poster { position: absolute; inset: 0; object-position: 50% 50%; }
.puck-day__stage canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; }
.puck-film.is-live .puck-day__stage canvas { opacity: 1; }
.puck-day__stage[data-grade=night] canvas,
.puck-day__stage[data-grade=night] .puck-day__poster { filter: saturate(.84) contrast(1.045) sepia(.055); }
.puck-day__grain,
.puck-day__vignette,
.puck-day__crt { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.puck-day__grain { opacity: .16; mix-blend-mode: soft-light; background-repeat: repeat; }
.puck-day__vignette { background: radial-gradient(ellipse at 53% 46%, transparent 22%, rgba(20, 17, 24, .23) 60%, rgba(12, 13, 20, .78) 100%); box-shadow: inset 0 0 48px rgba(8, 10, 16, .2); }
.puck-day__stage[data-grade=neutral] .puck-day__vignette { opacity: .55; }
.puck-day__crt { z-index: 3; opacity: .48; background: repeating-linear-gradient(0deg, rgba(6, 10, 17, .13) 0px, rgba(6, 10, 17, .13) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(255, 65, 50, .035) 0px, rgba(255, 65, 50, .035) 1px, rgba(70, 255, 155, .025) 1px, rgba(70, 255, 155, .025) 2px, rgba(75, 115, 255, .035) 2px, rgba(75, 115, 255, .035) 3px); mix-blend-mode: soft-light; }

/* Legibility blend: scrim under the copy, fade under the nav, into the next section. */
.puck-film__blend {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background:
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--puck-hero-bg) 92%, transparent) 74%, var(--puck-hero-bg) 90%),
        linear-gradient(180deg, color-mix(in srgb, var(--puck-hero-bg) 78%, transparent), transparent calc(var(--chrome-top) + var(--product-nav-height, 3.25rem) + 12px));
}

.puck-film__copy { position: relative; z-index: 5; }
.puck-film__rail { position: relative; z-index: 5; }

.puck-day__play { border: 1px solid color-mix(in srgb, var(--puck-ink) 35%, transparent); border-radius: 2px; background: color-mix(in srgb, var(--puck-hero-bg) 80%, transparent); color: var(--puck-ink); font: 10px var(--font-mono); padding: 10px 12px; cursor: pointer; }
.puck-film button:focus-visible { outline: 2px solid var(--puck-ink); outline-offset: 4px; }

/* Desktop: film is full-bleed; copy floats over the scrim, rail pins to the bottom. */
@media (min-width: 1000px) {
    .puck-film { min-height: 620px; height: auto; }
    .puck-film__stage { position: absolute; inset: 0; }

    .puck-film__blend {
        background:
            linear-gradient(180deg, transparent 56%, color-mix(in srgb, var(--puck-hero-bg) 55%, transparent) 70%, color-mix(in srgb, var(--puck-hero-bg) 92%, transparent) 80%, var(--puck-hero-bg) 92%),
            linear-gradient(90deg, var(--puck-hero-bg) 0, color-mix(in srgb, var(--puck-hero-bg) 80%, transparent) 30%, transparent 60%),
            linear-gradient(180deg, color-mix(in srgb, var(--puck-hero-bg) 78%, transparent), transparent calc(var(--chrome-top) + var(--product-nav-height, 3.25rem) + 12px));
    }
    .puck-film__wrap { min-height: min(100svh, 820px); display: flex; flex-direction: column; gap: 2rem; padding-top: calc(var(--chrome-top) + var(--product-nav-height, 3.25rem) + 2rem); }
    .puck-film__copy { max-width: 34rem; margin: auto 0; }
    .puck-film__rail { display: flex; align-items: flex-start; gap: 2rem; padding-bottom: 1.4rem; }
    .puck-film__now { flex: 0 0 auto; margin: 0; padding-top: .15rem; color: var(--puck-ink); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
    .puck-film__chapters { flex: 1; display: flex; gap: 1.5rem; min-width: 0; }
    .puck-film__chapters button { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; appearance: none; text-align: left; padding: 0 0 .8rem; border: 0; background: transparent; color: var(--puck-muted); cursor: pointer; }
    .puck-film__chapters button:disabled { cursor: default; }
    .puck-film__chapters .puck-eyebrow { color: inherit; font-size: .6rem; }
    .puck-film__chapters button[aria-pressed="true"] .puck-eyebrow { color: var(--puck-blue); }
    .puck-film__title { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3; color: var(--puck-ink); }
    .puck-film__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--puck-ink) 20%, transparent); }
    .puck-film__bar::after { content: ""; position: absolute; inset: 0; background: var(--puck-blue); transform: scaleX(var(--p, 0)); transform-origin: left center; }
    .puck-film__rail .puck-day__play { flex: 0 0 auto; margin-top: 0; }
}

/* Below desktop: widescreen film, copy in flow, full-width scene caption. */
@media (max-width: 999px) {
    .puck-film__stage { position: relative; aspect-ratio: 16/9; margin-top: calc(var(--chrome-top) + var(--product-nav-height, 3.25rem)); }
    .puck-day__poster { object-position: 50% 50%; }
    .puck-film__wrap { display: block; padding-bottom: 1rem; }
    .puck-film__copy { padding: .5rem 0; }
    .puck-film__now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .puck-film__rail { display: flex; align-items: flex-end; gap: .75rem; padding-top: 3rem; }
    .puck-film__chapters { position: static; flex: 1; display: flex; gap: .55rem; }
    .puck-film__chapters button { position: static; flex: 1; min-width: 0; min-height: 44px; appearance: none; text-align: left; padding: 0; border: 0; background: transparent; color: var(--puck-muted); cursor: pointer; }
    .puck-film__chapters .puck-eyebrow { display: none; }
    .puck-film__title { display: none; font-family: var(--font-display); font-size: .8rem; line-height: 1.25; color: var(--puck-ink); }
    .puck-film__chapters button[aria-pressed="true"] .puck-film__title { display: block; position: absolute; inset: 0 0 auto; }
    .puck-film__bar { display: block; position: relative; height: 2px; background: color-mix(in srgb, var(--puck-ink) 20%, transparent); }
    .puck-film__bar::after { content: ""; position: absolute; inset: 0; background: var(--puck-blue); transform: scaleX(var(--p, 0)); transform-origin: left center; }
    .puck-film__blend { background: linear-gradient(180deg, transparent 75%, var(--puck-hero-bg)); }
    .puck-film__rail .puck-day__play { flex: 0 0 auto; min-height: 44px; padding: 6px 10px; }
    [data-app="puck"] .puck-hero__body { max-width: 44ch; font-size: 1.1rem; }
    .puck-hero__actions { margin-top: 1.25rem; }
    .puck-hero h1 { margin-block: .65rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .puck-day__stage canvas { transition: none; }
}