/* Transição de página com o ícone da Vallo (rápida: ~0,3 s para cobrir, ~0,4 s para revelar) */
.vt-cover{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:all;
  background:linear-gradient(135deg,#2564AE 0%,#123971 70%,#0C1728 100%);
  transform:translateX(101%);animation:vtCover .32s cubic-bezier(.7,0,.25,1) forwards}
.vt-cover img{width:clamp(72px,14vw,120px);height:auto;opacity:0;transform:translateX(40px) scale(.85);
  animation:vtIconIn .3s cubic-bezier(.2,.8,.2,1) .1s forwards;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
@keyframes vtCover{to{transform:translateX(0)}}
@keyframes vtIconIn{to{opacity:1;transform:none}}

/* ao chegar na nova página: a aba azul já cobre a tela e desliza para a esquerda levando o ícone */
html.vt-arrive::before,html.vt-arrive::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  animation:vtReveal .42s cubic-bezier(.7,0,.25,1) .12s forwards}
html.vt-arrive::before{background:linear-gradient(135deg,#2564AE 0%,#123971 70%,#0C1728 100%)}
html.vt-arrive::after{background:url(/assets/icone-256.png) center/clamp(72px,14vw,120px) auto no-repeat;
  animation-name:vtRevealIcon}
@keyframes vtReveal{to{transform:translateX(-101%)}}
@keyframes vtRevealIcon{to{transform:translateX(-101%) scale(.9);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .vt-cover,.vt-cover img{animation-duration:.01s}
  html.vt-arrive::before,html.vt-arrive::after{display:none}
}