/* ==========================================================================
   NeonWait — Animations & Keyframes
   Author: NeonWait
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Motion Tokens / Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --ease-neon:       cubic-bezier(0.23, 1, 0.32, 1);
  --ease-bounce:     cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   0.3s;
  --duration-normal: 0.6s;
  --duration-slow:   1.2s;
  --duration-crawl:  3s;
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --------------------------------------------------------------------------
   Scale Animations
   -------------------------------------------------------------------------- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* --------------------------------------------------------------------------
   Neon Glow Animations
   -------------------------------------------------------------------------- */
@keyframes neonPulse {
  0%, 100% {
    text-shadow:
      0 0 7px  var(--neon-primary),
      0 0 10px var(--neon-primary),
      0 0 21px var(--neon-primary),
      0 0 42px var(--neon-accent),
      0 0 82px var(--neon-accent),
      0 0 92px var(--neon-accent);
  }
  50% {
    text-shadow:
      0 0 4px  var(--neon-primary),
      0 0 7px  var(--neon-primary),
      0 0 13px var(--neon-primary),
      0 0 26px var(--neon-accent),
      0 0 52px var(--neon-accent),
      0 0 62px var(--neon-accent);
  }
}

@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow:
      0 0 7px  var(--neon-primary),
      0 0 10px var(--neon-primary),
      0 0 21px var(--neon-primary),
      0 0 42px var(--neon-accent),
      0 0 82px var(--neon-accent);
  }
  20%, 24%, 55% {
    opacity: 0.6;
    text-shadow: none;
  }
}

@keyframes boxGlow {
  0%, 100% {
    box-shadow:
      0 0 5px  var(--neon-primary),
      0 0 10px var(--neon-primary),
      0 0 20px var(--neon-accent),
      0 0 40px var(--neon-accent);
  }
  50% {
    box-shadow:
      0 0 3px  var(--neon-primary),
      0 0 6px  var(--neon-primary),
      0 0 12px var(--neon-accent),
      0 0 24px var(--neon-accent);
  }
}

@keyframes borderGlow {
  0%, 100% {
    border-color: var(--neon-primary);
    box-shadow: 0 0 10px var(--neon-primary), inset 0 0 10px rgba(0,0,0,0.3);
  }
  50% {
    border-color: var(--neon-accent);
    box-shadow: 0 0 20px var(--neon-accent), inset 0 0 10px rgba(0,0,0,0.3);
  }
}

/* --------------------------------------------------------------------------
   Background Animations
   -------------------------------------------------------------------------- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes noiseScroll {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-50%, -50%); }
}

@keyframes floatParticle {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  50% {
    transform: translateY(-200px) translateX(30px);
  }
}

/* --------------------------------------------------------------------------
   Line / Border Animations
   -------------------------------------------------------------------------- */
@keyframes lineExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes dashOffset {
  to { stroke-dashoffset: 0; }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Countdown-specific Animations
   -------------------------------------------------------------------------- */
@keyframes flipDown {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(-90deg); }
}

@keyframes flipUp {
  0%   { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Loading / Progress Animations
   -------------------------------------------------------------------------- */
@keyframes progressBar {
  from { width: 0; }
  to   { width: var(--progress, 65%); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Utility Animation Classes
   -------------------------------------------------------------------------- */

/* Fade In */
.anim-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-smooth) both;
}

.anim-fade-in-up {
  animation: fadeInUp var(--duration-normal) var(--ease-neon) both;
}

.anim-fade-in-down {
  animation: fadeInDown var(--duration-normal) var(--ease-neon) both;
}

.anim-fade-in-left {
  animation: fadeInLeft var(--duration-normal) var(--ease-neon) both;
}

.anim-fade-in-right {
  animation: fadeInRight var(--duration-normal) var(--ease-neon) both;
}

/* Scale */
.anim-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-bounce) both;
}

/* Neon */
.anim-neon-pulse {
  animation: neonPulse var(--duration-crawl) ease-in-out infinite;
}

.anim-neon-flicker {
  animation: neonFlicker 4s linear infinite;
}

.anim-box-glow {
  animation: boxGlow 2s ease-in-out infinite;
}

.anim-border-glow {
  animation: borderGlow 2s ease-in-out infinite;
}

/* Background */
.anim-gradient {
  animation: gradientShift 8s ease infinite;
  background-size: 400% 400%;
}

/* Rotate */
.anim-rotate {
  animation: rotateSlow 20s linear infinite;
}

/* Spin */
.anim-spin {
  animation: spin 1s linear infinite;
}

/* Stagger delays */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-delay-6 { animation-delay: 0.6s; }
.anim-delay-7 { animation-delay: 0.7s; }
.anim-delay-8 { animation-delay: 0.8s; }

/* --------------------------------------------------------------------------
   Reduced Motion — Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}