/* =====================================================================
   HERO MONTAGE — a living crossfade of hypnoerotica illustrations behind
   the hero, with slow Ken Burns drift + a subtle brand color-grade.
   Injected by hero-montage.js on the home hero and the hypno event
   immersive heroes. Pure CSS motion (GPU transform/opacity — no video).
   Respects prefers-reduced-motion (shows the first image, no animation).
   ===================================================================== */

.hm{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hm-layer{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s ease;
  will-change:opacity,transform;
}
.hm-layer.on{opacity:1}
.hm-grade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(192,38,211,.12) 45%,rgba(54,20,201,.32));
  mix-blend-mode:soft-light;opacity:.45;
}
/* readability scrim painted ON TOP of the montage layers (inside .hm), so it
   never depends on a theme overlay's z-index. Hidden on the home hero, which
   already gets its scrim from the .bg gradient above the montage. */
.hm-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,5,26,.58) 0%,rgba(10,5,26,.48) 38%,rgba(10,5,26,.80) 100%);
}
.sb-home .hero .hm-scrim{display:none}

@media (prefers-reduced-motion: no-preference){
  .hm-layer.on{animation:hmKen 20s ease-out both}
  @keyframes hmKen{from{transform:scale(1.12)}to{transform:scale(1.0)}}
}

/* --- HOME hero (.sb-home .hero) -----------------------------------------
   The montage mounts as the first child of .hero, behind the .bg div.
   We strip the static clouds image off .bg so the montage shows through,
   keeping .bg's gradient as the readability scrim ON TOP of the montage. */
.sb-home .hero.hm-on .bg{
  background:
    radial-gradient(70% 65% at 22% 45%,rgba(140,90,225,.32),transparent 60%),
    linear-gradient(to left,rgba(14,9,22,.92) 0%,rgba(28,16,52,.62) 45%,rgba(72,40,132,.24) 100%);
}

/* --- EVENT immersive heroes (.ev-hero--immersive) -----------------------
   These paint their image via ::before and a dark overlay via ::after.
   Hide the static ::before image; the montage (.hm, z-index:0) sits under
   the ::after overlay (z-index:1) which stays as the text scrim. */
.ev-hero--immersive.hm-on::before{background-image:none !important;}