/* ============================================================
   animations.css — Keyframes & Motion System
   ============================================================ */

/* ===================== KEYFRAMES ===================== */

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

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

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

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

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.95); }
}

@keyframes ping {
  0%   { transform: scale(1); opacity: 0.8; }
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

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

@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%       { transform: translateY(-10px); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

@keyframes glitch {
  0%   { text-shadow:  0.05em 0 0 rgba(0,242,255,0.75), -0.025em -0.05em 0 rgba(119,1,208,0.75),  0.025em  0.05em 0 rgba(255,246,228,0.75); }
  14%  { text-shadow:  0.05em 0 0 rgba(0,242,255,0.75), -0.025em -0.05em 0 rgba(119,1,208,0.75),  0.025em  0.05em 0 rgba(255,246,228,0.75); }
  15%  { text-shadow: -0.05em -0.025em 0 rgba(0,242,255,0.75), 0.025em 0.025em 0 rgba(119,1,208,0.75), -0.05em -0.05em 0 rgba(255,246,228,0.75); }
  49%  { text-shadow: -0.05em -0.025em 0 rgba(0,242,255,0.75), 0.025em 0.025em 0 rgba(119,1,208,0.75), -0.05em -0.05em 0 rgba(255,246,228,0.75); }
  50%  { text-shadow:  0.025em  0.05em 0 rgba(0,242,255,0.75), 0.05em  0 0 rgba(119,1,208,0.75),  0 -0.05em 0 rgba(255,246,228,0.75); }
  99%  { text-shadow:  0.025em  0.05em 0 rgba(0,242,255,0.75), 0.05em  0 0 rgba(119,1,208,0.75),  0 -0.05em 0 rgba(255,246,228,0.75); }
  100% { text-shadow: -0.025em 0 0 rgba(0,242,255,0.75), -0.025em -0.025em 0 rgba(119,1,208,0.75), -0.025em -0.05em 0 rgba(255,246,228,0.75); }
}

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

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

@keyframes progressFill {
  from { width: 0%; }
}

@keyframes rotateRing {
  to { transform: rotate(360deg); }
}

@keyframes bootProgress {
  from { stroke-dashoffset: 628; }
  to   { stroke-dashoffset: 0; }
}

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

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

@keyframes ambientFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}

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

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

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

/* Entrance Animations */
.anim-fade-in      { animation: fadeIn      var(--dur-slow)  var(--ease-smooth) both; backface-visibility: hidden; }
.anim-fade-in-up   { animation: fadeInUp    var(--dur-xslow) var(--ease-smooth) both; backface-visibility: hidden; }
.anim-fade-in-down { animation: fadeInDown  var(--dur-xslow) var(--ease-smooth) both; backface-visibility: hidden; }
.anim-fade-in-left { animation: fadeInLeft  var(--dur-xslow) var(--ease-smooth) both; backface-visibility: hidden; }
.anim-fade-in-right{ animation: fadeInRight var(--dur-xslow) var(--ease-smooth) both; backface-visibility: hidden; }

/* Stagger Delays */
.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 320ms; }
.delay-4 { animation-delay: 450ms; }
.delay-5 { animation-delay: 600ms; }

/* Continuous Animations */
.anim-pulse  { animation: pulse  2s ease-in-out infinite; }
.anim-bounce { animation: bounce 4s ease-in-out infinite; }
.anim-spin   { animation: spin   4s linear infinite; }
.anim-glitch { animation: glitch 4s ease-in-out infinite; }
.anim-float  { animation: ambientFloat 8s ease-in-out infinite; }

/* Tag floats with stagger */
.tag-float-1 { animation: tagFloat 4s ease-in-out infinite; }
.tag-float-2 { animation: tagFloat 3s ease-in-out infinite; animation-delay: 0.5s; }
.tag-float-3 { animation: tagFloat 5s ease-in-out infinite; animation-delay: 1s; }
.tag-float-4 { animation: tagFloat 6s ease-in-out infinite; animation-delay: 0.2s; }

/* Ping for status indicators */
.anim-ping {
  position: relative;
}
.anim-ping::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: ping 1.8s ease-out infinite;
  will-change: transform, opacity;
}

/* Glitch text */
.glitch-text { animation: glitch 4s ease-in-out infinite; }

/* Typing cursor */
.cursor-blink::after {
  content: '|';
  animation: cursorBlink 1s step-end infinite;
  color: var(--primary-container);
  margin-left: 2px;
}

/* Number counter animation */
.number-roll { animation: numberRoll 0.6s var(--ease-spring) both; }

/* Section entrance (triggered by JS) */
.section-enter { animation: fadeInUp 0.5s var(--ease-smooth) both; }

/* ===================== TRANSITION UTILITIES ===================== */
.transition-all  { transition: all var(--dur-base) var(--ease-smooth); }
.transition-fast { transition: all var(--dur-fast) var(--ease-smooth); }
.transition-slow { transition: all var(--dur-slow) var(--ease-smooth); }

/* ===================== HOVER EFFECTS ===================== */
.hover-lift:hover       { transform: translateY(-4px); }
.hover-scale:hover      { transform: scale(1.03); }
.hover-slide:hover      { transform: translateX(6px); }
.hover-glow:hover       { box-shadow: var(--glow-cyan); }
.hover-glow-strong:hover{ box-shadow: var(--glow-cyan-strong); }

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}