/* animaciones.css — sistema de animaciones al hacer scroll (scroll reveal + rewind).
 *
 * Cómo funciona (la lógica está en assets/js/animaciones.js):
 *   - Cualquier elemento con la clase .revelar entra con animación al aparecer en pantalla.
 *   - REWIND: si el visitante vuelve a subir, el elemento "rebobina" (sale con la animación
 *     inversa) y vuelve a entrar al bajar de nuevo. Se desactiva con data-rewind="false".
 *   - Variantes con data-reveal: up (por defecto) | left | right | zoom | blur | mask | iris.
 *   - Escalonado: .retraso-1 … .retraso-4, o data-d="0.2s" a mano.
 *   - data-scrub: el hero ligado al scroll (parallax) mediante la variable --p (0 → 1).
 *
 * Sin JavaScript (no hay clase .js en <html>) todo el contenido se ve normal.
 * Con "reducir movimiento" activado en el sistema, no hay desplazamientos ni parallax.
 */

:root { --ease-salida: cubic-bezier(.22, 1, .36, 1); }

/* Transición suave entre páginas (navegadores que lo soportan; el resto navega normal) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .28s ease both vt-salir; }
::view-transition-new(root) { animation: .38s ease both vt-entrar; }
@keyframes vt-salir { to { opacity: 0; } }
@keyframes vt-entrar { from { opacity: 0; } }

.retraso-1 { --d: .08s; }
.retraso-2 { --d: .16s; }
.retraso-3 { --d: .24s; }
.retraso-4 { --d: .32s; }

/* ------------------------------------------------------------ scroll reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
      opacity .9s var(--ease-salida),
      transform .9s var(--ease-salida),
      filter .9s var(--ease-salida),
      clip-path .9s var(--ease-salida);
    transition-delay: 0s;            /* al rebobinar no hay escalonado */
    will-change: opacity, transform;
  }
  .js .revelar[data-reveal="left"]  { transform: translate3d(-56px, 0, 0); }
  .js .revelar[data-reveal="right"] { transform: translate3d(56px, 0, 0); }
  .js .revelar[data-reveal="zoom"]  { transform: scale(.9); }
  .js .revelar[data-reveal="blur"]  { filter: blur(12px); transform: translate3d(0, 16px, 0); }
  /* "mask": el título se desvela de abajo arriba, como una cortinilla */
  .js .revelar[data-reveal="mask"]  {
    opacity: 1;
    transform: translate3d(0, .35em, 0);
    clip-path: inset(-.15em -.15em 100% -.15em);
  }
  .js .revelar.visible {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(-.15em);
    transition-delay: var(--d, 0s);  /* el escalonado solo cuenta al entrar */
    will-change: auto;
  }
  /* "iris": el logotipo se abre en círculo desde el centro */
  .js .revelar[data-reveal="iris"] { opacity: 1; transform: scale(.88); clip-path: circle(0% at 50% 50%); }
  .js .revelar[data-reveal="iris"].visible { transform: none; clip-path: circle(75% at 50% 50%); }
  /* Terminada la entrada, el elemento recupera sus transiciones rápidas (hover de tarjetas, etc.) */
  .js .revelar.visible.listo {
    transition: transform .28s var(--ease-salida), box-shadow .28s ease, border-color .28s ease,
                background-color .2s ease, color .2s ease, opacity .3s ease;
    transition-delay: 0s;
  }
  /* Etiquetas: el filete se dibuja al aparecer */
  .js .kicker-anim::before {
    content: ""; display: inline-block; width: 0; height: 2px; margin-right: 0;
    background: currentColor; vertical-align: middle;
    transition: width .8s var(--ease-salida) .2s, margin-right .8s var(--ease-salida) .2s;
  }
  .js .kicker-anim.visible::before { width: 1.75rem; margin-right: .7rem; }
  html { scroll-behavior: smooth; }
}

/* ------------------------------------------------------- hero: entrada y scrub */
@keyframes hero-entra {
  from { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes hero-zoom {
  from { opacity: 0; transform: scale(.82) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-entrada > * { opacity: 0; animation: hero-entra 1s var(--ease-salida) forwards; }
  .hero-entrada > *:nth-child(1) { animation-delay: .10s; }
  .hero-entrada > *:nth-child(2) { animation-delay: .22s; }
  .hero-entrada > *:nth-child(3) { animation-delay: .34s; }
  .hero-entrada > *:nth-child(4) { animation-delay: .46s; }
  .hero-entrada > *:nth-child(5) { animation-delay: .58s; }
  .hero-logo-entrada { animation: hero-zoom 1.2s .30s var(--ease-salida) both; }

  /* Scrub: al bajar, el vídeo se acerca y el texto se desvanece; al subir, todo rebobina */
  .hero-video-seccion[data-scrub] .hero-video-elemento {
    transform: translate3d(0, calc(var(--p, 0) * 14%), 0) scale(calc(1.03 + var(--p, 0) * .12));
    will-change: transform;
  }
  /* El logotipo se mueve a otra velocidad que el texto: da sensación de profundidad */
  .hero-video-seccion[data-scrub] .hero-logo-entrada { translate: 0 calc(var(--p, 0) * 60px); }

  /* Parallax de los vídeos de fondo de las secciones FAQ y CTA */
  [data-scrub="paralaje"] { position: relative; overflow: hidden; }
  [data-scrub="paralaje"] .faq-video-elemento,
  [data-scrub="paralaje"] .cta-video-elemento {
    transform: translate3d(0, calc((var(--q, .5) - .5) * -16%), 0) scale(1.2);
    will-change: transform;
  }

  .hero-video-seccion[data-scrub] .hero-contenido {
    transform: translate3d(0, calc(var(--p, 0) * -70px), 0);
    opacity: calc(1 - var(--p, 0) * 1.5);
  }
}

/* ------------------------------------------- cabecera: se esconde al bajar, vuelve al subir */
@media (prefers-reduced-motion: no-preference) {
  header.sticky {
    transition: transform .4s var(--ease-salida), background-color .2s, border-color .2s;
  }
  header.sticky.cabecera-oculta { transform: translateY(-100%); }
}

/* ------------------------------------------------ detalles de interacción */

/* Menú: el subrayado se dibuja al pasar el ratón */
header nav[aria-label="Principal"] .nav-enlace:not([aria-current="page"])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-salida);
}
header nav[aria-label="Principal"] .nav-enlace:not([aria-current="page"]):hover::after { transform: scaleX(1); }

/* Tarjetas: el icono da un pequeño giro al pasar el ratón */
.tarjeta > span.inline-flex { transition: transform .35s var(--ease-salida), background-color .25s ease, color .25s ease; }
.tarjeta:hover > span.inline-flex { transform: scale(1.1) rotate(-6deg); background-color: var(--brand-700); color: #fff; }

/* Movimiento reducido: nada se desplaza ni desaparece */
@media (prefers-reduced-motion: reduce) {
  .revelar, .hero-entrada > *, .hero-logo-entrada { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; animation: none !important; }
  header.sticky.cabecera-oculta { transform: none; }
  .kicker-anim::before { width: 1.75rem !important; margin-right: .7rem !important; }
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
}

/* Las tarjetas que entran desde un lado (data-reveal="left|right") no deben crear scroll horizontal */
main { overflow-x: clip; }