/* ==========================================================================================
   intro.css — l'intro della home (partials/preloader.php + assets/js/intro.js).
   Visibile solo con html.preloader-attivo (messo dallo script in <head>, una volta per sessione).
   ========================================================================================== */

.intro { display: none; }
html.preloader-attivo .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  pointer-events: auto;
  /* salvagente: se intro.js non arriva, l'intro sparisce da sola */
  animation: intro-via .4s 5.5s forwards;
}
@keyframes intro-via { to { opacity: 0; visibility: hidden; } }
html.preloader-attivo .intro.is-viva { animation: none; }

.intro__copertina {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--nero);
  /* strato composito proprio (transform), non solo will-change: clip-path. Safari non crea uno strato per
     will-change: clip-path, e le colonne di foto (strati compositi) sfuggivano al ritaglio a poligono con il buco:
     all'apertura del logo il bianco e nero ricompariva a intermittenza sopra la hero (segnalato su MacBook).
     Con la copertina composita il ritaglio è una maschera su tutto il suo contenuto. */
  transform: translateZ(0);
  will-change: transform, clip-path;
  isolation: isolate;
}

/* colonne di ritratti in bianco e nero che scorrono, alternando il verso */
.intro__foto {
  --colonne: 6;
  --spazio: clamp(6px, .7vw, 12px);
  position: absolute;
  inset: -4% -2%;
  display: grid;
  grid-template-columns: repeat(var(--colonne), 1fr);
  gap: var(--spazio);
  transform-origin: 50% 50%;
  opacity: 0;
}
.intro__col { position: relative; overflow: hidden; }
.intro__nastro {
  display: grid;
  gap: var(--spazio);
  animation: intro-su 13s linear infinite;
  animation-delay: calc(var(--i) * -2.3s);
  will-change: transform;
}
.intro__col:nth-child(even) .intro__nastro { animation-name: intro-giu; animation-duration: 15s; }
.intro__nastro img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 645;
  object-fit: cover;
  background: #111;
  filter: brightness(1.18) contrast(1.02);
}
/* metà nastro = un giro esatto (le foto sono stampate due volte) */
@keyframes intro-su { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-50% - var(--spazio) / 2), 0); } }
@keyframes intro-giu { from { transform: translate3d(0, calc(-50% - var(--spazio) / 2), 0); } to { transform: translate3d(0, 0, 0); } }

.intro__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(75% 75% at 50% 50%, rgba(6, 5, 12, .1) 0%, rgba(6, 5, 12, .62) 100%),
    rgba(6, 5, 12, .18);
}

.intro__testo, .intro__conta {
  position: absolute;
  margin: 0;
  font: 500 12px/1.2 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--carta);
  opacity: 0;
}
.intro__testo--1 { left: var(--margine); top: 18px; }
.intro__testo--2 { right: var(--margine); top: 18px; }
.intro__conta { right: var(--margine); bottom: 18px; font-variant-numeric: tabular-nums; }

/* lampi di ritratti a taglio netto dentro il quadrato del logo, prima che si apra il buco */
.intro__lampo {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  object-fit: cover;
  object-position: 50% 30%;
  filter: brightness(1.25) contrast(1.05);
  opacity: 0;
  will-change: transform;
}

/* le due L del logo: posizione e misura le decide intro.js a ogni fotogramma */
.intro__l {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  fill: var(--carta);
  opacity: 0;
  overflow: visible;
  will-change: transform;
  filter: drop-shadow(0 0 24px rgba(121, 64, 224, .45));
}

@media (max-width: 819px) {
  .intro__foto { --colonne: 3; inset: -6% -10%; }
  .intro__col:nth-child(n+4) { display: none; }
}