/* ============================================================
   Zantrexio – zx-animations.css
   Animation library | zantrexio.com
   ============================================================ */

/* ── Particle field ──────────────────────────────────────── */
@keyframes zx-particle-drift {
  0%   { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .3; }
  100% { transform: translateY(-100px) translateX(60px) scale(1.2); opacity: 0; }
}

/* ── Glow pulse ───────────────────────────────────────────── */
@keyframes zx-glow-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(30,144,255,0.3); }
  50%      { box-shadow: 0 0 50px rgba(30,144,255,0.7), 0 0 80px rgba(0,212,255,0.3); }
}
.zx-glow-pulse { animation: zx-glow-pulse 3s ease-in-out infinite; }

/* ── Border flow ─────────────────────────────────────────── */
@keyframes zx-border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.zx-border-animated {
  background: linear-gradient(270deg, #1e90ff, #00d4ff, #39ff14, #7c3aed, #1e90ff);
  background-size: 400% 400%;
  animation: zx-border-flow 6s ease infinite;
  padding: 2px;
  border-radius: 14px;
}
.zx-border-animated-inner {
  background: var(--zx-card);
  border-radius: 12px;
  padding: 1.5rem;
}

/* ── SVG path draw ───────────────────────────────────────── */
@keyframes zx-path-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
.zx-svg-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.zx-svg-draw.zx-drawn { animation: zx-path-draw 2s ease forwards; }

/* ── Scan line ───────────────────────────────────────────── */
@keyframes zx-scan {
  0%   { top: 0; }
  100% { top: 100%; }
}
.zx-scan-wrap { position: relative; overflow: hidden; }
.zx-scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent);
  animation: zx-scan 3s linear infinite;
  pointer-events: none;
}

/* ── Typing cursor ───────────────────────────────────────── */
@keyframes zx-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}
.zx-cursor::after {
  content: '|';
  color: var(--zx-cyan);
  animation: zx-blink 1s step-end infinite;
}

/* ── Shimmer skeleton ────────────────────────────────────── */
@keyframes zx-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.zx-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: zx-shimmer 1.8s infinite;
}

/* ── Floating elements ───────────────────────────────────── */
@keyframes zx-float-slow { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes zx-float-med  { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes zx-float-fast { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.zx-float-slow { animation: zx-float-slow 5s ease-in-out infinite; }
.zx-float-med  { animation: zx-float-med  3.5s ease-in-out infinite; }
.zx-float-fast { animation: zx-float-fast 2.5s ease-in-out infinite; }

/* ── Decorative geometric ────────────────────────────────── */
.zx-geo-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.zx-geo-deco-1 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(30,144,255,0.08) 0%, transparent 70%);
  top: -50px; right: -80px;
  animation: zx-float-slow 8s ease-in-out infinite;
}
.zx-geo-deco-2 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(124,58,237,0.1) 0%, transparent 70%);
  bottom: 50px; left: -60px;
  animation: zx-float-med 6s ease-in-out infinite;
}

/* ── Neon text flicker ───────────────────────────────────── */
@keyframes zx-neon-flicker {
  0%,19%,21%,23%,25%,54%,56%,100% {
    text-shadow: 0 0 10px rgba(57,255,20,0.6), 0 0 20px rgba(57,255,20,0.4), 0 0 40px rgba(57,255,20,0.2);
  }
  20%,24%,55% { text-shadow: none; }
}
.zx-neon-flicker { animation: zx-neon-flicker 5s infinite; }

/* ── Parallax wrapper ────────────────────────────────────── */
.zx-parallax-wrap { will-change: transform; }

/* ── Stagger animation helpers ───────────────────────────── */
.zx-stagger-1 { transition-delay: .1s; }
.zx-stagger-2 { transition-delay: .2s; }
.zx-stagger-3 { transition-delay: .3s; }
.zx-stagger-4 { transition-delay: .4s; }
.zx-stagger-5 { transition-delay: .5s; }
.zx-stagger-6 { transition-delay: .6s; }

/* ── Counter roll ────────────────────────────────────────── */
@keyframes zx-counter-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zx-animated-metric { animation: zx-counter-up .4s ease forwards; }

/* ── Page transition ─────────────────────────────────────── */
@keyframes zx-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zx-page-enter { animation: zx-page-in .5s ease forwards; }

/* ── Hover lift shadow ───────────────────────────────────── */
.zx-hover-lift {
  transition: transform .3s ease, box-shadow .3s ease;
}
.zx-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

/* ── Score result pulse ──────────────────────────────────── */
@keyframes zx-score-reveal {
  0%   { opacity: 0; transform: scale(0.8); }
  60%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.zx-score-animate { animation: zx-score-reveal .6s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ── Gradient background animation ──────────────────────── */
@keyframes zx-bg-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.zx-animated-gradient-bg {
  background: linear-gradient(135deg, var(--zx-navy), #0d1b33, #111827, #0a1628);
  background-size: 400% 400%;
  animation: zx-bg-shift 12s ease infinite;
}

/* ── Quiz answer reveal ──────────────────────────────────── */
@keyframes zx-answer-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.zx-shake { animation: zx-answer-shake .4s ease; }

@keyframes zx-answer-correct-bounce {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.zx-correct-bounce { animation: zx-answer-correct-bounce .3s ease; }