/* ============================================================
   AYLAND — Animaciones al hacer scroll, sin JavaScript.
   CSS `animation-timeline`, soportado por ~85% de navegadores
   (agosto 2026). Los que no lo soportan ven el contenido
   directamente, sin animación y sin roturas.

   Las dos guardas NO son opcionales:
   · @supports evita el fallo clásico de dejar el contenido
     invisible para siempre en navegadores sin soporte.
   · prefers-reduced-motion es requisito WCAG 2.3.3.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    .ayl-anim{
      animation: ayl-aparecer linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    .ayl-anim--lento{ animation-range: entry 5% cover 40%; }

    /* Escalonado para rejillas de tarjetas */
    .ayl-anim-grid > *{
      animation: ayl-aparecer linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }

    /* La foto se revela creciendo un poco. Muy sutil a propósito. */
    .ayl-anim-foto img{
      animation: ayl-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }

    /* Filete que se dibuja al entrar */
    .ayl-anim-filete{
      animation: ayl-filete linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 30%;
      transform-origin: left center;
    }
  }
}

@keyframes ayl-aparecer{
  from{ opacity: 0; transform: translateY(22px); }
  to  { opacity: 1; transform: none; }
}
@keyframes ayl-zoom{
  from{ scale: 1.06; }
  to  { scale: 1; }
}
@keyframes ayl-filete{
  from{ scale: 0 1; }
  to  { scale: 1 1; }
}

/* Cabecera fija que se compacta al bajar */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .ayl-nav--reactiva{
      animation: ayl-nav linear both;
      animation-timeline: scroll(root);
      animation-range: 0 220px;
    }
  }
}
@keyframes ayl-nav{
  from{ padding-block: 1.25rem; box-shadow: 0 0 0 rgba(0,0,0,0); }
  to  { padding-block: .625rem; box-shadow: 0 1px 0 var(--ayl-linea); }
}

/* ============================================================
   SEGUROS
   Sin esto, todo lo que no se haya desplazado a la vista se
   imprime en blanco, y lo mismo pasa en cualquier captura de
   página completa. Es el fallo clásico de las animaciones de
   scroll y cuesta dos reglas evitarlo.
   ============================================================ */

@media print{
  .ayl-anim, .ayl-anim--lento, .ayl-anim-grid > *,
  .ayl-anim-foto img, .ayl-anim-filete, .ayl-nav--reactiva{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    scale: none !important;
  }
}

/* Si el usuario pide menos movimiento, nada se anima y nada
   se queda a medias. Redundante con la guarda de arriba, pero
   explícito: aquí no puede quedar contenido invisible. */
@media (prefers-reduced-motion: reduce){
  .ayl-anim, .ayl-anim--lento, .ayl-anim-grid > *,
  .ayl-anim-foto img, .ayl-anim-filete{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}