/* =========================================================
   WAR Group — Animations System
   ========================================================= */

/* --- Reveal System --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Delays */
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }
.reveal[data-delay="4"] { transition-delay: 400ms; }
.reveal[data-delay="5"] { transition-delay: 500ms; }

/* --- Keyframes --- */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes fillProgress {
  0% { width: 0; }
  50% { width: 70%; }
  100% { width: 100%; }
}

@keyframes flickerIn {
  0% { opacity: 0; filter: blur(10px); }
  10% { opacity: 0.5; filter: blur(5px); }
  20% { opacity: 0.2; filter: blur(8px); }
  30% { opacity: 0.8; filter: blur(2px); }
  40% { opacity: 0.4; filter: blur(5px); }
  100% { opacity: 1; filter: blur(0); }
}

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

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

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

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

@keyframes sonarPulse {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

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

@keyframes glowPulse {
  0% { box-shadow: var(--hud-glow); }
  50% { box-shadow: 0 0 25px rgba(0, 150, 138, 0.3); }
  100% { box-shadow: var(--hud-glow); }
}

@keyframes borderGlow {
  0% { border-color: rgba(0, 150, 138, 0.2); }
  50% { border-color: rgba(0, 150, 138, 0.6); }
  100% { border-color: rgba(0, 150, 138, 0.2); }
}

@keyframes dataStream {
  from { transform: translateY(100%); }
  to { transform: translateY(-100%); }
}

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

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

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

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

/* --- HUD Elements --- */
.hud-frame__cursor {
  animation: blink 1s infinite;
}

.hud-frame__status-dot {
  animation: pulse 2s infinite;
}

.hud-frame__corner {
  animation: fadeIn 1.5s ease-out forwards;
}

/* --- Value Updates --- */
.value-update-flash {
  animation: valueFlash 0.5s ease-out;
}

@keyframes valueFlash {
  0% { color: var(--teal-light); text-shadow: 0 0 10px var(--teal-light); }
  100% { color: inherit; text-shadow: none; }
}

/* --- Reduced Motion --- */
@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;
  }
  
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}