/* scroll-engine.css v3.2 — required layout for [data-frames] sections + helpers. Style beats per brand elsewhere. */
/* The engine animates scrolling itself: native smooth scrolling fights it (sluggish, jumpy) */
html.js { scroll-behavior: auto !important; }
[id] { scroll-margin-top: var(--header-h, 0px); }
.scrub { position: relative; height: var(--scrub-length, 400vh); background: var(--scrub-bg, #000); }
.scrub__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.scrub__poster, .scrub__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.js .scrub__canvas { opacity: 0; transition: opacity .3s; }
.scrub__shade { position: absolute; inset: 0; pointer-events: none; }
.scrub__beats { position: absolute; inset: 0; pointer-events: none; }
.beat { position: absolute; max-width: min(760px, calc(100% - 32px)); will-change: opacity, transform; }
.js .beat { opacity: 0; visibility: hidden; }
.beat a, .beat button { pointer-events: auto; }

/* Beat placement relative to the protected subject (data-safe). The engine sets --safe-* and --media-* in px. */
.beat--center { left: 0; right: 0; margin-inline: auto; text-align: center; }
.beat--above-safe { bottom: calc(100% - var(--safe-top, 30%) + clamp(12px, 2vh, 28px)); }
.beat--below-safe { top: calc(100% - var(--safe-bottom, 15%) + clamp(12px, 2vh, 28px)); }
.beat--top { top: calc(var(--header-h, 0px) + clamp(16px, 4vh, 48px)); }
.beat--bottom { bottom: max(clamp(16px, 5vh, 56px), env(safe-area-inset-bottom)); }
.beat--left { left: clamp(16px, 5vw, 96px); }
.beat--right { right: clamp(16px, 5vw, 96px); text-align: right; }

/* When the frame is letterboxed (narrow phones) the poster must match the canvas fit */
@media (max-width: 768px) { .scrub[data-safe] .scrub__poster { object-fit: contain; } }

/* drag-driven scrub: a normal block, not sticky */
.scrub[data-drive="drag"] { height: auto; aspect-ratio: var(--scrub-ratio, 16 / 9); overflow: hidden;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scrub[data-drive="drag"].is-dragging { cursor: grabbing; }
.scrub[data-drive="drag"] .scrub__stage { position: absolute; inset: 0; height: 100%; }
.scrub[data-drive="drag"]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.scrub__hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); transition: opacity .4s; pointer-events: none; }
.scrub.is-touched .scrub__hint { opacity: 0; }
@media (max-width: 768px) { .scrub { height: var(--scrub-length-mobile, var(--scrub-length, 350vh)); } }

/* Frosted-glass header: <header class="glass-header" data-header> */
.glass-header { position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 1px 16px rgba(0, 0, 0, .05); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-header { background: rgba(255, 255, 255, .92); } }

/* reveal-on-scroll */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }