/* ============================================================
   transition.css — a passagem entre as páginas (piscar de olhos)
   ============================================================ */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.page-transition__lid {
  position: absolute;
  left: 0;
  width: 100%;
  height: 52%;
  background: var(--bg-deep);
  box-shadow: 0 0 60px 20px var(--bg-deep);
  will-change: transform;
}

.page-transition__lid--top {
  top: 0;
  transform-origin: top center;
}

.page-transition__lid--bottom {
  bottom: 0;
  transform-origin: bottom center;
}

/* Um traço âmbar na linha do "olho", que se apaga junto com a abertura */
.page-transition__seam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(48rem, 82vw);
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(to right, transparent, var(--accent), transparent);
}

/* ---------- Entrada: as pálpebras se abrem (sem depender de JS) ---------- */

.page-transition__lid--top {
  animation: lid-open-top 720ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.page-transition__lid--bottom {
  animation: lid-open-bottom 720ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.page-transition__seam {
  animation: seam-fade 720ms ease-out forwards;
}

@keyframes lid-open-top {
  0% { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}

@keyframes lid-open-bottom {
  0% { transform: translateY(0); }
  100% { transform: translateY(101%); }
}

@keyframes seam-fade {
  0% { opacity: 1; width: min(48rem, 82vw); }
  100% { opacity: 0; width: 0; }
}

/* ---------- Saída: as pálpebras se fecham antes de navegar ---------- */

body.is-leaving .page-transition__lid--top {
  animation: lid-close-top 520ms cubic-bezier(0.5, 0, 0.35, 1) forwards;
}

body.is-leaving .page-transition__lid--bottom {
  animation: lid-close-bottom 520ms cubic-bezier(0.5, 0, 0.35, 1) forwards;
}

body.is-leaving .page-transition__seam {
  animation: seam-grow 520ms ease-in forwards;
}

@keyframes lid-close-top {
  0% { transform: translateY(-101%); }
  100% { transform: translateY(0); }
}

@keyframes lid-close-bottom {
  0% { transform: translateY(101%); }
  100% { transform: translateY(0); }
}

@keyframes seam-grow {
  0% { opacity: 0; width: 0; }
  60% { opacity: 1; width: min(48rem, 82vw); }
  100% { opacity: 1; width: min(48rem, 82vw); }
}

/* O conteúdo se afasta um pouco enquanto o olho se fecha */
body.is-leaving #app {
  transition: opacity 420ms ease, transform 420ms ease;
  opacity: 0;
  transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
  .page-transition {
    display: none;
  }

  body.is-leaving #app {
    opacity: 1;
    transform: none;
  }
}