/* ===== KEYFRAME ANIMATIONS ===== */

@keyframes pulseGlow {
  0%, 100% { filter: brightness(1); text-shadow: 0 0 10px rgba(0,85,255,0.4); }
  50% { filter: brightness(1.3); text-shadow: 0 0 30px rgba(0,85,255,0.9), 0 0 60px rgba(123,47,247,0.5); }
}

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

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes glitch {
  0% { transform: translate(0); clip-path: none; }
  2% { transform: translate(-3px, 0); clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%); }
  4% { transform: translate(3px, 0); clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%); }
  6% { transform: translate(0); clip-path: none; }
  100% { transform: translate(0); clip-path: none; }
}

@keyframes glitchShift {
  0%, 100% { left: 0; opacity: 0; }
  2% { left: -4px; opacity: 0.7; }
  4% { left: 4px; opacity: 0.7; }
  6% { left: 0; opacity: 0; }
}

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

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(0, 85, 255, 0.3); box-shadow: 0 0 10px rgba(0, 85, 255, 0.1); }
  50% { border-color: rgba(123, 47, 247, 0.6); box-shadow: 0 0 30px rgba(123, 47, 247, 0.3); }
}

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

@keyframes fadeInUp {
  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); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

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

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

@keyframes orbitRing {
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

@keyframes waveMove {
  0% { transform: translateX(0) scaleY(1); }
  50% { transform: translateX(-25%) scaleY(0.8); }
  100% { transform: translateX(-50%) scaleY(1); }
}

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

@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    box-shadow: 0 0 5px var(--primary), 0 0 15px var(--primary), 0 0 30px var(--secondary);
  }
  20%, 24%, 55% { box-shadow: none; }
}

@keyframes particleFly {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

@keyframes morphBlob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 40% / 40% 30% 60% 50%; }
  75% { border-radius: 40% 30% 60% 50% / 70% 40% 50% 30%; }
}

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

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

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

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

/* ===== ANIMATION UTILITY CLASSES ===== */
.anim-fade-up { opacity: 0; animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.anim-fade-left { opacity: 0; animation: fadeInLeft 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.anim-fade-right { opacity: 0; animation: fadeInRight 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.anim-scale { opacity: 0; animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: floatSlow 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }
.animate-border-glow { animation: borderGlow 3s ease-in-out infinite; }
.animate-gradient { background-size: 200% 200%; animation: gradientShift 4s ease infinite; }

/* ===== SCROLL-TRIGGERED REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-35px); transition: opacity 0.7s, transform 0.7s; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(35px); transition: opacity 0.7s, transform 0.7s; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ===== GLITCH TEXT ===== */
.glitch {
  position: relative;
  animation: glitch 5s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg);
}

.glitch::before {
  color: var(--accent);
  animation: glitchShift 5s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.glitch::after {
  color: var(--accent2);
  animation: glitchShift 5s infinite 0.1s;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

/* ===== SCAN LINE EFFECT ===== */
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ===== GRADIENT TEXT ===== */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-animated {
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent), var(--primary));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* ===== TAG / BADGE ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 30px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 1px;
  border: var(--border);
  color: var(--accent);
  background: rgba(0, 212, 255, 0.06);
}

/* ===== GLOW LINE ===== */
.glow-line {
  height: 1px;
  background: var(--gradient);
  box-shadow: 0 0 12px rgba(0, 85, 255, 0.6);
  margin: 40px auto;
  width: 120px;
}