/* ═══════════════════════════════════════
   PAGE TRANSITION — jet wipe
   Uscita: pannello sale dal basso, jet attraversa lo schermo con scia magenta.
   Entrata: pannello già presente al primo paint, scia svanisce, pannello si alza.
   ═══════════════════════════════════════ */

/* Copre lo schermo dal primissimo frame della nuova pagina (classe messa da
   uno script inline in <head>), prima ancora che transition.js sia caricato. */
html.p2f-wiping::after {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--bg, #09090b);
    z-index: 2147483000;
    pointer-events: none;
}

.p2f-wipe {
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    background: var(--bg, #09090b);
    overflow: hidden;
    clip-path: inset(100% 0 0 0);
    pointer-events: none;
    will-change: clip-path;
}
.p2f-wipe.is-in {
    pointer-events: auto;
    animation: p2f-wipe-in 0.45s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.p2f-wipe.is-hold { clip-path: inset(0); pointer-events: auto; }
.p2f-wipe.is-out {
    clip-path: inset(0);
    animation: p2f-wipe-out 0.55s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

@keyframes p2f-wipe-in  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes p2f-wipe-out { from { clip-path: inset(0); }          to { clip-path: inset(0 0 100% 0); } }

/* Scia: parte dal bordo sinistro e segue il jet */
.p2f-wipe-trail {
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    width: 0;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, var(--red, #FF00F3) 30%, var(--red, #FF00F3));
    box-shadow: 0 0 6px var(--red, #FF00F3), 0 0 18px rgba(255, 0, 243, 0.55), 0 0 40px rgba(255, 0, 243, 0.25);
    opacity: 1;
}
.p2f-wipe.is-fly .p2f-wipe-trail {
    animation: p2f-trail-grow 0.75s cubic-bezier(0.55, 0, 0.3, 1) forwards;
}
.p2f-wipe.is-hold .p2f-wipe-trail,
.p2f-wipe.is-out .p2f-wipe-trail {
    width: 100%;
    animation: p2f-trail-fade 0.4s ease-out forwards;
}
@keyframes p2f-trail-grow { from { width: 0; } to { width: 100%; } }
@keyframes p2f-trail-fade { from { opacity: 1; } to { opacity: 0; } }

/* Jet: attraversa da fuori-sinistra a fuori-destra */
.p2f-wipe-jet {
    position: absolute;
    top: 50%;
    left: 0;
    width: 120px;
    height: auto;
    transform: translate(-110%, -50%);
    color: var(--text, #f4f4f6);
    filter: drop-shadow(0 0 10px rgba(255, 0, 243, 0.35));
    opacity: 0;
}
.p2f-wipe.is-fly .p2f-wipe-jet {
    animation: p2f-jet-fly 0.75s cubic-bezier(0.55, 0, 0.3, 1) forwards;
}
@keyframes p2f-jet-fly {
    0%   { transform: translate(-110%, -50%); opacity: 1; }
    100% { transform: translate(100vw, -50%);  opacity: 1; }
}

@media (max-width: 640px) {
    .p2f-wipe-jet { width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    html.p2f-wiping::after { display: none; }
    .p2f-wipe { display: none !important; }
}