/* ==========================================================================
   MOXIFY · ANIMACIONES
   Keyframes + el sistema de aparición al hacer scroll.

   Cómo se usa el reveal:
     <div data-reveal>                     → aparece desde abajo
     <div data-reveal="izquierda">         → entra desde la izquierda
     <div data-reveal="derecha">           → entra desde la derecha
     <div data-reveal="zoom">              → entra escalando
     <div data-reveal="mascara">           → se descubre de abajo a arriba
     <div data-reveal data-reveal-delay="120">  → retrasa 120 ms
     <div data-reveal-grupo>               → escalona a sus hijos automáticamente
   ========================================================================== */

/* ---------------------------------------------------------------
   Reveal al hacer scroll
   --------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out),
              clip-path var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal=""],
[data-reveal="arriba"]    { transform: translateY(32px); }
[data-reveal="izquierda"] { transform: translateX(-46px); }
[data-reveal="derecha"]   { transform: translateX(46px); }
[data-reveal="zoom"]      { transform: scale(.92); }

[data-reveal="mascara"] {
  clip-path: inset(0 0 100% 0);
  transform: translateY(16px);
}

/* En móvil los desplazamientos laterales se cambian por uno vertical:
   ocupan menos ancho y evitan cualquier corte en pantallas estrechas. */
@media (max-width: 640px) {
  [data-reveal="izquierda"],
  [data-reveal="derecha"] { transform: translateY(28px); }
}

/* Estado final: todo a su sitio */
[data-reveal].se-ve {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Si el visitante pidió menos movimiento, nada se esconde */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}


/* ---------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------- */

/* Cinta roja infinita */
@keyframes desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Flotación suave del logo del hero */
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(1.5deg); }
}

/* Anillo punteado del hero */
@keyframes girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Onda del botón de WhatsApp */
@keyframes pulso {
  0%, 100% { box-shadow: 0 12px 30px rgba(232, 16, 16, .45), 0 0 0 0 rgba(232, 16, 16, .55); }
  70%      { box-shadow: 0 12px 30px rgba(232, 16, 16, .45), 0 0 0 18px rgba(232, 16, 16, 0); }
}

/* Resplandor que respira detrás de la llamada final */
@keyframes latir {
  0%, 100% { opacity: .55; transform: translate(-50%, 0) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, 0) scale(1.12); }
}

/* Entrada del hero al cargar la página */
@keyframes entrar {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Rebote del indicador de scroll */
@keyframes rebotar {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(7px); opacity: 1; }
}


/* ---------------------------------------------------------------
   Animaciones de carga (hero)
   Se lanzan solas, sin esperar al scroll.
   --------------------------------------------------------------- */

.al-cargar {
  opacity: 0;
  animation: entrar var(--dur-reveal) var(--ease-out) forwards;
  animation-delay: var(--retraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .al-cargar { opacity: 1; animation: none; }
  .hero__logo,
  .hero__anillo,
  .ticker__pista,
  .flotante-wsp,
  .cta__caja::before { animation: none !important; }
}


/* ---------------------------------------------------------------
   Título del hero: cada línea se descubre por separado
   --------------------------------------------------------------- */

.linea-mascara {
  display: block;
  overflow: hidden;
}

.linea-mascara > span {
  display: block;
  transform: translateY(100%);
  animation: subir-linea 900ms var(--ease-out) forwards;
  animation-delay: var(--retraso, 0ms);
}

@keyframes subir-linea {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .linea-mascara > span { transform: none; animation: none; }
}


/* ---------------------------------------------------------------
   Indicador "sigue bajando"
   --------------------------------------------------------------- */

.scroll-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-7);
  font-size: var(--size-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.scroll-hint .ico {
  width: 18px;
  height: 18px;
  animation: rebotar 2s var(--ease-in-out) infinite;
}