/* ==========================================================================
   VDN Brands — animations.css
   Animaciones de entrada, apariciones al hacer scroll y movimientos
   continuos. Todo se desactiva si el visitante prefiere menos movimiento.
   ========================================================================== */

/* ---------- Entrada de titulares, línea por línea ---------- */
.reveal-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.reveal-line__inner {
  display: inline-block;
  animation: rise 1.1s var(--ease-out) both;
}

/* ---------- Aparición al cargar ---------- */
.fade-in {
  animation: fade-up 1s var(--ease-out) both;
}

.d-1 { animation-delay: 0.12s; }
.d-2 { animation-delay: 0.24s; }
.d-3 { animation-delay: 0.35s; }
.d-4 { animation-delay: 0.45s; }
.d-5 { animation-delay: 0.55s; }
.d-6 { animation-delay: 0.7s; }
.d-7 { animation-delay: 0.8s; }
.d-8 { animation-delay: 0.9s; }

/* ---------- Aparición al hacer scroll (la activa js/main.js) ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal]:not(.is-visible) {
    opacity: 0;
  }

  [data-reveal].is-visible {
    animation: reveal-up 0.9s var(--ease-out) both;
    animation-delay: var(--reveal-delay, 0s);
  }
}

/* ---------- Movimientos continuos ---------- */
.spin {
  animation: spin 24s linear infinite;
}

.pulse {
  animation: pulse 2.2s ease-in-out infinite;
}

.ping {
  animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.float {
  animation: float 7s ease-in-out infinite;
}

/* ---------- Keyframes ---------- */
@keyframes rise {
  from { transform: translateY(110%); }
  to { transform: none; }
}

@keyframes fade-up {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes reveal-up {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes counter-spin {
  to { transform: rotate(-360deg); }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

@keyframes ping {
  0% { opacity: 0.8; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

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

@keyframes grow-y {
  from { transform: scaleY(0); }
  to { transform: none; }
}

@keyframes swap-in {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}