/* choreography — motion module (Anand & Palak).
   Owns the .enter channel on slide 2 + slide 3 heroes (entrance choreography)
   and injects a masked gold-sheen sweep over the calligraphic text layers.
   Never touches .plx (parallax), img.ly (ambient / core reveal), or .stage--slide1. */

/* ------------------------------------------------------------------ *
 * FEATURE 1 — Hero entrance choreography (slide 2 + slide 3)
 * FOUC-safe: the hidden initial state applies ONLY once JS adds .choreo,
 * so if the script never runs the heroes stay fully visible.
 * ------------------------------------------------------------------ */

.stage--slide2.choreo [data-hero] .enter,
.stage--slide3.choreo [data-hero] .enter {
  opacity: 0;
  transform: translateY(3%) scale(0.98);
  transition:
    opacity 1s ease,
    transform 1.15s cubic-bezier(0.22, 0.68, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.11s);
}

/* Settled resting state — heroes rise into place, staggered by z-order (--i). */
.stage--slide2.choreo.entered [data-hero] .enter,
.stage--slide3.choreo.entered [data-hero] .enter {
  opacity: 1;
  transform: none;
}

/* The couple should feel like it rises + settles last-ish: a touch slower
   and delayed a little past its raw --i so it lands near the end of the build. */
.stage--slide2.choreo [data-hero="couple"] .enter {
  transform: translateY(4.5%) scale(0.985);
  transition:
    opacity 1.1s ease,
    transform 1.35s cubic-bezier(0.22, 0.68, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.11s + 0.55s);
}

/* Slide-2 lanterns / candelabras get a small overshoot so they look like they
   drop into their existing ambient sway (tasteful, not bouncy). */
.stage--slide2.choreo [data-hero="candelabra-left"] .enter,
.stage--slide2.choreo [data-hero="candelabra-right"] .enter,
.stage--slide2.choreo [data-hero="lantern-cluster-left"] .enter,
.stage--slide2.choreo [data-hero="lantern-cluster-right"] .enter {
  transform: translateY(-2.6%) scale(1.008);
  transition:
    opacity 0.95s ease,
    transform 1.2s cubic-bezier(0.34, 1.32, 0.5, 1);
  transition-delay: calc(var(--i, 0) * 0.11s);
}

/* ------------------------------------------------------------------ *
 * FEATURE 2 — Metallic gold sheen sweep on calligraphic text
 * .sheen is appended (by JS) into the text layer's .enter, absolutely
 * inset:0, and masked by the glyph alpha so only the letters glint.
 * The moving-light gradient + mask URL are set inline from JS.
 * ------------------------------------------------------------------ */

.sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Warm-white / gold diagonal light band, most of the strip transparent. */
  background-image: linear-gradient(
    115deg,
    rgba(255, 244, 214, 0) 38%,
    rgba(255, 240, 200, 0.55) 47%,
    rgba(255, 252, 236, 0.95) 50%,
    rgba(255, 226, 158, 0.55) 53%,
    rgba(255, 244, 214, 0) 62%
  );
  background-repeat: no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  mix-blend-mode: screen;
  opacity: 0;
  will-change: background-position, opacity;
  /* Sweep loop + one-time fade-in gate (delay set inline per element). */
  animation:
    sheen-sweep 8s ease-in-out infinite,
    sheen-arm 0.6s ease forwards;
}

@keyframes sheen-sweep {
  0%   { background-position: 130% 0; }
  /* light crosses the glyphs, then rests off-strip for most of the loop */
  22%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}

@keyframes sheen-arm {
  to { opacity: 1; }
}

/* ------------------------------------------------------------------ *
 * Reduced motion — no build, no sheen. Heroes resolve instantly visible.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .stage.choreo [data-hero] .enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sheen { display: none; }
}