/* ============================================================
   PAGE TRANSITIONS — dagger overlay
   ============================================================ */

/* Oculta el body hasta que JS crea el overlay y lo cubre.
   Evita que el usuario vea un flash de contenido antes de la
   animación de entrada. El fallback (2.5 s) está en el HTML. */
html.pt-init > body {
  visibility: hidden;
}

/* El overlay se extiende 20 px más allá del borde derecho del
   viewport para cubrir el scrollbar. De este modo, si el
   scrollbar cambia de ancho (Windows: delgado → expandido),
   el overlay ya lo tapó y no se ve ningún desplazamiento. */
.pt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: -20px;
  z-index: 9999;
  background: #000000;
  opacity: 1;
  pointer-events: all;
  will-change: opacity;
}

/* ── Entering a new page: overlay is opaque, fades out ── */
.pt-overlay.pt-enter {
  animation: pt-ol-out 1350ms cubic-bezier(0.76, 0, 0.24, 1) both;
  animation-delay: 150ms;
}

.pt-overlay.pt-enter .pt-dagger {
  animation: pt-dg-out 1080ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 150ms;
}

/* ── Leaving the current page: overlay fades in ── */
.pt-overlay.pt-leave {
  opacity: 0;
  pointer-events: all;
  animation: pt-ol-in 690ms cubic-bezier(0.76, 0, 0.24, 1) both;
}

.pt-overlay.pt-leave .pt-dagger {
  animation: pt-dg-in 690ms cubic-bezier(0.76, 0, 0.24, 1) both;
  animation-delay: 65ms;
}

/* ── Idle: completely out of the way ── */
.pt-overlay.pt-idle {
  opacity: 0;
  pointer-events: none;
}

/* ── Dagger ──
   Se centra con top:50vh / left:50vw (relativo al viewport,
   no al overlay). Así el centrado es inmune a cambios de
   ancho del overlay causados por el scrollbar. */
.pt-dagger {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  height: clamp(130px, 42vh, 270px);
  width: auto;
  will-change: opacity, transform;
  filter: drop-shadow(0 0 28px rgba(245, 245, 245, 0.12));
}

/* ── Keyframes ──
   Los translate(-50%,-50%) están dentro de los keyframes
   para que el centrado no se pierda cuando la animación
   toma control completo del transform. */
@keyframes pt-ol-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pt-ol-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes pt-dg-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 22px)) scale(0.84);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes pt-dg-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 16px)) scale(1.09);
  }
}

/* ── Accessibility: respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .pt-overlay.pt-enter,
  .pt-overlay.pt-enter .pt-dagger,
  .pt-overlay.pt-leave,
  .pt-overlay.pt-leave .pt-dagger {
    animation-duration: 1ms !important;
    animation-delay:    0ms !important;
  }
}