/* interactions — motion module (Anand & Palak).
   Two features, both strictly inside this module's channel ownership:
     • Depth parallax  → writes ONLY `transform` on `.plx` (translate3d, never rotate/scale).
     • Tap flares      → appends a `.flare` child into a hero's `.enter`, animates ONLY
                          its own opacity. Never touches `.enter`/img transforms or filters.

   Channels owned elsewhere and left untouched here:
     .enter  = entrance / door swing (doors.js, choreography.js)
     img.ly  = ambient sway / glow / reveal (animations.css)
   The parallax translate on `.plx` composes with those inner transforms instead of
   clobbering them, because each lives on a different element in the motion stack. */

/* Parallax is a GPU-composited translate. Hint the compositor on every hero wrapper
   (doors have data-depth="0" and are skipped in JS, but the hint is harmless). */
.plx { will-change: transform; }

/* --- Tap targets ----------------------------------------------------------
   `img.ly` is globally pointer-events:none, so the tap must be caught on the
   wrapper. Only the light heroes opt back in; everything else stays transparent
   to pointer + keeps vertical scrolling/scroll-snap working. Slide-1 doors keep
   their own `.doors-tap` control (this never applies to data-depth="0"). */
.plx.is-tappable { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* --- Tap flare ------------------------------------------------------------
   A warm-gold radial bloom that reads as caught light (screen blend), seated
   exactly over the hero (inset:0 inside `.enter`). JS animates opacity only. */
.flare {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 232, 172, 0.95) 0%,
    rgba(255, 205, 120, 0.6) 32%,
    rgba(255, 176, 88, 0.24) 58%,
    rgba(255, 176, 88, 0) 76%
  );
  will-change: opacity;
}

/* The couple gets a softer, larger, slower bloom — extends past the frame. */
.flare--soft {
  inset: -18%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 234, 184, 0.72) 0%,
    rgba(255, 210, 130, 0.42) 40%,
    rgba(255, 184, 96, 0.16) 66%,
    rgba(255, 184, 96, 0) 82%
  );
}

@media (prefers-reduced-motion: reduce) {
  /* No parallax writes happen in JS under reduced motion; drop the compositor hint. */
  .plx { will-change: auto; }
  /* Flares (if any are shown) get a single short static fade — set in JS. */
  .flare { will-change: auto; }
}