/* ---------------------------------------------------------------------------
   AINODIS hero — overlay stack over the Lottie.

   Order matters, bottom to top:
     .hero-bloom     blurred copy of the animation (glow)
     .hero-anim      the crisp animation
     .hero-grad-a    radial: keeps the copy side clean, lets the art bloom right
     .hero-grad-b    linear: fades the hero into the section below
     .hero-noise     grain, kills banding
   The copy sits above all of it on z-index 1.

   Everything here is pointer-events:none so the CTA stays clickable.
--------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero > .wrap { position: relative; z-index: 1; }

.hero-fx, .hero-fx > * { position: absolute; inset: 0; pointer-events: none; }
.hero-fx { z-index: 0; }
.hero-fx svg, .hero-fx canvas { width: 100% !important; height: 100% !important; }

/* --- bloom: same animation, blurred and saturated, sitting underneath ----- */
.hero-bloom {
  filter: blur(26px) saturate(1.9) brightness(1.04);
  opacity: .78;
  transform: scale(1.03);          /* hides the soft edge the blur creates */
}

/* --- gradients ----------------------------------------------------------- */
.hero-grad-a {
  background:
    radial-gradient(120% 90% at 18% 42%,
      rgb(255 255 255 / .92) 0%,
      rgb(255 255 255 / .72) 26%,
      rgb(255 255 255 / .18) 52%,
      rgb(255 255 255 / 0)   72%);
}
.hero-grad-b {
  background:
    linear-gradient(to bottom,
      rgb(255 255 255 / .55) 0%,
      rgb(255 255 255 / 0)   18%,
      rgb(255 255 255 / 0)   62%,
      rgb(255 255 255 / .88) 100%);
}

/* --- grain --------------------------------------------------------------- */
.hero-noise {
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* --- dark hero ----------------------------------------------------------- */
.hero.is-dark .hero-grad-a {
  background: radial-gradient(120% 90% at 18% 42%,
    rgb(14 14 14 / .94) 0%, rgb(14 14 14 / .74) 26%,
    rgb(14 14 14 / .2) 52%, rgb(14 14 14 / 0) 72%);
}
.hero.is-dark .hero-grad-b {
  background: linear-gradient(to bottom,
    rgb(14 14 14 / .6) 0%, rgb(14 14 14 / 0) 18%,
    rgb(14 14 14 / 0) 62%, rgb(14 14 14 / .9) 100%);
}
.hero.is-dark .hero-noise { mix-blend-mode: screen; opacity: .07; }
.hero.is-dark .hero-bloom { opacity: .95; filter: blur(30px) saturate(2.1) brightness(1.15); }

/* Bloom is the only expensive layer. Drop it on small screens and for users
   who have asked for less motion. */
@media (max-width: 820px) { .hero-bloom { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-fx { display: none; } }