/* Sipario: preloader del primo ingresso e passaggio tra sito, accesso e gestionale.
   Tra pagine della stessa area basta la dissolvenza nativa del browser (View Transitions). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-esce .22s ease both; }
::view-transition-new(root) { animation: vt-entra .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-esce { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(8px); } }

.sipario { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: #12203D; color: #FAF9F6; overflow: hidden; pointer-events: none; }
.sipario::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 45%, rgba(0,194,168,0.16), rgba(0,194,168,0) 70%); }
.sipario::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 75%); }
.sipario-centro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sipario-logo { width: 76px; height: 76px; animation: sip-logo .7s cubic-bezier(.2,.9,.25,1.2) both; }
.sipario-logo img { width: 100%; height: 100%; object-fit: contain; animation: sip-gira 2.4s cubic-bezier(.6,0,.3,1) .5s infinite; }
.sipario-nome { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; animation: sip-su .6s .12s cubic-bezier(.2,.8,.2,1) both; }
.sipario-sotto { margin-top: -12px; font-family: Inter, system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #4FE0CC; animation: sip-su .6s .2s cubic-bezier(.2,.8,.2,1) both; }
.sipario-riga { width: 140px; height: 3px; border-radius: 3px; background: rgba(250,249,246,0.12); overflow: hidden; animation: sip-su .6s .26s cubic-bezier(.2,.8,.2,1) both; }
.sipario-riga i { display: block; height: 100%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, #00C2A8, #4FE0CC); animation: sip-corre 1.1s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes sip-logo { from { opacity: 0; transform: scale(.6) rotate(-20deg); } }
@keyframes sip-gira { 0%, 60% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes sip-su { from { opacity: 0; transform: translateY(10px); } }
@keyframes sip-corre { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

/* Stati: .sipario-su = coperto (preloader o arrivo), .sipario-via = si alza, .sipario-scende = copre prima di cambiare pagina */
html.sipario-su .sipario, html.sipario-scende .sipario { display: flex; }
html.sipario-su body { overflow: hidden; }
html.sipario-via .sipario { display: flex; animation: sip-alza .75s cubic-bezier(.76,0,.24,1) forwards; }
html.sipario-via .sipario-centro { animation: sip-svanisce .3s ease forwards; }
html.sipario-scende .sipario { animation: sip-scende .55s cubic-bezier(.76,0,.24,1) both; pointer-events: auto; }
@keyframes sip-alza { to { clip-path: inset(0 0 100% 0); } }
@keyframes sip-scende { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sip-svanisce { to { opacity: 0; transform: translateY(-14px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .sipario, .sipario * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Sicura: se lo script non arriva, il sipario sparisce comunque */
html.sipario-su .sipario { animation: sip-sicurezza .4s 4s forwards; }
@keyframes sip-sicurezza { to { opacity: 0; visibility: hidden; } }
