/* ═══════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
═══════════════════════════════════════════════════ */

/* Loader */
@keyframes logoGlow {
  from { filter: drop-shadow(0 0 10px var(--cyan)); }
  to   { filter: drop-shadow(0 0 30px var(--cyan)) drop-shadow(0 0 60px rgba(0,229,255,0.4)); }
}
@keyframes loaderBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Background gradient orbs */
@keyframes orbDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(100px, 80px) scale(1.2); }
}
@keyframes orbDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-80px, -60px) scale(0.9); }
}
@keyframes orbDrift3 {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) translate(60px, -80px) scale(1.1); }
}

/* Hero orbs float */
@keyframes float1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-30px, 20px); }
}
@keyframes float2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(20px, -30px); }
}
@keyframes float3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-20px, 15px); }
}

/* Eyebrow dot */
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}

/* Scroll indicator */
@keyframes scrollPulse {
  0%   { opacity: 1; transform: scaleY(1) translateY(0); }
  50%  { opacity: 0.4; transform: scaleY(0.5) translateY(10px); }
  100% { opacity: 1; transform: scaleY(1) translateY(0); }
}
@keyframes fadeInScroll {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 0.6; transform: translateX(-50%) translateY(0); }
}

/* Glitch text effect */
@keyframes textGlitch {
  0%   { text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta); clip-path: none; }
  20%  { text-shadow: -3px 0 var(--magenta), 3px 0 var(--cyan); clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: translateX(2px); }
  40%  { text-shadow: 2px 0 var(--cyan), -2px 0 var(--violet); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translateX(-2px); }
  60%  { text-shadow: none; clip-path: none; transform: none; }
  80%  { text-shadow: 1px 0 var(--magenta); clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%); transform: translateX(1px); }
  100% { text-shadow: none; clip-path: none; transform: none; }
}

/* Ticker scroll */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Status dot blink */
@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Cursor blink for classified cards */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Signal bar enter */
@keyframes barGrow {
  from { width: 0%; }
  to   { width: var(--fill); }
}

/* Loading bar fill (JS-driven via width style, so no keyframe needed) */

/* Card shimmer on hover (for mobile where JS holo isn't applied) */
@keyframes cardShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Manifesto statement entrance
   Must include translate(-50%,-50%) so the absolute centering
   is preserved throughout the animation. */
@keyframes statementIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)) scale(0.97); filter: blur(8px); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}
@keyframes statementOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  to   { opacity: 0; transform: translate(-50%, calc(-50% - 18px)) scale(0.97); filter: blur(6px); }
}
.manifesto-statement.enter { animation: statementIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.manifesto-statement.exit  { animation: statementOut 0.4s ease forwards; }

/* Particle trail */
@keyframes trailFade {
  from { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}

/* Number counter pop */
@keyframes counterPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Nav logo entrance */
@keyframes logoPulse {
  0%   { text-shadow: 0 0 10px var(--cyan); }
  50%  { text-shadow: 0 0 30px var(--cyan), 0 0 60px rgba(0,229,255,0.4); }
  100% { text-shadow: 0 0 10px var(--cyan); }
}
.logo-bd { animation: logoPulse 4s ease-in-out infinite; }

/* Section entry glow line */
@keyframes glowLine {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}

/* Sound wave rings (on sound toggle when active) */
@keyframes soundRing {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2); opacity: 0; }
}

/* Hero canvas subtle breathe */
@keyframes canvasBreathe {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 1; }
}
#bg-canvas { animation: canvasBreathe 8s ease-in-out infinite; }