/* ambient.css — the idle life on each moving layer's inner image (.cut-in), after its
 * reveal. Desynced per cutout (--k duration factor, --ph negative start offset from
 * build.cjs) so nothing moves in lockstep. Paused off-screen: js/reveal.js adds .is-live
 * to cutouts near the viewport (memory + battery; Chrome otherwise keeps ~80 loops hot).
 * Reduced motion: no loops — every layer rests on its PSB frame.
 */
@keyframes am-sway {
  0%, 100% { transform: rotate(calc(var(--sx) * -1.1deg)); }
  50%      { transform: rotate(calc(var(--sx) * 0.9deg)); }
}
@keyframes am-march {          /* a step: rise on the stride, settle on the foot */
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-0.9%) rotate(0.35deg); }
}
@keyframes am-sway-slow {      /* elephant: a heavy, slow roll */
  0%, 100% { transform: rotate(-0.45deg) translateY(0); }
  50%      { transform: rotate(0.45deg) translateY(-0.5%); }
}
@keyframes am-bob {            /* peacocks: head-bob / weight shift */
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%      { transform: translateY(-1.4%) rotate(calc(var(--sx) * -1.2deg)); }
}
@keyframes am-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.008); } }
@keyframes am-drape { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(calc(var(--sx) * -0.35deg)); } }
@keyframes am-pin { 0%, 70%, 100% { transform: scale(1); } 35% { transform: scale(1.22); } }
/* the crest's own shine-streak layer: invisible at rest (as in the PSB), sweeps across
   the crest now and then */
@keyframes am-shine {
  0%   { opacity: 0; transform: translateX(-60%); }
  8%   { opacity: 1; }
  30%  { opacity: 0; transform: translateX(60%); }
  100% { opacity: 0; transform: translateX(60%); }
}

.cut[data-role="flora"]   .cut-in { animation: am-sway calc(var(--sway-dur) * var(--k)) ease-in-out var(--ph) infinite; }
.cut[data-role="march"]   .cut-in { animation: am-march var(--bob) ease-in-out var(--ph) infinite; }
.cut[data-cut="proc-elephant"] .cut-in { animation-name: am-sway-slow; }
.cut[data-role="bird"]    .cut-in { animation: am-bob calc(5.2s * var(--k)) ease-in-out var(--ph) infinite; }
.cut[data-role="couple"]  .cut-in { animation: am-breathe calc(var(--breathe-dur) * var(--k)) ease-in-out var(--ph) infinite; }
/* a video couple moves on its own: no breathe on top of it. Its first-frame poster sits
   under the video and hides once js/couple-video.js sees a presented frame. */
.cut[data-video] .cut-in { animation: none; }
.cut-mv.vid-on > img.cut-in { visibility: hidden; }
.cut[data-role="curtain"] .cut-in { animation: am-drape calc(8s * var(--k)) ease-in-out var(--ph) infinite; }
.cut[data-role="pin"]     .cut-in { animation: am-pin var(--pin-dur) ease-in-out var(--ph) infinite; }
.cut[data-role="shine"]   .cut-in { opacity: 0; animation: am-shine var(--shine-dur) cubic-bezier(0.45, 0, 0.3, 1) 2.5s infinite; }

html.js .cut:not(.is-live) .cut-in { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .cut .cut-in { animation: none !important; transform: none !important; }
  .cut[data-role="shine"] .cut-in { opacity: 0 !important; }
}

/* ---- the procession's arrival (on load, on the .cut itself) ------------------------ */
@keyframes am-arrive {
  from { opacity: 0; transform: translateX(-7cqw); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
html.js:not(.hero-ready) .cut[data-role="march"] { opacity: 0; }
html.js.hero-ready .cut[data-role="march"] {
  animation: am-arrive var(--hero-march-dur) var(--hero-march-ease) both;
  animation-delay: calc(var(--hero-delay) + var(--md));
}
@media (prefers-reduced-motion: reduce) {
  html.js .cut[data-role="march"] { animation: none !important; opacity: 1 !important; }
}

/* ---- the baraat walks across the cover (build.cjs VIDEOS.procession.drift) ----------
 * pukhraj-poorva's boat drift: every copy glides left -> right on ONE shared linear cycle
 * and wraps from just past the right edge to just before the left one, so as one group
 * walks out the next walks in. --drift-from/-to/-phase/-dur are inline per copy. `linear`
 * is required: any easing makes the speed jump at the wrap. The negative delay puts copy 0
 * on its PSB position at the first frame and parks copy 1 off-frame right until its turn.
 * The walk replaces the arrival glide; the group just fades in. Transform/opacity only. */
@keyframes proc-drift {
  from { transform: translateX(var(--drift-from)); }
  to   { transform: translateX(var(--drift-to)); }
}
@keyframes proc-fade { from { opacity: 0; } to { opacity: 1; } }
html.js.hero-ready .cut[data-drift] {
  animation: proc-fade var(--hero-march-dur) var(--hero-march-ease) both,
             proc-drift var(--drift-dur) linear infinite;
  animation-delay: var(--hero-delay), calc(var(--drift-dur) * var(--drift-phase));
  will-change: transform; /* stays: the walk never ends */
}
/* at rest (reduced motion, no JS) every copy sits on the PSB spot: show only the first */
html:not(.js) .cut[data-drift]:not([data-drift="0"]) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cut[data-drift]:not([data-drift="0"]) { display: none; }
}