/* ============================================================
   XIOM — Animation System
   ============================================================ */

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

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

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

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

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

@keyframes progressBar {
  from { width: 0; }
  to { width: 80%; }
}

.cursor-blink {
  animation: blink 1s infinite;
}

.hero-content {
  animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-headline {
  animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-ctas {
  animation: fadeInUp 0.8s ease 0.6s both;
}

.l5-row {
  animation: pulse 3s ease-in-out infinite;
}

.counter {
  animation: counter 0.25s ease both;
}

.phase-progress-fill {
  animation: progressBar 1.5s ease forwards;
}

.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.scanline-overlay::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.015) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: scanline 8s linear infinite;
}

.anim-fade-in-up {
  animation: fadeInUp 0.8s ease both;
}

.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; }