/* IL PASSAGGIO — la tendina arancione (scelta da Francesco il 18/10/2026 fra due proposte; src/passaggio.js lo accende).
   Una curva sola, la stessa con cui si aprono le foto (power4.inOut): il passaggio è parente della comparsa, ⛔ un effetto in più.
   Fuori da un passaggio queste regole non toccano niente: valgono solo sugli pseudo-elementi della transizione. */
html[data-passaggio]{--passo:cubic-bezier(.83,0,.17,1)}

/* la barra resta ferma sopra il cambio: cambia solo colore, come quando si scorre */
html[data-passaggio] .barra{view-transition-name:barra}
::view-transition-group(barra){animation-duration:.6s;animation-timing-function:var(--passo)}
/* il cursore non resta congelato nella foto della pagina vecchia */
html.passaggio-via .cursore{opacity:0!important;transition:none!important}

/* la vecchia sale e si chiude dal basso, sotto passa l'arancio, la nuova sale dal basso */
html[data-passaggio]::view-transition{background:#FF6037}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
html[data-passaggio]::view-transition-old(root){animation:passaggio-via .7s var(--passo) both}
html[data-passaggio]::view-transition-new(root){animation:passaggio-su .75s var(--passo) .15s both}
@keyframes passaggio-via{from{clip-path:inset(0 0 0 0);transform:translateY(0)}to{clip-path:inset(0 0 100% 0);transform:translateY(-12vh)}}
@keyframes passaggio-su{from{clip-path:inset(100% 0 0 0);transform:translateY(12vh)}to{clip-path:inset(0 0 0 0);transform:translateY(0)}}