/* ============ R&A · transición entre páginas: el trazo ============ */
/* salida: una línea naranja (el subrayado del logo) cruza la pantalla y se engrosa hasta cubrirla;
   entrada: la página nueva nace cubierta, la franja se afina hasta volver a ser línea y sale por la derecha.
   Se anima solo con transform (escala): corre en la placa de video y no se traba aunque el celular esté ocupado
   cargando la página nueva. La línea es la franja a 0,5 % de su alto (unos 4 px en pantalla). */

.tr {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  background: var(--orange, #E64E29);
  transform-origin: 0 50%;
  transform: scale(0, 0.005);
  will-change: transform;
  animation: tr-out 600ms forwards;
}
@keyframes tr-out {
  0%   { transform: scale(0, 0.005); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  45%  { transform: scale(1, 0.005); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  100% { transform: scale(1, 1); }
}

/* celular: la misma línea, más rápida */
.tr.tr--rapida { animation-duration: 380ms; }
@media (pointer: coarse) {
  html.is-entering::before { animation-duration: 620ms; animation-delay: 0ms; }
  html.is-entering .hero__title, html.is-entering .s-hero__title { animation-delay: 300ms; }
}

/* entrada: la decide un script mínimo en <head>; es solo CSS, así que termina sola aunque el JS no corra */
html.is-entering::before {
  content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  background: var(--orange, #E64E29);
  transform-origin: 100% 50%;
  will-change: transform;
  animation: tr-in 900ms 60ms both;
}
@keyframes tr-in {
  0%   { transform: scale(1, 1);     animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  52%  { transform: scale(1, 0.005); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { transform: scale(0, 0.005); }
}
/* el título de la página espera a que se abra */
html.is-entering .hero__title, html.is-entering .s-hero__title { animation-delay: 520ms; }

@media (prefers-reduced-motion: reduce) {
  .tr, html.is-entering::before { display: none; }
}