/* ===== Transiciones de página · Packatelas ===== */
:root{ --pkt-salida:480ms; --pkt-entrada:520ms; }

/* 1 · ENTRADA (no depende de JavaScript) */
@keyframes pktAparece{ from{opacity:0} to{opacity:1} }
@keyframes pktSube{ from{opacity:0;transform:translate3d(0,20px,0)} to{opacity:1;transform:none} }
body{ animation:pktAparece 380ms ease-out both }
main{ animation:pktSube var(--pkt-entrada) cubic-bezier(.2,.8,.2,1) both }

/* 2 · SALIDA */
.pkt-velo{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  display:grid; place-items:center;
  background:
    radial-gradient(700px 420px at 80% 8%,rgba(245,179,36,.22),transparent 62%),
    linear-gradient(160deg,#17255A 0%,#101A42 60%,#0B1330 100%);
  clip-path:inset(100% 0 0 0);
  transition:clip-path var(--pkt-salida) cubic-bezier(.65,0,.35,1);
  will-change:clip-path;
}
.pkt-velo img{
  width:88px;height:auto;opacity:0;transform:translateY(14px) scale(.92);
  transition:opacity 280ms ease 130ms, transform 280ms cubic-bezier(.2,.8,.2,1) 130ms;
}
html.pkt-saliendo .pkt-velo{ clip-path:inset(0 0 0 0); pointer-events:auto }
html.pkt-saliendo .pkt-velo img{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  body,main{animation:none}
  .pkt-velo{display:none}
}