/* =========================================================================
   TRAZENIA · MOVIMIENTO
   Ninguna animación existe para verse tecnológica. Cada una hace una de tres
   cosas: dirigir la atención, dar continuidad o confirmar una acción.
   ========================================================================= */

/* Aparición al entrar en cuadro. El elemento sube 18 px como si el trazo
   lo hubiera alcanzado. Sin JS, nada se oculta: el contenido siempre se lee. */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
  transition-delay: var(--retraso, 0ms);
  will-change: opacity, transform;
}
.js [data-revelar].visible {
  opacity: 1;
  transform: none;
}

/* Titular por líneas: cada línea sale de detrás de una máscara */
.js [data-revelar-lineas] .linea-mascara { display: block; overflow: hidden; }
.js [data-revelar-lineas] .linea-mascara > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--curva);
  transition-delay: var(--retraso, 0ms);
}
.js [data-revelar-lineas].visible .linea-mascara > span { transform: none; }

/* Imagen que se descubre: el velo se retira de izquierda a derecha */
.js [data-revelar-imagen] { position: relative; overflow: hidden; }
.js [data-revelar-imagen]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fondo);
  transform-origin: right;
  transition: transform 1.1s var(--curva-firme);
  transition-delay: var(--retraso, 0ms);
  z-index: 2;
}
.js [data-revelar-imagen].visible::after { transform: scaleX(0); }
.js [data-revelar-imagen] img {
  transform: scale(1.08);
  transition: transform 1.6s var(--curva);
  transition-delay: var(--retraso, 0ms);
}
.js [data-revelar-imagen].visible img { transform: none; }

/* El trazo lateral que recorre la página entera: se dibuja con el scroll.
   --avance lo escribe JS entre 0 y 1. */
.trazo-guia {
  position: fixed;
  left: max(14px, calc((100vw - var(--ancho)) / 2 - 26px));
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 40;
  pointer-events: none;
}
.trazo-guia::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--linea);
  opacity: 0.55;
}
.trazo-guia__activo {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: linear-gradient(var(--turquesa-profundo), var(--turquesa));
  transform-origin: top;
  transform: scaleY(var(--avance, 0));
}
.trazo-guia__nodo {
  position: absolute;
  left: 50%;
  top: calc(var(--avance, 0) * 100%);
  width: 7px; height: 7px;
  margin-left: -3.5px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ambar) 18%, transparent);
}

/* Barra de progreso superior, para cuando el trazo lateral no cabe */
.progreso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--turquesa);
  transform: scaleX(var(--avance, 0));
  transform-origin: left;
  z-index: 110;
  display: none;
}

@keyframes bajar {
  0%   { transform: translateY(-10px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* El nodo del isotipo del encabezado late una vez al cargar y se calma */
@keyframes latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.35); }
}
.marca__isotipo circle { transform-origin: 48px 49px; animation: latido 2.6s var(--curva) 1.2s 2; }

/* Marquesina de tecnologías: continua, lenta, sin sensación de carrusel */
.marquesina {
  overflow: hidden;
  border-block: 1px solid var(--linea);
  padding-block: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquesina__pista {
  display: flex;
  gap: 0;
  width: max-content;
  animation: correr 46s linear infinite;
}
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
.marquesina__grupo { display: flex; gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); }
.marquesina span {
  font-family: var(--mono);
  font-size: var(--t-14);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-debil);
  white-space: nowrap;
  transition: color var(--rapido) var(--curva);
}
.marquesina span:hover { color: var(--turquesa); }
@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* La experiencia premium no se cobra en accesibilidad. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-revelar],
  .js [data-revelar-lineas] .linea-mascara > span,
  .js [data-revelar-imagen] img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js [data-revelar-imagen]::after { display: none; }

  .marquesina__pista { animation: none; }
  .hero__scroll i { animation: none; }
  .marca__isotipo circle { animation: none; }
  .trazo-guia__nodo { transition: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}