/* ==========================================================================
   TCL Clear — Animation Keyframes & Classes
   ========================================================================== */

/* ==========================================================================
   Keyframes
   ========================================================================== */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(153, 47, 247, 0.4);
  }
  50% {
    opacity: 0.85;
    box-shadow: 0 0 20px 4px rgba(153, 47, 247, 0.2);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

@keyframes glitch {
  0%, 90%, 100% {
    transform: translate(0);
    text-shadow: none;
  }
  92% {
    transform: translate(2px, -1px);
    text-shadow: -2px 0 #992ff7, 2px 0 #00d4aa;
  }
  94% {
    transform: translate(-2px, 1px);
    text-shadow: 2px 0 #992ff7, -2px 0 #00d4aa;
  }
  96% {
    transform: translate(1px, 2px);
    text-shadow: -1px 0 #ff4757, 1px 0 #992ff7;
  }
  98% {
    transform: translate(-1px, -2px);
    text-shadow: 1px 0 #00d4aa, -1px 0 #ff4757;
  }
}

@keyframes progressBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

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

/* ==========================================================================
   Animation Classes
   ========================================================================== */

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease both;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease both;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ==========================================================================
   Stagger Delays
   ========================================================================== */

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up,
  .animate-fade-in,
  .animate-float,
  .animate-pulse,
  .animate-spin {
    animation: none;
  }

  .animate-fade-in-up,
  .animate-fade-in {
    opacity: 1;
    transform: none;
  }
}