/* ==========================================================
   TRANSIZIONE DI PAGINA — velo full-screen (js/fx/transizione.js).
   COPRE → carica sotto → SVELA. Look sci-fi coerente con l'HUD.
   ========================================================== */

.pg-veil {
    position: fixed;
    inset: 0;
    z-index: 9000;                 /* sopra ogni vista (max 100), sotto il modale TV (9999) */
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 42%, #0a1020 0%, #05070d 62%, #03040a 100%);
    transition: opacity 0.18s ease;
}
.pg-veil.on   { visibility: visible; pointer-events: auto; }
.pg-veil.copre { opacity: 1; }
.pg-veil.subito { transition: none; }   /* copertura istantanea (caricamenti async, es. arena) */

/* griglia prospettica tenue, sfumata verso i bordi */
.pg-veil-grid {
    position: absolute; inset: 0; opacity: 0.28;
    background-image:
        linear-gradient(rgba(57, 224, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 224, 255, 0.16) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 26%, transparent 78%);
            mask-image: radial-gradient(circle at 50% 45%, #000 26%, transparent 78%);
}

/* scanline che scorre dall'alto in basso */
.pg-veil-scan {
    position: absolute; left: 0; right: 0; height: 130px; opacity: 0;
    background: linear-gradient(transparent, rgba(57, 224, 255, 0.12), transparent);
    animation: pgScan 1.1s linear infinite;
}
.pg-veil.on .pg-veil-scan { opacity: 1; }
@keyframes pgScan { from { transform: translateY(-150px); } to { transform: translateY(100vh); } }

/* loader centrale: anello che ruota + nucleo pulsante (compare in fase "carica") */
.pg-veil-core {
    position: relative; width: 62px; height: 62px; border-radius: 50%;
    border: 2px solid rgba(57, 224, 255, 0.22);
    box-shadow: 0 0 26px rgba(57, 224, 255, 0.32), inset 0 0 18px rgba(57, 224, 255, 0.22);
    opacity: 0; transform: scale(0.7);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.pg-veil-core::before {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid transparent; border-top-color: #39e0ff; border-right-color: #7a3cf0;
    animation: pgSpin 0.7s linear infinite;
}
.pg-veil-core::after {
    content: ""; position: absolute; inset: 34%; border-radius: 50%;
    background: radial-gradient(circle at 40% 34%, #eafcff, #39e0ff 72%);
    box-shadow: 0 0 12px #39e0ff; animation: pgPulse 1s ease-in-out infinite;
}
.pg-veil.carica .pg-veil-core { opacity: 1; transform: scale(1); }
@keyframes pgSpin { to { transform: rotate(360deg); } }
@keyframes pgPulse { 0%, 100% { opacity: 0.7; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }

/* SVELA: apertura a fessura orizzontale + breve glitch cromatico */
.pg-veil.svela { animation: pgSvela 0.34s ease forwards; }
@keyframes pgSvela {
    0%   { opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
    28%  { filter: contrast(1.5) saturate(1.35); }
    100% { opacity: 0; clip-path: inset(50% 0 50% 0); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-veil, .pg-veil * { animation: none !important; transition: none !important; }
}