/* ================================================================
   THE CHURCH OF THE PROMISES — ANIMATIONS
================================================================ */

/* ── HERO ENTRANCE ── */
.animate-fade-in {
  opacity: 0;
  animation: fade-in .9s var(--ease-smooth) .3s forwards;
}
.animate-slide-up {
  opacity: 0;
  transform: translateY(30px);
  animation: slide-up .9s var(--ease-smooth) .5s forwards;
}
.animate-fade-in-delay {
  opacity: 0;
  animation: fade-in .9s var(--ease-smooth) .9s forwards;
}
.animate-fade-in-delay2 {
  opacity: 0;
  animation: fade-in .9s var(--ease-smooth) 1.3s forwards;
}
.animate-verse {
  opacity: 0;
  transform: translateY(20px);
  animation: slide-up .9s var(--ease-smooth) 1.1s forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-left {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-right {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scale-up {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── SCROLL REVEAL BASE ── */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease-smooth), transform .65s var(--ease-smooth);
}
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX( 40px); }
.reveal-scale { transform: scale(.93); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* ── STAGGER DELAYS ── */
.delay-1 { transition-delay: .1s !important; }
.delay-2 { transition-delay: .2s !important; }
.delay-3 { transition-delay: .3s !important; }
.delay-4 { transition-delay: .4s !important; }
.delay-5 { transition-delay: .5s !important; }
.delay-6 { transition-delay: .6s !important; }

/* ── VERSE TRANSITION ── */
.verse-fade-out { opacity: 0; transition: opacity .35s; }
.verse-fade-in  { opacity: 1; transition: opacity .5s; }

/* ── GLOW PULSE ── */
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
  50%      { box-shadow: 0 0 24px 6px rgba(201,168,76,.25); }
}
.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* ── SHIMMER (loading) ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--bg-soft) 25%, #e8f5ec 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── FLOAT (decorative elements) ── */
@keyframes float-up-down {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.float { animation: float-up-down 4s ease-in-out infinite; }

/* ── SPIN (loader) ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* ── LOGO GLOW ── */
@keyframes logo-glow {
  0%   { filter: drop-shadow(0 0 20px rgba(201,168,76,.3)); }
  100% { filter: drop-shadow(0 0 45px rgba(201,168,76,.65)); }
}
.logo-glow { animation: logo-glow 4s ease-in-out infinite alternate; }

/* ── REDUCE MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-slide-up,
  .animate-fade-in-delay,
  .animate-fade-in-delay2,
  .animate-verse,
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}