/* MAX scroll-scrub — styles for the vanilla engine. Scoped to .mxs so it can't clash with a theme. */
.mxs { position: relative; width: 100%; margin: 0; padding: 0; background: #000; }
.mxs-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; width: 100%; overflow: hidden; background: #000; }
.mxs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* captions / overlays: positioned over the canvas, faded by the engine (opacity only = no layout work) */
.mxs-step, [data-pos-step] { position: absolute; left: 16px; right: 16px; bottom: 14%; opacity: 0; visibility: hidden;
  color: #fff; text-align: center; pointer-events: none; will-change: opacity; }
.mxs-step h2 { margin: 0 0 .35em; font: 800 clamp(28px, 6vw, 64px)/1.05 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.mxs-step p { margin: 0 auto; max-width: 34em; font: 500 clamp(15px, 2.2vw, 19px)/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.mxs-step a { pointer-events: auto; }
.mxs-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; margin-top: 16px; border-radius: 999px;
  background: #fff; color: #000 !important; font: 700 16px/1 system-ui, sans-serif; text-decoration: none; pointer-events: auto; }
.mxs-watch { position: absolute; right: 16px; top: max(16px, env(safe-area-inset-top)); z-index: 3; min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,0,0,.45); color: #fff;
  font: 600 14px/1 system-ui, sans-serif; cursor: pointer; }
.mxs-watch:focus-visible, .mxs-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mxs-playing .mxs-watch { opacity: 0; pointer-events: none; }
.mxs-hint { position: absolute; left: 50%; top: max(20px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 3;
  color: rgba(255,255,255,.7); font: 500 12px/1 system-ui, sans-serif; opacity: 0; transition: opacity .3s; pointer-events: none; }
.mxs-playing .mxs-hint { opacity: 1; }
.mxs-loading { position: absolute; right: 18px; bottom: 16px; z-index: 3; color: rgba(255,255,255,.45); font: 500 11px/1 system-ui, sans-serif; }
.mxs-error .mxs-sticky::after { content: "Scroll frames not found - check data-base"; position: absolute; inset: auto 16px 16px; color: #f88;
  font: 600 13px/1.3 system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { .mxs-hint { display: none; } }