/* ============================================================================
   velo.css — il velo di apertura: il logo che corre.

   Un solo file per TUTTE le pagine pubbliche. Prima il velo esisteva solo
   sulla home, scritto dentro `index.html`: chi arrivava da Google su /prezzi —
   che è la maggior parte di chi arriva — non lo vedeva mai, e il sito gli si
   apriva in faccia senza presentarsi.

   Tre regole di sicurezza, perché una schermata di apertura è l'unica cosa di
   un sito che può renderlo del tutto inutilizzabile:

   1. **Sparisce da sola anche senza JavaScript.** L'animazione `velo-da-solo`
      la toglie dopo 5 secondi qualunque cosa succeda. Se `cursore.js` non
      arriva — rete che cade, script bloccati — il sito si apre lo stesso, in
      ritardo ma si apre. Un velo che resta è un sito morto.
   2. **Con JavaScript spento non compare proprio**: ci pensa il `<noscript>`
      nella pagina, che lo nasconde subito invece di far aspettare cinque
      secondi a chi non poteva toglierlo in nessun modo.
   3. **Chi ha chiesto di non vedere animazioni non lo vede muoversi.** Resta il
      velo con la scritta, e va via uguale.

   La home ha il suo `#loader` con dentro le stesse parti: lì la dissolvenza la
   fa la timeline GSAP dell'intro, che esisteva già e non si tocca.
   ============================================================================ */

.velo{
  position:fixed; inset:0; z-index:200;
  display:grid; place-content:center; justify-items:center; gap:26px;
  background:radial-gradient(120% 90% at 50% 35%, #140a26, var(--bg,#07030f) 72%);
  animation:velo-da-solo .45s ease 5s forwards;
}
/* Già visto in questa sessione: non si disegna nemmeno. Lo decide uno script
   nel <head>, prima che il browser dipinga — deciderlo dopo vorrebbe dire
   farlo lampeggiare a ogni pagina, che è peggio del non averlo. */
html.velo-visto .velo{ display:none }
.velo.via{ animation:velo-subito .42s ease forwards }
@keyframes velo-da-solo{ to{ opacity:0; visibility:hidden } }
@keyframes velo-subito{ to{ opacity:0; visibility:hidden } }

/* ---------- la scena ---------- */
.velo-scena{ position:relative; width:300px; height:180px }

/* La strada: non si muove il logo, si muove il mondo sotto. Spostare davvero
   l'immagine da un lato all'altro dello schermo costa un ridisegno per
   fotogramma; un gradiente che scorre costa una traslazione sola. */
.velo-strada{
  position:absolute; left:0; right:0; bottom:14px; height:4px; border-radius:99px;
  background:repeating-linear-gradient(90deg,
    var(--gold,#f5c542) 0 26px, transparent 26px 52px);
  opacity:.42;
  animation:velo-strada .45s linear infinite;
}
@keyframes velo-strada{ to{ background-position:-52px 0 } }

.velo-logo{
  position:absolute; left:50%; bottom:22px; width:196px; height:auto;
  margin-left:-98px; display:block;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
  animation:velo-corsa .42s cubic-bezier(.3,.05,.5,1) infinite alternate;
  transform-origin:50% 90%;
}
@keyframes velo-corsa{
  from{ transform:translateY(0) rotate(-3deg) }
  to  { transform:translateY(-15px) rotate(3deg) }
}

/* Le scie dietro: tre trattini che partono e si allungano. Dicono «sta
   correndo» molto più della corsa in sé, che su un'immagine sola non si
   leggerebbe. */
.velo-scia{
  position:absolute; right:calc(50% + 96px); height:3px; border-radius:99px;
  background:linear-gradient(90deg, transparent, var(--gold,#f5c542));
  opacity:0; animation:velo-scia .55s linear infinite;
}
.velo-scia.s1{ bottom:118px; width:46px; animation-delay:0s }
.velo-scia.s2{ bottom:92px;  width:66px; animation-delay:.18s }
.velo-scia.s3{ bottom:66px;  width:38px; animation-delay:.34s }
@keyframes velo-scia{
  0%  { opacity:0; transform:translateX(28px) scaleX(.4) }
  35% { opacity:.85 }
  100%{ opacity:0; transform:translateX(-44px) scaleX(1) }
}

.velo-polvere{
  position:absolute; bottom:14px; width:9px; height:9px; border-radius:50%;
  background:var(--purple,#a855f7); opacity:0;
  animation:velo-polvere .6s ease-out infinite;
}
.velo-polvere.p1{ right:calc(50% + 82px); animation-delay:.05s }
.velo-polvere.p2{ right:calc(50% + 104px); animation-delay:.3s }
@keyframes velo-polvere{
  0%  { opacity:.55; transform:translate(0,0) scale(.5) }
  100%{ opacity:0;   transform:translate(-36px,-18px) scale(1.6) }
}

/* ---------- parole e barra ---------- */
.velo-testo{
  margin:0; font-weight:900; letter-spacing:.42em; text-indent:.42em;
  font-size:clamp(11px,2.2vw,14px); color:var(--muted,#9b8fb8); text-align:center;
  text-transform:uppercase;
}
.velo-barra{
  width:180px; height:2px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.1);
}
.velo-barra i{
  display:block; height:100%; width:40%; border-radius:2px;
  background:linear-gradient(90deg, var(--purple,#a855f7), var(--gold,#f5c542));
  animation:velo-barra 1.1s ease-in-out infinite;
}
@keyframes velo-barra{
  0%  { transform:translateX(-100%) }
  100%{ transform:translateX(450%) }
}

/* Chi ha chiesto di non vedere animazioni non le vede: resta il velo con la
   scritta, e sparisce con gli stessi tempi. Il movimento qui è decorativo, e
   toglierlo non toglie niente all'informazione. */
@media (prefers-reduced-motion: reduce){
  .velo-strada, .velo-logo, .velo-scia, .velo-polvere, .velo-barra i{ animation:none }
  .velo-scia, .velo-polvere{ opacity:0 }
  .velo-barra i{ width:100% }
}