/* ===========================================================
   FIGURE ANIMATIONS
   ===========================================================
   The key fix from V1: human runs ALONG a path (away into
   the distance), not off-screen. Achieved by combining
   translate + scale to simulate perspective.
   =========================================================== */

/* ---- Halo pulses gently behind sacred figures ---- */
@keyframes halo-pulse{
  0%,100%{ opacity:.7; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.08); }
}
.halo-element{
  animation: halo-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* ---- Light rays radiating from Jesus ---- */
@keyframes light-rays{
  0%,100%{ opacity:.4; }
  50%{ opacity:.85; }
}
.light-ray{ animation: light-rays 3s ease-in-out infinite; }
.light-ray:nth-of-type(2){ animation-delay: .4s; }
.light-ray:nth-of-type(3){ animation-delay: .8s; }
.light-ray:nth-of-type(4){ animation-delay: 1.2s; }

/* ---- Jesus's reaching arm: a gentle calling motion ---- */
@keyframes arm-reach{
  0%,100%{ transform: rotate(0deg) translateY(0); }
  50%{ transform: rotate(-6deg) translateY(-4px); }
}
.scene-stage.reach-anim #jesus-arm{
  animation: arm-reach 2.2s ease-in-out infinite;
  transform-origin: -30px 15px;
  transform-box: fill-box;
}

/* ============================================================
   THE BIG FIX — RUN-ALONG-PATH
   ============================================================
   Instead of translateX off-screen, the human transforms along
   a diagonal path INTO the scene (toward the vanishing point),
   getting smaller (perspective). Then comes back the same way.
   ============================================================ */
@keyframes run-along-path{
  0%   { transform: translate(0, 0) scale(1); opacity:1; }
  100% { transform: translate(280px, -120px) scale(0.45); opacity:.7; }
}
@keyframes walk-along-path-return{
  0%   { transform: translate(280px, -120px) scale(0.45); opacity:.7; }
  100% { transform: translate(0, 0) scale(1); opacity:1; }
}
/* feet bobbing while moving */
@keyframes step-bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

.scene-stage.run-anim #scene-human-wrap{
  animation: run-along-path 5s ease-in-out forwards;
}
.scene-stage.return-anim #scene-human-wrap{
  animation: walk-along-path-return 5s ease-in-out forwards;
}
.scene-stage.run-anim #scene-human,
.scene-stage.return-anim #scene-human{
  animation: step-bob .4s ease-in-out infinite;
}

/* When human is searching (mid-score), they sway in place */
@keyframes sway-uncertain{
  0%,100%{ transform: translateX(0); }
  50%{ transform: translateX(10px); }
}
.scene-stage.sway-anim #scene-human-wrap{
  animation: sway-uncertain 3s ease-in-out infinite;
}

/* ============================================================
   HEAVEN GATE
   ============================================================ */
@keyframes gate-swing-left{
  from{ transform: rotateY(0deg); }
  to{ transform: rotateY(-65deg); }
}
@keyframes gate-swing-right{
  from{ transform: rotateY(0deg); }
  to{ transform: rotateY(65deg); }
}
.heaven-stage.gate-open-anim #gate-left{
  animation: gate-swing-left 3s ease-out forwards;
  transform-origin: left center;
  transform-box: fill-box;
}
.heaven-stage.gate-open-anim #gate-right{
  animation: gate-swing-right 3s ease-out forwards;
  transform-origin: right center;
  transform-box: fill-box;
}

/* Walker approaching the gate */
@keyframes walk-toward-gate{
  0%   { transform: translate(-280px, 50px) scale(0.7); opacity:.7; }
  100% { transform: translate(0, 0) scale(1); opacity:1; }
}
.heaven-stage.walk-toward-anim #heaven-walker{
  animation: walk-toward-gate 4s ease-out forwards;
}
.heaven-stage.walk-toward-anim #heaven-walker-inner{
  animation: step-bob .4s ease-in-out infinite;
}

/* ============================================================
   HEART ICON
   ============================================================ */
@keyframes heart-beat-strong{
  0%,100%{ transform: scale(1); }
  20%{ transform: scale(1.2); }
  40%{ transform: scale(.95); }
  60%{ transform: scale(1.15); }
}

/* ============================================================
   GENERAL FLOATING / BREATHING
   ============================================================ */
@keyframes gentle-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.float-anim{
  animation: gentle-float 4s ease-in-out infinite;
}