/*
 * NOTE: All opacity/transform initial states for GSAP-animated elements
 * are set via gsap.set() in JS, NOT here in CSS.
 * This ensures content remains visible if JS/GSAP fails to load.
 */

/* ─── Reduced motion — disable ALL animations and transitions ─── */
@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;
  }
}

/* ─── CSS-only micro-animations ─── */

/* ── Marquee: derecha → izquierda (RTL)
   -50% = exactamente 1 set de logos (el contenido está duplicado)
   Al llegar a -50% el loop comienza desde el inicio sin saltos ── */
@keyframes marquee-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Marquee: izquierda → derecha (LTR) ── */
@keyframes marquee-ltr {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%       { transform: translateY(8px); opacity: 1; }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 184, 48, 0); }
  50%       { box-shadow: 0 0 0 8px rgba(122, 184, 48, 0.1); }
}

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

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

/* ─── Accent line that grows on scroll ─── */
.accent-line {
  display: block;
  height: 2px;
  background: var(--accent-gradient);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--transition-slow);
}

.accent-line.visible {
  transform: scaleX(1);
}

/* ─── Number counter wrapper (JetBrains Mono) ─── */
.counter-wrap {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 500;
  color: var(--accent-primary);
  line-height: 1;
}