.scroll-opening { height: 100svh; position: relative; background: #05050a; }
.scroll-opening.opening-enhanced { height: 400svh; }
.scroll-opening-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #05050a; }
.scroll-opening video { display: block; width: 100%; height: 100%; object-fit: cover; }
.opening-skip { position: absolute; top: max(24px, env(safe-area-inset-top)); right: 24px; z-index: 2; padding: 10px 18px; border: 1px solid rgba(191,252,255,.35); border-radius: 100px; color: #fff; background: rgba(5,5,10,.65); backdrop-filter: blur(12px); text-decoration: none; font-size: 13px; }
.opening-caption { position: absolute; bottom: max(36px, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; text-align: center; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 12px #000; }
.opening-caption span { display: inline-block; padding: 10px 18px; border-radius: 100px; background: rgba(5,5,10,.66); backdrop-filter: blur(8px); }
.opening-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.12); }
.opening-progress::after { content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#6d00e4,#a453fa,#2ae9fd); transform: scaleX(var(--opening-progress,0)); transform-origin: left; }
.scroll-opening.opening-unavailable { height: 100svh; }
@media (prefers-reduced-motion: reduce) { .scroll-opening { height: 100svh; } .opening-caption,.opening-progress { display: none; } }
/* Decoded frames avoid expensive random video seeks. */
.opening-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.frames-ready .opening-canvas { opacity: 1; }
.frames-ready video { visibility: hidden; }
.opening-skip, .opening-caption span { backdrop-filter: none; }

/* Keep the complete widescreen composition visible on phones and tablets. */
@media (max-width: 980px) {
  .scroll-opening video, .opening-canvas { object-fit: contain; }
  .scroll-opening-stage { background: radial-gradient(ellipse at 50% 50%, #100820, #05050a 72%); }
}

/* Remove the lower letterbox from mobile document flow; retain the scrub distance. */
@media (max-width: 980px) {
  .scroll-opening { --opening-stage-height: min(56.25vw, 100svh); height: var(--opening-stage-height); }
  .scroll-opening.opening-enhanced { height: calc(300svh + var(--opening-stage-height)); }
  .scroll-opening-stage { height: var(--opening-stage-height); }
  .scroll-opening video, .opening-canvas { object-position: center bottom; }
  .opening-caption { bottom: 14px; }
  .scroll-opening.opening-unavailable { height: var(--opening-stage-height); }
}
.scroll-opening.opening-unavailable { height: 100svh; }
@media (max-width: 980px) { .scroll-opening.opening-unavailable { height: var(--opening-stage-height); } }
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .scroll-opening { height: var(--opening-stage-height); }
}

@media (max-width: 980px) {
  .opening-skip { top: max(10px, env(safe-area-inset-top)); right: 12px; padding: 7px 12px; font-size: 12px; }
  .opening-caption { bottom: 8px; font-size: 10px; }
  .opening-caption span { padding: 6px 12px; }
}