/* ============================================================
   motion.css — estados de animación y reduced-motion
   Las animaciones scroll-driven viven en js/main.js (GSAP).
   Acá: estados iniciales, keyframes CSS y el kill-switch.
   ============================================================ */

/* Estados iniciales para reveals GSAP.
   Solo se aplican si JS cargó (html.js) y no hay reduced motion,
   así el contenido nunca queda oculto sin JS. */
html.js:not(.reduced-motion) [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
}

html.js:not(.reduced-motion) .hero__title .line > span {
  transform: translateY(120%);
}

/* ---- Flicker de tubo fluorescente (palabra acento del hero) ---- */
html.js:not(.reduced-motion) .flicker {
  animation: tube-on 1.7s steps(1, end) 0.15s both;
}

@keyframes tube-on {
  0%    { opacity: 0.1; text-shadow: none; }
  8%    { opacity: 1; text-shadow: 0 0 30px var(--ember-glow); }
  11%   { opacity: 0.25; text-shadow: none; }
  17%   { opacity: 1; text-shadow: 0 0 30px var(--ember-glow); }
  20%   { opacity: 0.4; }
  26%   { opacity: 1; }
  32%   { opacity: 0.2; text-shadow: none; }
  38%, 100% { opacity: 1; text-shadow: 0 0 34px var(--ember-glow); }
}

/* ---- Marquee de marcas ---- */
html.js:not(.reduced-motion) .brands__row--a .brands__group {
  animation: marquee 46s linear infinite;
}

html.js:not(.reduced-motion) .brands__row--b .brands__group {
  animation: marquee 52s linear infinite reverse;
}

.brands__row:hover .brands__group {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

/* ---- Pulso del FAB ---- */
html.js:not(.reduced-motion) .fab__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #1fbe5f;
  animation: fab-pulse 2.6s var(--ease-out) infinite;
}

@keyframes fab-pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* ============================================================
   REDUCED MOTION — apaga todo. main.js también lee esta
   preferencia y no inicializa GSAP/Lenis.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .brands__row {
    overflow-x: auto;
  }

  .spine {
    display: none;
  }
}