/* Nastri scorrevoli e contatori, ripresi dalla home di oggi.
   Scritti a mano: l'estrazione automatica aveva perso proprio le
   righe che fanno scorrere il nastro. */

/* ---------- nastri ---------- */
.tape{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--sur); overflow:hidden; position:relative; z-index:2;
}
.tape-lab{
  position:absolute; left:0; top:0; bottom:0; z-index:3;
  display:flex; align-items:center; padding:0 18px;
  background:var(--ink); border-right:1px solid var(--rule);
  font-family:var(--m); font-size:clamp(9px,.68vw,11px);
  letter-spacing:.18em; text-transform:uppercase; color:var(--teal);
}
.tape-in{display:flex; width:max-content}

/* Le due velocita' e i due versi: se scorressero uguali sembrerebbero
   lo stesso oggetto ripetuto. */
.t-tools .tape-in{animation:slide 95s linear infinite}
.t-part  .tape-in{animation:slide 30s linear infinite reverse}
@keyframes slide{to{transform:translateX(-50%)}}

.tape span{
  font-family:var(--m); font-size:clamp(11px,.85vw,14px);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--soft); padding:16px 0; white-space:nowrap;
}
.tape span b{color:var(--txt); font-weight:500; padding:0 22px}
.tape span em{color:var(--violet-lo); font-style:normal}
.t-part{background:var(--sur2)}
.t-part span b{color:var(--teal)}

/* ---------- contatori ---------- */
.stats{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
}
.st{display:flex; flex-direction:column; gap:3px}
.st b{
  font-family:var(--m); font-weight:700; line-height:1;
  font-size:clamp(26px,3.6vw,40px); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.st span{
  font-family:var(--m); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--soft);
}

@media (prefers-reduced-motion:reduce){
  .t-tools .tape-in,.t-part .tape-in{animation:none}
}