/* ============================================================ */
/* UTILITIES — ANIMACIONES Y HELPERS v1.0                       */
/* Depende de: variables.css                                    */
/* ============================================================ */

/* === 1. Fade-in al scroll (Intersection Observer + CSS) === */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Stagger helpers */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }

/* === 2. Gradient text shimmer === */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--text-primary) 0%,
    var(--accent-primary) 50%,
    var(--text-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

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

/* === 3. Glow pulse en badges urgentes === */
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 59, 48, 0.2); }
  50% { box-shadow: 0 0 40px rgba(255, 59, 48, 0.4); }
}

/* === 4. Contador animado (tabular nums) === */
.counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* === 5. Visually hidden (A11y) === */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === 6. Textura de ruido sutil para fondos oscuros === */
.noise-bg {
  position: relative;
}

.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.noise-bg > * { position: relative; z-index: 1; }

/* === 7. Scroll indicator animado === */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.5; }
}