/* Continuity: preserve the full shoulders/chest composition of the source plate. */
.continuity .horizon {
  background: linear-gradient(90deg, #09090f55, transparent 75%),
    url('assets/iv-horizon-cinematic.webp') center center / cover no-repeat #09090f;
}
.continuity .horizon-planet { display: none; }
.continuity .horizon-copy { position: relative; text-shadow: 0 2px 20px #09090f; }
@media (max-width: 760px) {
  .continuity .horizon {
    background-image: linear-gradient(90deg, #09090fe6, #09090f70 70%, #09090f33),
      url('assets/iv-horizon-cinematic.webp');
    background-position: center, 60% center;
  }
}
.hero-motion { opacity: 0; pointer-events: none; max-height: none; background: transparent; }
.hero-motion.is-ready { opacity: 1; }
.planet-motion { opacity: 0; pointer-events: none; }
.planet-motion.is-ready { opacity: 1; }
/* Separate the repeating character performance from the continuously turning globe. */
.hero-continuity.planet-separated > img.hero-art { z-index: -5; }
.hero-continuity.planet-separated .planet-motion { z-index: -4; }
.hero-continuity.planet-separated .hero-motion {
  z-index: -3;
  /* The video carries its own per-frame alpha; a fixed outline clips motion. */
  mask-image: none;
}
.hero-continuity:not(.planet-separated) .hero-motion { opacity: 0; }
.hero-continuity:not(.character-ready) .planet-motion { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-continuity.planet-separated.character-ready > img.hero-art {
    /* Preserve stars/landscape, but remove every underlying still-model pixel. */
    mask-image: url('assets/iv-background-only-mask.png'), var(--hero-edge-mask);
    /* This PNG stores luminance, not alpha: black must remove the still figure. */
    mask-mode: luminance, alpha;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-composite: intersect;
  }
}
.animated-mark { position: relative; display: inline-block; line-height: .83; }
.animated-mark .metal { animation: none; }
.logo-motion { position: absolute; width: 120%; height: 120%; left: -10%; top: -10%; max-height: none; object-fit: contain; background: transparent; pointer-events: none; opacity: 0; }
.logo-motion.is-ready { opacity: 1; }
.animated-mark:has(.is-ready) > .metal { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-motion, .logo-motion, .planet-motion { display: none; }
  .animated-mark:has(.is-ready) > .metal { opacity: 1; }
}
.hero-continuity .hero-art {
  --hero-edge-mask: linear-gradient(90deg, transparent, #000 18%);
  inset: auto 0 0 auto;
  width: auto;
  height: 100%;
  max-width: none;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: right bottom;
  mask-image: var(--hero-edge-mask);
}
@media (max-width: 760px) {
  .hero-continuity .hero-art {
    --hero-edge-mask: linear-gradient(180deg, transparent, #000 18%, #000 94%, transparent);
    height: 440px;
    bottom: 28px;
    right: -12px;
    mask-image: var(--hero-edge-mask);
  }
}