/**
 * Fascia animata in alto (parade) — stessa logica della home `index.html`.
 * Inclusa da search.html, chi-siamo.html, ecc. per coerenza con la navbar home.
 */
.ss-parade-track {
  container-type: inline-size;
  container-name: parade-track;
  position: relative;
  width: 100%;
  min-height: 52px;
  padding-block: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.light .ss-parade-track,
html.light .ss-parade-track {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.ss-parade-unit {
  position: absolute;
  top: 2px;
  left: 0;
  width: max-content;
  animation: ss-parade-move 14s linear infinite;
  will-change: transform;
}

@keyframes ss-parade-move {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(100cqw - 100%));
  }
}

.ss-parade-chip {
  transform-box: fill-box;
  animation: ss-chip-drop 14s linear infinite;
  will-change: transform, opacity;
}

@keyframes ss-chip-drop {
  0%,
  100% {
    opacity: 1;
    transform: translate(calc(var(--ux) * 1px), calc(var(--uy) * 1px));
  }
  3% {
    opacity: 0;
    transform: translate(calc(var(--ux) * 1px), calc(var(--uy) * 1px - var(--fall) * 1px));
  }
  11% {
    opacity: 1;
    transform: translate(calc(var(--ux) * 1px), calc(var(--uy) * 1px));
  }
  49% {
    opacity: 1;
    transform: translate(calc(var(--ux) * 1px), calc(var(--uy) * 1px));
  }
  53% {
    opacity: 0;
    transform: translate(calc(var(--ux) * 1px), calc(var(--uy) * 1px - var(--fall) * 1px));
  }
  61% {
    opacity: 1;
    transform: translate(calc(var(--ux) * 1px), calc(var(--uy) * 1px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-parade-unit,
  .ss-parade-chip {
    animation: none !important;
  }

  .ss-parade-unit {
    left: 50%;
    transform: translateX(-50%);
  }

  .ss-parade-chip {
    opacity: 1 !important;
    transform: translate(calc(var(--ux) * 1px), calc(var(--uy) * 1px)) !important;
  }
}