/* V88 — hero cinemagraph: makes the Yasuo/Yone splash feel like a living video.
   Three layers: slow Ken Burns drift on the art, a breathing pulse on the green
   rift, and a particle canvas (petals / embers / sparks) drawn by
   assets/js/pages/hero-cinemagraph.js between the art and the copy.
   Everything stops under prefers-reduced-motion. */

.nx40-hero { overflow: hidden; }

/* Ken Burns: barely-perceptible push-in, alternating so it never jumps. */
@keyframes nxHeroDrift {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.045) translateX(-0.6%); }
}
.nx40-hero-art {
  animation: nxHeroDrift 19s ease-in-out infinite alternate;
  will-change: transform;
}

/* The green rift between the two champions breathes. (Base radial comes from
   home-v41.css .nx40-hero-art:after — here we only animate its strength.) */
@keyframes nxRiftPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .9; }
}
.nx40-hero-art::after { animation: nxRiftPulse 4.6s ease-in-out infinite; }

/* Particle canvas sits above the art, below the hero copy. */
#nx-hero-fx {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nx40-hero-art, .nx40-hero-art::after { animation: none !important; }
  #nx-hero-fx { display: none; }
}