/* Approved film and scroll chapters layered behind the WordPress content. */
.wj-video-preview .wj-video-cosmos {
  --video-x: 0px;
  --video-y: 0px;
  --video-opacity: .94;
  --video-scale: 1.04;
  --video-rx: 0deg;
  --video-ry: 0deg;
  --video-rz: 0deg;
  opacity: var(--video-opacity);
  isolation: isolate;
  contain: layout paint;
  perspective: 1200px;
  perspective-origin: 74% 50%;
}
/* One continuous shade + soft vignette over the film (driven by --video-shade from background.js).
   It replaces the per-section backgrounds that used to stack up as visible horizontal bands. */
.wj-video-preview .wj-video-cosmos::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 82% at 68% 52%, rgba(4,7,10,0) 38%, rgba(4,7,10,.9) 80%),
    linear-gradient(rgba(4,7,10,var(--video-shade, 0)), rgba(4,7,10,var(--video-shade, 0)));
}
/* Fine moving film grain: hides the softness of the upscaled stock film and takes the CGI edge off.
   Desktop only; it moves by transform, so it never repaints. */
.wj-video-grain {
  position: absolute;
  z-index: 4;
  inset: -64px;
  pointer-events: none;
  opacity: .075;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: wj-grain 1.1s steps(6) infinite;
}
@keyframes wj-grain {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-26px, 18px, 0); }
  40% { transform: translate3d(17px, -31px, 0); }
  60% { transform: translate3d(-35px, -13px, 0); }
  80% { transform: translate3d(29px, 27px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (max-width: 1023px), (hover: none) {
  .wj-video-grain { display: none; }
}
.wj-video-preview .wj-video-cosmos::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(4,7,10,.72), rgba(4,7,10,.38) 42%, rgba(4,7,10,0) 70%);
  pointer-events: none;
}
.wj-video-poster,
.wj-video-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate3d(var(--video-x), var(--video-y), 0) rotateX(var(--video-rx)) rotateY(var(--video-ry)) rotateZ(var(--video-rz)) scale(var(--video-scale));
  transform-origin: 74% 50%;
  backface-visibility: hidden;
  /* A calmer grade: the stock film's neon blue is what reads as "CGI" first. */
  filter: grayscale(.5) saturate(.72) contrast(1.12) brightness(.74) blur(var(--video-blur, 0px));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 94%, transparent), linear-gradient(90deg, transparent, #000 4%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent, #000 5%, #000 94%, transparent), linear-gradient(90deg, transparent, #000 4%, #000 82%, transparent);
  mask-composite: intersect;
  pointer-events: none;
}
.wj-video-poster { z-index: 0; }
.wj-video-background { z-index: 1; opacity: 0; transition: opacity .9s ease; }
/* Loop crossfade: the outgoing copy stays fully visible underneath while the next one fades in. */
.wj-video-background.is-back { z-index: 0; transition: none; }
.is-video-ready .wj-video-background:is(.is-front, .is-back) { opacity: 1; }
.is-video-static .wj-video-background,
.is-video-static .wj-video-background:is(.is-front, .is-back) { opacity: 0; }
.wj-video-preview .wj-home-hero { background: transparent; }
.wj-video-preview .wj-home-hero-grid { position: relative; }
.wj-video-explore {
  position: absolute;
  z-index: 4;
  left: var(--explore-left, 75%);
  top: var(--explore-top, 80px);
  width: var(--explore-width, 20%);
  height: var(--explore-height, 320px);
  min-height: 44px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: rgba(218,233,255,.74);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.wj-video-explore span {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
  opacity: .74;
  text-shadow: 0 1px 16px #04070a;
  transition: opacity .2s ease;
}
.wj-video-explore:hover span,
.wj-video-explore:focus-visible span { opacity: 1; color: #fff; }
.wj-video-explore:focus-visible { outline: 1px solid rgba(165,200,255,.6); outline-offset: 8px; }
.wj-video-explore:active,
.wj-video-explore.is-dragging { cursor: grabbing; }
.wj-video-explore[hidden],
.wj-video-explore:disabled { display: none; }
.wj-video-toggle {
  position: fixed;
  z-index: 40;
  right: 20px;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: rgba(245,248,255,.8);
  background: rgba(4,7,10,.72);
  border: 1px solid rgba(170,197,255,.2);
  border-radius: 50%;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: color .2s, border-color .2s;
}
.wj-video-toggle:hover { color: #fff; border-color: rgba(170,197,255,.5); }
.wj-video-toggle-icon { width: 14px; height: 14px; overflow: visible; }
.wj-video-toggle-icon path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wj-video-toggle-icon .wj-icon-play { display: none; fill: currentColor; stroke-width: 1.2; }
.wj-video-toggle.is-off .wj-icon-pause { display: none; }
.wj-video-toggle.is-off .wj-icon-play { display: inline; }
.wj-video-toggle:focus-visible { outline: 2px solid #76a0ff; outline-offset: 4px; }
.wj-video-toggle[hidden] { display: none; }
@media (max-width: 920px) {
  .wj-video-preview .wj-video-cosmos::after {
    background: linear-gradient(90deg, rgba(4,7,10,.8), rgba(4,7,10,.48) 54%, rgba(4,7,10,.06));
  }
}
@media (min-width: 701px) and (max-width: 920px) and (orientation: portrait) {
  .wj-video-poster,
  .wj-video-background {
    inset: 0 auto auto -45%;
    width: 178%;
    height: auto;
    aspect-ratio: 1918 / 1080;
    object-fit: contain;
    object-position: center;
  }
}
@media (max-width: 700px) {
  .wj-video-poster,
  .wj-video-background {
    /* Preserve the sphere in portrait instead of enlarging a continent behind text. */
    inset: 0 auto auto -45%;
    width: 178%;
    height: auto;
    aspect-ratio: 1918 / 1080;
    object-fit: contain;
    object-position: center;
    transform: translate3d(var(--video-x), var(--video-y), 0) scale(var(--video-scale));
  }
  .wj-video-preview .wj-video-cosmos::after {
    background: linear-gradient(180deg, rgba(4,7,10,.26), rgba(4,7,10,.6) 38%, rgba(4,7,10,.78) 73%);
  }
  .wj-video-toggle {
    right: 14px;
    bottom: calc(83px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .wj-video-grain { animation: none; }
  .wj-video-poster,
  .wj-video-background { transform: none; transition: none; }
  .wj-video-explore { display: none; }
}
@media print {
  .wj-video-cosmos,
  .wj-video-toggle { display: none !important; }
}

/* Scroll chapters: no hidden-content dependency; the controller opts each item in. */
.wj-video-preview [data-progress-container] {
  opacity: 1;
  transform: none;
  transition: none;
}
.wj-video-preview [data-progress-item] {
  opacity: var(--step-opacity, 1);
  translate: 0 var(--step-y, 0px);
  scale: var(--step-scale, 1);
  transform-origin: 50% 0;
}
.wj-video-preview [data-progress-item]:focus-within {
  opacity: 1 !important;
  translate: none !important;
  scale: none !important;
}
.wj-video-preview [data-progress-section] .wj-path-signal {
  animation: none;
  left: calc(3px + 75% * var(--path-progress, 0));
  opacity: var(--path-progress, 0);
}
.wj-video-preview [data-progress-section] .wj-path article > i {
  opacity: var(--step-opacity, 1);
  transition: box-shadow .2s ease;
}
.wj-video-preview [data-progress-section="faq"] details[open] {
  background: rgba(4, 85, 253, .06);
}
@media (prefers-reduced-motion: reduce) {
  .wj-video-preview [data-progress-item] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
  .wj-video-preview [data-progress-section] .wj-path-signal { display: none; }
}
@media print {
  .wj-video-preview [data-progress-item] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
  .wj-video-preview [data-progress-section] .wj-path-signal { display: none; }
}

/* Phones keep the full-width framing, so the vignette stays soft there. */
@media (max-width: 700px) {
  .wj-video-preview .wj-video-cosmos::before {
    background:
      radial-gradient(ellipse 125% 95% at 55% 30%, rgba(4,7,10,0) 50%, rgba(4,7,10,.55) 100%),
      linear-gradient(rgba(4,7,10,var(--video-shade, 0)), rgba(4,7,10,var(--video-shade, 0)));
  }
}