/* ============================================================
   ANIMATIONS — Word Communion Church
   Pairs with main.js (adds .is-revealed via IntersectionObserver)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Scroll reveal ──────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal="right"]  { transform: translateX(28px); }
[data-reveal="left"]   { transform: translateX(-28px); }
[data-reveal].is-revealed,
[data-reveal="right"].is-revealed,
[data-reveal="left"].is-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

/* Stagger children of a reveal group */
/* Stagger children of a reveal group — each child now gets its own
   .is-revealed class from an individual IntersectionObserver entry,
   so this works correctly even when the group is much taller than
   the viewport (e.g. long mobile stacks like the Ministries grid). */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-reveal-group] > *.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero entrance (plays on load, not on scroll) ──────── */
.hero-anim-1, .hero-anim-2, .hero-anim-3, .hero-anim-4, .hero-anim-5 {
  opacity: 0;
  transform: translateY(16px);
  animation: heroIn 0.8s var(--ease-out) forwards;
}
.hero-anim-1 { animation-delay: 0.05s; }
.hero-anim-2 { animation-delay: 0.16s; }
.hero-anim-3 { animation-delay: 0.28s; }
.hero-anim-4 { animation-delay: 0.40s; }
.hero-anim-5 { animation-delay: 0.52s; }
@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Decorative spinning rings ──────────────────────────── */
.spin-slow { animation: spinSlow 60s linear infinite; }
@keyframes spinSlow { to { transform: translateY(-50%) rotate(360deg); } }

/* ── Floating particle dots ─────────────────────────────── */
.particle-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
  animation: particleFloat 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes particleFloat {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50%      { transform: translateY(-14px); opacity: 0.85; }
}

/* ── Marquee band ───────────────────────────────────────── */
.marquee-wrap { width: 100%; overflow: hidden; }
.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* ── Image zoom on hover ────────────────────────────────── */
.img-zoom { position: relative; }
.img-zoom img { transition: transform 0.6s var(--ease); }
.img-zoom:hover img { transform: scale(1.06); }

/* ── Pulsing gold button glow ───────────────────────────── */
.pulse-gold { animation: pulseGold 2.6s ease-in-out infinite; }
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 4px 20px rgba(201,168,76,0.35); }
  50%      { box-shadow: 0 4px 28px rgba(201,168,76,0.6); }
}

/* ── Shimmering gold button ─────────────────────────────── */
.btn-gold-shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--bg-primary);
}
.btn-gold-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: shimmerSweep 3.2s ease-in-out infinite;
}
@keyframes shimmerSweep {
  0%   { left: -60%; }
  50%  { left: 130%; }
  100% { left: 130%; }
}