/* ==========================================================================
   Sheetlz Numerologgy — animations.css
   All keyframes and animation utility classes.
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Rotation ---------- */
.spin-slow { animation: spin 40s linear infinite; transform-origin: center; }
.spin-rev  { animation: spin 60s linear infinite reverse; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pulsing glow (hero logo) ---------- */
.pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }
@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(212,175,55,.35)); }
  50%      { filter: drop-shadow(0 0 34px rgba(212,175,55,.7)); }
}

/* ---------- Shimmer headline ---------- */
.shimmer {
  background: linear-gradient(100deg,#F4E5A8 20%,#fff 40%,#D4AF37 55%,#F4E5A8 75%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* ---------- Scroll cue bounce ---------- */
.scroll-cue { animation: bounce 2s infinite; }
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

/* ---------- Floating numerology numbers (created by animations.js) ---------- */
.float-num {
  position: absolute;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: rgba(11,61,46,.05);     /* very light green numerology numbers */
  user-select: none;
  pointer-events: none;
  animation: floaty linear infinite;
}
@keyframes floaty {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translateY(-120vh) rotate(40deg); opacity: 0; }
}

/* ---------- Rising golden particles (created by animations.js) ---------- */
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold, #D4AF37);
  opacity: .28;                  /* subtle gold motes, not a cosmic field */
  pointer-events: none;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: .6; }
  100% { transform: translateY(-110vh); opacity: 0; }
}

/* ---------- WhatsApp floating ring ---------- */
.ring::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: rgba(37,211,102,.45);
  animation: ping-ring 2s ease-out infinite;
  z-index: -1;
}
@keyframes ping-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Reduced motion: disable everything ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}