.hero-world {
  /* The recording tracks the agent at 42.4% of its width. Align that point
     with the right-hand side of the hero, independently of the cover crop. */
  --world-focus: calc(42.4% + 27.6vw) 50%;
  --world-poster: none;
  pointer-events: none;
  background: var(--blue) var(--world-poster) var(--world-focus) / cover no-repeat;
  /* The shifted cover image can begin at 27.6vw. Hide that edge completely,
     then ease into the scene where it overlaps the Game of Life field. */
  mask-image: linear-gradient(to right, transparent 30%, #0000000a 36%,
    #00000029 42%, #0000005e 48%, #000000a6 54%, #000000e0 60%, #000 66%);
}
.hero-life {
  position: absolute; z-index: 0; top: 0; left: 0; width: 60%; height: 100%;
  pointer-events: none; filter: blur(.45px);
  mask-image: linear-gradient(to right, #000 30%, #000e 46%, #0008 65%, #0003 82%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 50%, #000b 68%, #0003 84%, transparent);
  mask-composite: intersect;
  opacity: 0;
  animation: life-arrive 2s cubic-bezier(.4, 0, .2, 1) both paused;
}
.hero-life[data-life-state='playing'] { animation-play-state: running; }
@keyframes life-arrive { from { opacity: 0; } to { opacity: .55; } }
[data-world-video] {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--world-focus); pointer-events: none;
  opacity: 0; transition: opacity 320ms ease-out;
}
[data-world-frame='ready'] [data-world-video] { opacity: 1; }
/* The portrait recording should fit the scene on wide displays. Cover would
   enlarge its width to the entire desktop, then discard much of its height. */
@media (min-width: 1101px) {
  .hero-world { container-type: size; background:none; mask-image:none; }
  .hero-life {
    width:min(100%,calc(var(--scene-image-left) + var(--scene-edge-fade)));
    mask-image:linear-gradient(to right,#000 calc(var(--scene-image-left) + var(--scene-edge-fade)*.7),transparent),
      linear-gradient(to bottom,transparent,#000 22%,#000 50%,#000b 68%,#0003 84%,transparent);
  }
  .hero-world::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--world-poster) var(--world-focus) / contain no-repeat;
  }
  .hero-world::before, [data-world-video] {
    /* Follow the contained 944×1080 recording, not the viewport boundary. */
    --image-width: var(--scene-image-width);
    --image-left: var(--scene-image-left);
    --edge-fade: var(--scene-edge-fade);
    mask-image: linear-gradient(to right,
      transparent var(--image-left),
      #0000000a calc(var(--image-left) + var(--edge-fade)*.15),
      #00000029 calc(var(--image-left) + var(--edge-fade)*.3),
      #00000080 calc(var(--image-left) + var(--edge-fade)*.5),
      #000000d6 calc(var(--image-left) + var(--edge-fade)*.7),
      #000000f5 calc(var(--image-left) + var(--edge-fade)*.85),
      #000 calc(var(--image-left) + var(--edge-fade)),
      #000 calc(var(--image-left) + var(--image-width) - min(12cqw,320px)),
      transparent calc(var(--image-left) + var(--image-width)));
  }
  [data-world-video] { object-fit: contain; }
}
/* Normal startup fades from the blue scene directly into a decoded frame.
   A static image is reserved for deliberately still or unavailable playback. */
:is([data-world-motion='reduced'], [data-world-motion='error']) .hero-world {
  --world-poster: url('assets/nmmo-twitch-dots-10min-poster.png');
}
[data-world-motion='reduced'] [data-world-video],
[data-world-motion='error'] [data-world-video] { visibility: hidden; }
[data-world-toggle] {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 0; background: transparent;
  pointer-events: auto; cursor: pointer; touch-action: manipulation;
}
[data-world-toggle]:focus-visible { outline: none; }
[data-world-toggle]:disabled { cursor: default; }
@media (min-width: 761px) and (max-width: 1100px) {
  .hero-world {
    --world-focus: calc(42.4% + 47.6vw) 50%;
    mask-image: linear-gradient(to right, transparent 55%, #000 70%);
  }
  .hero-life { width: 68%; }
}
@media (max-width: 760px) {
  /* Fixed uniform crop places the recorded encounter below the mobile copy.
     Poster and video use the same scale; no actor or camera is reconstructed. */
  .hero-world {
    --world-focus: calc(42.4% + 27.6vw) 0%;
    mask-image: linear-gradient(to right, transparent, #000 38%);
    background-size: auto calc(100% + 360px);
    background-position: var(--world-focus);
  }
  [data-world-video] {
    height: calc(100% + 360px);
  }
  .hero-life { top: 58%; height: 42%; width: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-world { --world-poster: url('assets/nmmo-twitch-dots-10min-poster.png'); }
  [data-world-video] { visibility: hidden; transition: none; }
  .hero-life { animation: none; opacity: .55; }
}