/* ==========================================================================
   Movimiento de interfaz
   - Transiciones de página nativas (View Transitions API)
   - Barra de progreso para navegación y peticiones
   - Aparición suave al hacer scroll
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.route-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease;
  pointer-events: none;
}

.route-progress.is-active {
  opacity: 1;
}

.route-progress.is-done {
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease 0.08s;
}

html.motion-ready [data-motion-reveal] {
  transform: translateY(14px);
  transition: transform 0.65s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

html.motion-ready [data-motion-reveal].is-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-motion-reveal] {
    transform: none;
    transition: none;
  }

  .hero__center > *,
  .hero__stage,
  .hero__specs,
  .hero__proof {
    animation: none;
  }

  .hero__center > *,
  .hero__stage,
  .hero__specs,
  .hero__proof {
    animation: none;
  }

  .route-progress {
    display: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}