/* ============================================================
   Padel Republic · motion.css
   Capa de movimiento de la landing. Se carga DESPUÉS de landing.css
   y no redefine nada suyo: solo añade transiciones, revelados y
   estados de interacción.

   Reglas que sigue (UI/UX Pro Max):
   · El movimiento tiene significado: entra con deceleración, sale con aceleración.
   · Ninguna duración sirve para todo: hay tokens por tipo de gesto.
   · Como máximo uno o dos elementos protagonistas animados por vista.
   · El parallax solo toca capas decorativas, nunca el texto.
   · Nada se mueve si el sistema pide movimiento reducido.
   · Sin JavaScript no se oculta nada: el estado inicial cuelga de .js-anim.
   ============================================================ */

:root{
  --mo-fast: 160ms;     /* respuesta táctil: pulsar, marcar */
  --mo-base: 320ms;     /* cambios de estado: hover, color */
  --mo-slow: 640ms;     /* entradas largas: revelado al hacer scroll */
  --mo-out:    cubic-bezier(.22,.90,.30,1);   /* deceleración: algo que llega */
  --mo-in:     cubic-bezier(.55,0,.90,.40);   /* aceleración: algo que se va */
  --mo-spring: cubic-bezier(.34,1.42,.64,1);  /* rebote corto: énfasis */
}

/* ---------- 1. Revelado al hacer scroll ---------- */
/* El estado oculto solo existe con JS activo, para no esconder contenido si falla. */
.js-anim .reveal{
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
.js-anim .reveal.is-in{
  opacity: 1;
  transform: none;
  transition: opacity var(--mo-slow) var(--mo-out),
              transform var(--mo-slow) var(--mo-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
/* variantes de dirección para romper la monotonía en rejillas */
.js-anim .reveal--left { transform: translate3d(-22px, 0, 0); }
.js-anim .reveal--right{ transform: translate3d(22px, 0, 0); }
.js-anim .reveal--zoom { transform: scale(.965); }
.js-anim .reveal--left.is-in,
.js-anim .reveal--right.is-in,
.js-anim .reveal--zoom.is-in{ transform: none; }

/* ---------- 2. Entrada del hero ---------- */
.js-anim .hero h1,
.js-anim .hero__coaches,
.js-anim .hero__aside p,
.js-anim .hero__btns,
.js-anim .hero__badge{
  opacity: 0;
  animation: moRise .9s var(--mo-out) forwards;
}
.js-anim .hero h1          { animation-delay: .10s; }
.js-anim .hero__coaches    { animation-delay: .34s; }
.js-anim .hero__aside p    { animation-delay: .22s; }
.js-anim .hero__btns       { animation-delay: .34s; }
.js-anim .hero__badge      { animation-delay: .52s; }
@keyframes moRise{
  from{ opacity: 0; transform: translate3d(0, 22px, 0); }
  to  { opacity: 1; transform: none; }
}

/* El titular entra línea a línea: cada <br> crea una línea envuelta por el JS. */
.js-anim .hero h1 .mo-line{ display: block; overflow: hidden; }
.js-anim .hero h1 .mo-line > span{
  display: block;
  transform: translate3d(0, 105%, 0);
  animation: moLine .95s var(--mo-out) forwards;
}
.js-anim .hero h1 .mo-line:nth-child(1) > span{ animation-delay: .16s; }
.js-anim .hero h1 .mo-line:nth-child(2) > span{ animation-delay: .27s; }
.js-anim .hero h1 .mo-line:nth-child(3) > span{ animation-delay: .38s; }
@keyframes moLine{ to{ transform: none; } }

/* ---------- 3. Parallax (solo la foto del hero) ---------- */
.hero__bg img{
  transform: translate3d(0, 0, 0) scale(1.08);
  transition: none;
}

/* ---------- 4. Botones ---------- */
.btn{
  transition: transform var(--mo-fast) var(--mo-out),
              box-shadow  var(--mo-base) var(--mo-out),
              background-color var(--mo-base) var(--mo-out),
              border-color var(--mo-base) var(--mo-out),
              color var(--mo-base) var(--mo-out);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(.985); transition-duration: 90ms; }
.btn--lime:hover{ box-shadow: 0 12px 30px rgba(221,242,71,.34); }
.btn--glass:hover{ box-shadow: 0 10px 26px rgba(11,46,41,.22); }
.btn__arrow{ transition: transform var(--mo-base) var(--mo-spring); }
.btn:hover .btn__arrow{ transform: translateX(5px); }

/* el enlace de entrenadores: subrayado que se dibuja */
.hero__coaches{ border-bottom-color: transparent !important; position: relative; }
.hero__coaches::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: rgba(255,255,255,.55);
  transform: scaleX(1); transform-origin: left;
  transition: transform var(--mo-base) var(--mo-out), background-color var(--mo-base);
}
.hero__coaches:hover::after{ background: var(--pl-lime); }
.hero__coaches svg{ transition: transform var(--mo-base) var(--mo-spring); }
.hero__coaches:hover svg{ transform: translateX(4px); }

/* ---------- 5. Navegación ---------- */
.nav__links a{ position: relative; }
.nav__links a::after{
  content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%;
  background: var(--pl-lime); border-radius: 2px;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--mo-base) var(--mo-out);
}
.nav__links a:hover::after{ transform: scaleX(1); transform-origin: left; }
.nav{ transition: background-color var(--mo-base) var(--mo-out), box-shadow var(--mo-base) var(--mo-out); }
.nav.is-solid{ box-shadow: 0 6px 28px rgba(11,46,41,.09); }

/* ---------- 6. Tarjetas y medios ---------- */
.sede, .stat-card, .story, .prog-card, .faq__item{
  transition: transform var(--mo-base) var(--mo-out),
              box-shadow var(--mo-base) var(--mo-out),
              border-color var(--mo-base) var(--mo-out);
}
.sede:hover, .story:hover, .prog-card:hover{ transform: translateY(-5px); }
.sede:hover{ box-shadow: 0 20px 48px rgba(11,46,41,.15); }
.stat-card:hover{ transform: translateY(-3px); }

/* las fotos hacen un zoom lento dentro de su marco */
.sede__media, .story__media, .prog-card__media, .about__photo, .hero__bg{ overflow: hidden; }
.sede__media img, .story__media img, .prog-card__media img, .about__photo img{
  transition: transform 900ms var(--mo-out);
}
.sede:hover .sede__media img,
.story:hover .story__media img,
.prog-card:hover .prog-card__media img{ transform: scale(1.06); }

/* ---------- 7. Chips, features y FAQ ---------- */
.tag-chip, .chip{ transition: transform var(--mo-fast) var(--mo-out), background-color var(--mo-base), color var(--mo-base); }
.tag-chip:hover, .chip:hover{ transform: translateY(-2px); }
.feature{ transition: background-color var(--mo-base) var(--mo-out), transform var(--mo-base) var(--mo-out); }
.feature:hover{ transform: translateX(4px); }
.feature__ic{ transition: transform var(--mo-base) var(--mo-spring), background-color var(--mo-base); }
.feature:hover .feature__ic, .feature.is-active .feature__ic{ transform: scale(1.08) rotate(-4deg); }

/* ---------- 8. Cifras que cuentan ---------- */
.num{ font-variant-numeric: tabular-nums; }

/* ---------- 9. Movimiento reducido: todo quieto ---------- */
@media (prefers-reduced-motion: reduce){
  .js-anim .reveal,
  .js-anim .reveal--left,
  .js-anim .reveal--right,
  .js-anim .reveal--zoom{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .js-anim .hero h1,
  .js-anim .hero__coaches,
  .js-anim .hero__aside p,
  .js-anim .hero__btns,
  .js-anim .hero__badge{ opacity: 1 !important; animation: none !important; }
  .js-anim .hero h1 .mo-line > span{ transform: none !important; animation: none !important; }
  .hero__bg img{ transform: none !important; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}