/* Motion premium: solo compositable (transform/translate/opacity), todo tras no-preference. */

/* Transición entre páginas (portfolio <-> casos). Ignorado si el navegador no lo soporta. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* (1) Barra de progreso: scaleX en vez de width (el JS aún escribe width inline, de ahí !important) */
    #prog {
      width: 100% !important; transition: none; transform-origin: 0 50%;
      animation: mo-prog linear both; animation-timeline: scroll(root);
    }
    @keyframes mo-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* (2) Entrada de tarjetas al entrar en viewport */
    .bc, .lab-feat, .lab-card {
      animation: mo-in linear both; animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes mo-in { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

    /* Parallax suave de imágenes (translate no choca con el transform:scale del hover) */
    .bc-img img, .lab-img img {
      animation: mo-par linear both; animation-timeline: view();
    }
    @keyframes mo-par { from { translate: 0 -5%; } to { translate: 0 5%; } }
  }
}

/* (3) Cambio de tema: crossfade corto */
@media (prefers-reduced-motion: no-preference) {
  html.mo-theme-vt::view-transition-group(root) { animation-duration: .4s; }
}