/* ═══════════════════════════════════════════════════════════════════════════
   EZGEARS Taller · fondo técnico de sección

   Tres capas, de abajo a arriba:
     1. azul profundo sólido
     2. grilla de 24 px, líneas de 1 px al 3 % de blanco
     3. tramas CAN en mono, al 11 %, subiendo muy despacio

   Requiere tokens-v2.css. Las tramas las pinta taller-tramas.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-fondo {
  position: relative;
  background: var(--ez-blue-deep);
  overflow: hidden;
  isolation: isolate;
}

/* Grilla técnica. Un solo pseudo-elemento con dos degradados repetidos: dos
   capas separadas costarían un nodo más sin ganar nada. */
.tk-fondo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--tk-grilla-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tk-grilla-color) 1px, transparent 1px);
  background-size: var(--tk-grilla-paso) var(--tk-grilla-paso);
}

.tk-tramas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--ez-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  opacity: var(--tk-trama-opacidad);
  /* Se desvanecen contra los bordes verticales para que ninguna trama
     aparezca o desaparezca de golpe al entrar y salir del recorrido. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* La pista lleva el listado DOS VECES y la animación recorre exactamente la
   mitad: al llegar al final, el fotograma coincide con el inicial y el bucle
   no tiene costura. */
.tk-tramas__pista {
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding-left: 40px;
  will-change: transform;
  animation: tk-tramas-sube var(--tk-trama-ciclo) linear infinite;
}

.tk-tramas__linea { white-space: nowrap; }

@keyframes tk-tramas-sube {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

/* Con movimiento reducido el token de duración vale 0s, que en CSS deja la
   animación parada en su primer fotograma en vez de correr infinitamente
   rápido. Las tramas siguen ahí: son textura, no adorno animado. */
@media (prefers-reduced-motion: reduce) {
  .tk-tramas__pista { animation: none; }
}

/* Todo lo que sea contenido va por encima de las tres capas. */
.tk-fondo > *:not(.tk-tramas) { position: relative; z-index: 1; }

/* En papel el fondo no existe. */
@media print {
  .tk-fondo { background: #FFFFFF; }
  .tk-fondo::before, .tk-tramas { display: none; }
}