/* ============================================================
   JOE COOVER MAGIC — Animations
   Keyframes: glitch, glow-pulse, scanline, fade-in-up, marquee
   ============================================================ */

/* --- Marquee --- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Fade In Up --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Fade In --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Glow Pulse (for CTA buttons, hero elements) --- */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255,45,120,0.7), 0 0 40px rgba(255,45,120,0.3); }
  50%       { box-shadow: 0 0 32px rgba(255,45,120,1),   0 0 70px rgba(255,45,120,0.5); }
}

@keyframes glowPulseCyan {
  0%, 100% { box-shadow: 0 0 18px rgba(0,245,255,0.7), 0 0 40px rgba(0,245,255,0.3); }
  50%       { box-shadow: 0 0 32px rgba(0,245,255,1),   0 0 70px rgba(0,245,255,0.5); }
}

/* --- Text Glow Pulse (for headline accents) --- */
@keyframes textGlowPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(255,45,120,0.9), 0 0 22px rgba(255,45,120,0.5); }
  50%       { text-shadow: 0 0 16px rgba(255,45,120,1),  0 0 40px rgba(255,45,120,0.8); }
}

/* --- VHS Glitch (hero load animation) --- */
@keyframes glitchMain {
  0%   { clip-path: inset(0 0 100% 0); opacity: 0; }
  5%   { clip-path: inset(0 0 95% 0); opacity: 1; }
  10%  { clip-path: inset(10% 0 80% 0); transform: translateX(-3px); }
  15%  { clip-path: inset(20% 0 60% 0); transform: translateX(3px); }
  20%  { clip-path: inset(30% 0 40% 0); transform: translateX(-2px); }
  25%  { clip-path: inset(40% 0 20% 0); transform: translateX(2px); }
  30%  { clip-path: inset(50% 0 10% 0); transform: translateX(0); }
  35%  { clip-path: inset(0); opacity: 1; }
  100% { clip-path: inset(0); opacity: 1; }
}

@keyframes glitchSlice1 {
  0%, 90%, 100% { transform: translateX(0);    opacity: 0; }
  91%            { transform: translateX(-6px); opacity: 0.7; clip-path: inset(20% 0 70% 0); }
  92%            { transform: translateX(6px);  opacity: 0.7; clip-path: inset(20% 0 70% 0); }
  93%            { transform: translateX(-3px); opacity: 0.5; clip-path: inset(40% 0 50% 0); }
  94%            { transform: translateX(0);    opacity: 0; }
}

@keyframes glitchSlice2 {
  0%, 88%, 96%, 100% { transform: translateX(0);    opacity: 0; }
  89%                 { transform: translateX(8px);  opacity: 0.6; clip-path: inset(60% 0 20% 0); }
  90%                 { transform: translateX(-8px); opacity: 0.6; clip-path: inset(60% 0 20% 0); }
  91%                 { transform: translateX(0);    opacity: 0; }
}

/* --- Scanline Sweep --- */
@keyframes scanlineSweep {
  0%   { transform: translateY(-100%); opacity: 0.3; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* --- Float (for decorative elements) --- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* --- Spin (loading, icon accents) --- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Scale Bounce (for CTA emphasis) --- */
@keyframes scaleBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* --- Slide In Left --- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Slide In Right --- */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   ANIMATION UTILITY CLASSES
   ============================================================ */

/* Hero elements — triggered on page load */
.anim-glitch-in {
  animation: glitchMain 1.2s ease-out forwards;
}

.anim-fade-in {
  animation: fadeIn 0.8s ease forwards;
}

.anim-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.anim-fade-in-up.delay-1 { animation-delay: 0.15s; }
.anim-fade-in-up.delay-2 { animation-delay: 0.3s; }
.anim-fade-in-up.delay-3 { animation-delay: 0.45s; }
.anim-fade-in-up.delay-4 { animation-delay: 0.6s; }

/* Persistent loops */
.anim-glow-pulse  { animation: glowPulse 2.5s ease-in-out infinite; }
.anim-glow-cyan   { animation: glowPulseCyan 2.5s ease-in-out infinite; }
.anim-text-glow   { animation: textGlowPulse 2.8s ease-in-out infinite; }
.anim-float       { animation: float 4s ease-in-out infinite; }
.anim-scale-bounce { animation: scaleBounce 3s ease-in-out infinite; }

/* Glitch overlay (hero section background element) */
.glitch-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.glitch-overlay::before,
.glitch-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
}
.glitch-overlay.active::before {
  animation: glitchSlice1 8s ease-in-out infinite;
  background: rgba(255,45,120,0.08);
  mix-blend-mode: screen;
}
.glitch-overlay.active::after {
  animation: glitchSlice2 8s ease-in-out infinite 0.4s;
  background: rgba(0,245,255,0.08);
  mix-blend-mode: screen;
}

/* Scanline sweep (one-time on hero load) */
.scanline-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.4), transparent);
  pointer-events: none;
  z-index: 4;
  animation: scanlineSweep 1.8s ease-out 0.2s forwards;
}

/* ============================================================
   REDUCE MOTION overrides already in style.css
   ============================================================ */