/* ============================================================
   Astrology — animations.css  (Fixed + Upgraded)
   ============================================================ */

/* ── Keyframes ── */
@keyframes floatPlanet {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(2deg); }
  66%       { transform: translateY(-10px) rotate(-1.5deg); }
}
@keyframes rotateSlow {
  from { transform: translate(-50%,-50%) rotateX(70deg) rotateZ(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(70deg) rotateZ(360deg); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.18); }
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50%       { transform: translateY(-12px) rotateZ(0.5deg); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px var(--glow-color, rgba(124,82,255,0.3)); }
  50%       { box-shadow: 0 0 55px var(--glow-color, rgba(124,82,255,0.65)); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Page transition ── */
#page-transition {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--bg-void);
  transform: translateY(-100%);
  pointer-events: none;
}
#page-transition.entering { animation: ptEnter .5s var(--ease-smooth) forwards; }
#page-transition.leaving  { animation: ptLeave .5s var(--ease-smooth) forwards; }
@keyframes ptEnter { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ptLeave { from { transform: translateY(0); }    to { transform: translateY(-100%); } }

/* ── Float card ── */
.float-card { animation: cardFloat 6s ease-in-out infinite; }
.float-card:nth-child(2) { animation-delay: -2s; }
.float-card:nth-child(3) { animation-delay: -4s; }
.float-card:nth-child(4) { animation-delay: -1s; }
.float-card:nth-child(5) { animation-delay: -3s; }

/* ── Pulse glow helpers ── */
.pulse-violet { animation: pulseGlow 3s ease-in-out infinite; --glow-color: rgba(124,82,255,0.42); }
.pulse-gold   { animation: pulseGlow 3s ease-in-out infinite 1s; --glow-color: rgba(212,168,67,0.42); }
.pulse-cyan   { animation: pulseGlow 3s ease-in-out infinite 0.5s; --glow-color: rgba(0,212,200,0.38); }

/* ── Score bar ── */
.score-fill { transition: width 1.4s cubic-bezier(0.23, 1, 0.32, 1); }

/* ── Shimmer ── */
.shimmer {
  background: linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ── Typing cursor ── */
.typing-cursor::after { content: '|'; animation: blink .9s step-end infinite; color: var(--teal); margin-left: 2px; }

/* ── Neon text ── */
.neon-text { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; }

/* ── Cosmic divider reveal via GSAP ── */
.cosmic-divider {
  transform-origin: center;
}

/* ── Global grain overlay (subtle film grain) ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.018;
  mix-blend-mode: overlay;
}