/* ============================================================
 * animations.css — Keyframes reutilizables.
 * ============================================================ */

/* Parpadeo del cursor */
@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Marquee horizontal (texto antiguo: 2 copias exactas, se usa -50%). */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Marquee infinito para los logos de clientes: la animación traslada por
   EXACTAMENTE el ancho de una copia (en px, calculado por JS tras cargar
   las imágenes). Así, independientemente de cuántas copias haga falta
   clonar para cubrir viewports grandes, el bucle es siempre sin huecos. */
@keyframes marquee-seamless {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--marquee-copy-w, 0px) * -1)); }
}

/* Ripple en botones */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Fade-in modal */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Pop scale modal */
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Cohete despegando al entrar en pantalla */
@keyframes rocketLaunch {
  0% {
    opacity: 0;
    transform: translate(50vw, 100vh) rotate(-30deg) scale(0.5);
  }
  70% {
    opacity: 1;
    transform: translate(0, -10px) rotate(0) scale(1.05);
  }
  85% {
    transform: translate(0, 4px) rotate(0) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
}

/* Cohete disparándose para abrir modal */
@keyframes rocketLiftoff {
  to {
    opacity: 0;
    transform: translate(-20vw, -120vh) rotate(-20deg) scale(0.4);
  }
}

/* Flotación lunar (cohete + elementos flotantes fallback CSS) */
@keyframes moonFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

/* Partículas de humo/estela */
@keyframes trailPuff {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  40%  { opacity: 1; transform: translateY(6px) scale(1); }
  100% { opacity: 0; transform: translateY(18px) scale(0.2); }
}

/* Órbitas elípticas */
@keyframes orbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); }
}

/* Glow pulsante del astronauta */
@keyframes astroGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(7, 226, 254, 0.35)); }
  50%      { filter: drop-shadow(0 0 50px rgba(7, 226, 254, 0.6)); }
}

/* Icon bounce en services */
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Price pulse */
@keyframes pricePulse {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 16px var(--accent-glow); }
}

/* Glitch base */
@keyframes glitchAnim {
  0%   { clip-path: inset(20% 0 30% 0); transform: translate(-2px); }
  20%  { clip-path: inset(60% 0 10% 0); transform: translate(2px); }
  40%  { clip-path: inset(40% 0 40% 0); transform: translate(-1px); }
  60%  { clip-path: inset(10% 0 70% 0); transform: translate(1px); }
  80%  { clip-path: inset(80% 0 5% 0); transform: translate(-2px); }
  100% { clip-path: inset(30% 0 30% 0); transform: translate(0); }
}

/* Glitch estructural (dos pseudo-elementos desplazados en rojo/cian) */
.glitch {
  position: relative;
  display: inline-block;
  color: inherit;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
}
.glitch::before {
  color: var(--error-red);
  animation: glitchAnim 3s infinite;
  animation-delay: 0s;
  opacity: 0;
}
.glitch::after {
  color: var(--accent);
  animation: glitchAnim 3s infinite reverse;
  animation-delay: 1.5s;
  opacity: 0;
}
.glitch:hover::before,
.glitch:hover::after,
.glitch.is-active::before,
.glitch.is-active::after {
  opacity: 0.8;
}

/* Reveals controlados por GSAP (estado inicial) */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

/* Desactivaciones completas */
@media (prefers-reduced-motion: reduce) {
  #matrix-canvas { display: none; }
  .glitch::before, .glitch::after { display: none !important; }
  .marquee__track, .clients-marquee__track { animation: none !important; }
  [data-float="true"] { animation: none !important; }
  .orbit { animation: none !important; display: none; }
  [data-reveal] { opacity: 1; transform: none; }
}