/* Animaciones ligadas al scroll. Sin soporte, todo queda visible y estático. */
@layer components {
  @supports (animation-timeline: view()) {
    /* Apertura con clip-path de las imágenes al entrar. */
    .media--clip {
      animation: clip-open linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes clip-open { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

    /* Paralaje suave de la foto dentro de su marco. */
    .media--clip img {
      scale: 1.16;
      animation: parallax linear both;
      animation-timeline: view();
    }
    @keyframes parallax { from { translate: 0 -7%; } to { translate: 0 7%; } }

    /* Las portadas con view-transition-name no se animan al entrar. */
    .detail__cover { animation: none; }
    .detail__cover img { animation-name: parallax-soft; }
    @keyframes parallax-soft { from { translate: 0 -3%; } to { translate: 0 3%; } }

    /* Barra de progreso de lectura bajo el header. */
    .progress {
      display: block;
      position: fixed;
      inset: var(--header-h) 0 auto 0;
      z-index: 49;
      height: 3px;
      background: var(--senal);
      transform-origin: left;
      animation: progress-grow linear both;
      animation-timeline: scroll(root);
    }
    @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }

  /* Con movimiento reducido no hay barra de progreso. */
  @media (prefers-reduced-motion: reduce) {
    .progress { display: none !important; }
  }
}