/* ============================================================================
   MOVIMIENTO — y por qué esta página no puede quedarse en blanco
   ----------------------------------------------------------------------------
   Tres intentos anteriores fallaron por lo mismo: el contenido nacía invisible
   y dependía de que algo lo mostrara. Aquí la regla es la inversa:

   1. El CSS base pinta TODO visible. Si este archivo no llega a cargarse, o si
      el JavaScript no se ejecuta nunca, la página se ve entera.
   2. Ocultar sólo ocurre DENTRO de una animación de duración finita con
      `animation-fill-mode: both`. El fotograma final siempre es visible, y
      quien lo garantiza es el motor de CSS, no un script.
   3. La entrada del hero no depende de JavaScript en absoluto: son animaciones
      que arrancan solas al pintar.
   4. Las secciones de más abajo se ocultan sólo si el JS lo pide (clase .rv-e),
      y esa clase lleva incorporada su propia red: a los 12 s se revela sola
      aunque nadie la toque. Ver public/js/pagina.js.
   5. Con `prefers-reduced-motion: reduce` no se aplica ninguna de estas reglas:
      la página queda quieta y completa.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Entrada del hero — CSS puro, sin JavaScript ────────────────────── */

  /* Bloques que suben unos píxeles apareciendo, escalonados de arriba abajo. */
  .ent {
    animation: ent-subir .68s var(--salto) both;
    animation-delay: var(--ret, 0s);
  }
  @keyframes ent-subir {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* El titular entra palabra por palabra, cada una emergiendo desde debajo de
     una línea invisible que la recorta. Sólo se anima `transform`: aunque algo
     fuese mal, no hay ningún estado de opacidad 0 del que depender. */
  .pal > i {
    animation: pal-emerger .78s var(--salto) both;
    animation-delay: var(--ret, 0s);
  }
  @keyframes pal-emerger {
    from { transform: translate3d(0, 106%, 0); }
    to   { transform: none; }
  }

  /* El retrato entra más tarde, subiendo y creciendo levemente. */
  .ent-retrato {
    animation: ent-retrato .9s var(--salto) both;
    animation-delay: var(--ret, .45s);
  }
  @keyframes ent-retrato {
    from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.965); }
    to   { opacity: 1; transform: none; }
  }

  /* Las tres tarjetas llegan las últimas, con un rebote pequeño. */
  .ent-ficha {
    animation: ent-ficha .62s cubic-bezier(.34, 1.5, .5, 1) both;
    animation-delay: var(--ret, .8s);
  }
  @keyframes ent-ficha {
    from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.9); }
    to   { opacity: 1; transform: none; }
  }

  /* ── 2. Flotación continua de las tarjetas del hero ────────────────────── */
  /* Va en un elemento interior distinto del de la entrada, para que las dos
     animaciones no compitan por la misma propiedad `transform`.              */
  .flota {
    animation: flotar var(--flota-dur, 7s) ease-in-out var(--flota-ret, 0s) infinite alternate;
  }
  @keyframes flotar {
    from { transform: translate3d(0, calc(var(--flota-y, 5px) * -1), 0) rotate(calc(var(--flota-giro, .5deg) * -1)); }
    to   { transform: translate3d(0, var(--flota-y, 5px), 0) rotate(var(--flota-giro, .5deg)); }
  }

  /* ── 3. Franja de áreas en bucle continuo ──────────────────────────────── */
  .cinta-pista { animation: cinta var(--cinta-dur, 46s) linear infinite; }
  @keyframes cinta {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  .cinta:hover .cinta-pista, .cinta:focus-within .cinta-pista { animation-play-state: paused; }

  /* ── 4. Latido del punto de la píldora institucional ───────────────────── */
  .punto::after { animation: latir 3.2s ease-out infinite; }
  @keyframes latir {
    0%   { opacity: .55; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(2.9); }
    100% { opacity: 0;   transform: scale(2.9); }
  }

  /* ── 5. Aparición al desplazarse (sólo de la 3.ª sección hacia abajo) ───── */
  /*
     `.rv-e` (en espera) es el ÚNICO estado oculto que aplica JavaScript, y lo
     aplica sólo a elementos que en ese momento están por debajo de la ventana.
     Fíjate en el fotograma 92%: la propia animación se revela sola a los ~11 s
     aunque el observador nunca llegue a dispararse. Es la red de seguridad que
     no depende de que ningún script vuelva a ejecutarse.
  */
  .rv-e {
    animation: rv-espera 12s linear both;
  }
  @keyframes rv-espera {
    0%, 92% { opacity: 0; transform: translate3d(0, 18px, 0); }
    100%    { opacity: 1; transform: none; }
  }

  .rv-v {
    animation: rv-entrar .7s var(--salto) both;
    animation-delay: var(--ret, 0s);
  }
  @keyframes rv-entrar {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* ── 6. Interacciones ──────────────────────────────────────────────────── */
  .boton, .ficha-area, .chip { transition: transform .22s var(--salto), box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease; }
  .boton .flecha { transition: transform .22s var(--salto); }
  @media (hover: hover) {
    .boton:hover { transform: translateY(-2px); }
    .boton:hover .flecha { transform: translateX(4px); }
  }
  .boton:active { transform: translateY(0); }
}

/* Sin movimiento: nada se anima y nada se oculta. La clase .rv-e ni siquiera
   llega a aplicarse porque el script comprueba la preferencia antes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}