/* Chrome e Safari: transição nativa entre documentos, sem JavaScript. */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:webiio-sai .34s cubic-bezier(.4,0,1,1) both;}
::view-transition-new(root){animation:webiio-entra .52s cubic-bezier(.16,1,.3,1) both;}
@keyframes webiio-sai{to{opacity:0;transform:translateY(-10px);}}
@keyframes webiio-entra{from{opacity:0;transform:translateY(14px);}}

/* Restantes browsers (Firefox): véu da cor do fundo, controlado pelo script.
   A animação tem 1.4s de atraso como rede de segurança : se o script falhar,
   o véu desaparece na mesma e a página nunca fica tapada. */
html.webiio-veu::after{
  content:"";position:fixed;inset:0;z-index:2147483647;
  background:#fff;pointer-events:none;
  animation:webiio-revela .52s ease 1.4s both;
}
html.webiio-veu.webiio-revela::after{animation:webiio-revela .52s ease both;}
html.webiio-veu.webiio-revela body{animation:webiio-entra .52s cubic-bezier(.16,1,.3,1) both;}
html.webiio-veu.webiio-tapa::after{animation:webiio-tapa .34s ease both;}
html.webiio-veu.webiio-tapa body{animation:webiio-sai .34s cubic-bezier(.4,0,1,1) both;}
@keyframes webiio-revela{from{opacity:1}to{opacity:0}}
@keyframes webiio-tapa{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
  html.webiio-veu::after{display:none;}
  html.webiio-veu body{animation:none;}
}