/* ==========================================================================
   JUDAHEGO SYSTEMS — ANIMACIONES Y CINEMÁTICA VISUAL
   CSS3 Nativo & Rendimiento Optimizado por Hardware (transform & opacity)
   "Sistemas que se adaptan a tu negocio. No al revés."
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SECUENCIA CINEMATOGRÁFICA INICIAL (HERO INTRO TIMELINE)
   -------------------------------------------------------------------------- */
@keyframes heroIntroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroIntroScaleUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes heroIntroNodeLeft {
  0% {
    opacity: 0;
    transform: translateX(-24px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes heroIntroNodeRight {
  0% {
    opacity: 0;
    transform: translateX(24px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Clases de Entrada Secuenciada */
.intro-bg {
  animation: heroIntroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-nav {
  animation: heroIntroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-hero-tag {
  animation: heroIntroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-hero-title {
  animation: heroIntroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-hero-lead {
  animation: heroIntroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-hero-cta {
  animation: heroIntroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-circuits {
  animation: heroIntroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --------------------------------------------------------------------------
   2. REVELADO SUAVE AL HACER SCROLL (INTERSECTION OBSERVER)
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* --------------------------------------------------------------------------
   3. FLOTACIÓN ORGÁNICA DESFASADA (ORGANIC LEVITATION)
   -------------------------------------------------------------------------- */
@keyframes floatTerminal {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-7px);
  }
}

.hero-center-terminal.floating {
  animation: floatTerminal 6.5s ease-in-out infinite;
  opacity: 1;
}

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

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

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

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

.node-pos-1.floating { animation: floatNode1 5.2s ease-in-out infinite; opacity: 1; }
.node-pos-2.floating { animation: floatNode2 6.0s ease-in-out infinite 0.6s; opacity: 1; }
.node-pos-3.floating { animation: floatNode3 5.6s ease-in-out infinite 1.2s; opacity: 1; }
.node-pos-4.floating { animation: floatNode4 6.4s ease-in-out infinite 1.8s; opacity: 1; }

/* --------------------------------------------------------------------------
   4. FLUJO DE CIRCUITOS Y PULSOS LUMINOSOS
   -------------------------------------------------------------------------- */
@keyframes circuitFlow {
  0% {
    stroke-dashoffset: 48;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.circuit-path.active {
  animation: circuitFlow 1.8s linear infinite;
}

/* Pulso del Indicador de Estado (Verde Esmeralda) */
@keyframes beaconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px var(--green);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 14px rgba(86, 227, 159, 0.85);
  }
}

.terminal-status-indicator {
  animation: beaconPulse 2.4s ease-in-out infinite;
}

/* Respiración Sutil del Resplandor de Fondo */
@keyframes glowBreatheAmber {
  0%, 100% {
    opacity: 0.07;
    transform: scale(1);
  }
  50% {
    opacity: 0.12;
    transform: scale(1.08);
  }
}

.ambient-glow-amber {
  animation: glowBreatheAmber 9s ease-in-out infinite;
}

@keyframes glowBreatheCyan {
  0%, 100% {
    opacity: 0.08;
    transform: scale(1);
  }
  50% {
    opacity: 0.14;
    transform: scale(1.06);
  }
}

.ambient-glow-cyan {
  animation: glowBreatheCyan 8s ease-in-out infinite 1s;
}

/* --------------------------------------------------------------------------
   5. MICRO-INTERACCIONES EN ELEMENTOS DE DATOS
   -------------------------------------------------------------------------- */
@keyframes pulseDot {
  0%, 100% {
    r: 3.5;
    opacity: 0.9;
  }
  50% {
    r: 5.5;
    opacity: 0.4;
  }
}

.chart-pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   6. ACCESIBILIDAD: PREFERS-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-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-center-terminal,
  .system-node {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}