/* Video hero mockup: the gray hero block is filled edge to edge with real footage. Each audience
   word in the title brings its own clip. Copy sits on a soft shade so it always reads. */
.hero.block.hero--video { position: relative; isolation: isolate; min-height: min(88vh, 880px); display: flex; align-items: flex-end; padding-bottom: clamp(48px, 7vw, 96px); color: #fff; }
.hero--video .wrap { position: relative; z-index: 1; }

.hv { position: absolute; inset: 0; z-index: -1; background: #0b0f1a; }
/* Each scene: the clip plus its own comic colour layer. Scenes crossfade together. */
.hv__scene { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease); }
.hv__scene.is-active { opacity: 1; }
.hv__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: saturate(1.25) contrast(1.12); transition: transform 4800ms linear; }
.hv__scene.is-active .hv__clip { transform: scale(1); }

/* Marvel-style colour: a bold two-colour wash multiplied over the footage, per audience. */
.hv__scene[data-word='member'] { --a: #0751fb; --b: #00c2ff; }
.hv__scene[data-word='fan'] { --a: #e3132c; --b: #ffb000; }
.hv__scene[data-word='client'] { --a: #6b2bff; --b: #ff3d8b; }
.hv__scene[data-word='employee'] { --a: #f2552c; --b: #ffd23f; }
.hv__tint { position: absolute; inset: 0; background: linear-gradient(118deg, var(--a) 0%, var(--a) 38%, var(--b) 100%); mix-blend-mode: multiply; opacity: 0.82; }
.hv__tint::after { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 55%, var(--b) 100%); mix-blend-mode: screen; opacity: 0.35; }

/* Comic print: halftone dots, strongest in the top right corner, fading out toward the copy. */
.hv__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1.2px, transparent 1.6px); background-size: 9px 9px; mix-blend-mode: overlay; -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 62%); mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 62%); }

/* Scene change: the old frame is frozen on a canvas and breaks away in square pixels. */
.hv__px { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.hv.is-px .hv__scene { transition: none; }
/* Shade: darker at the bottom left where the copy sits, clear at the top right. Not a glow. */
.hv__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 10, 22, 0.78) 0%, rgba(6, 10, 22, 0.35) 45%, rgba(6, 10, 22, 0.05) 75%), linear-gradient(to right, rgba(6, 10, 22, 0.45), rgba(6, 10, 22, 0) 60%); }

.hero--video .eyebrow { color: rgba(255, 255, 255, 0.82); }
.hero--video .hero__title { color: #fff; }
.hero--video .display em { color: #8fb0ff; }
.hero--video .hero__lede { color: rgba(255, 255, 255, 0.88); }
.hero--video .btn--ghost { color: #fff; }

/* Pause control, bottom right of the block (moving video needs a way to stop it). */
.hv__pause { position: absolute; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
.hv__pause:hover { background: rgba(255, 255, 255, 0.26); }
.hv__pause:active { transform: scale(0.96); }
.hv__pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hv__pause-i { width: 12px; height: 14px; border-inline: 4px solid currentColor; box-sizing: border-box; }
.hv__pause.is-paused .hv__pause-i { width: 0; height: 0; border-inline: 0; border-left: 12px solid currentColor; border-block: 7px solid transparent; margin-left: 3px; }

@media (max-width: 700px) { .hero--video { min-height: 92vh; } }
@media (prefers-reduced-motion: reduce) {
  .hv__scene { transition: opacity 300ms linear; }
  .hv__clip, .hv__scene.is-active .hv__clip { transform: none; }
  .hv__px { display: none; }
}