/* ==========================================================================
   Transição de página (itens do menu)
   Referência: sonder-mr.com. Quatro colunas de cor cobrem a tela de cima
   para baixo, uma depois da outra (da direita para a esquerda); com a tela
   coberta, a página muda; na chegada, as colunas recolhem para baixo na
   mesma ordem e revelam a nova página.

   Estados (classes no <html>, controladas por assets/js/transition.js):
   - pt-out  cobrir (0.8s no total: 0.5s por coluna, 0.1s entre elas)
   - pt-in   revelar (mesmo ritmo). Na chegada de outra página, o script
             inline do <head> já aplica a classe antes do primeiro quadro,
             então a página nova nunca aparece antes da hora.
   Cor das colunas: --pt-color (padrão: vinho).
   Movimento reduzido: sem colunas; a troca é direta.
   ========================================================================== */

.pt {
  --pt-color: var(--c-wine);
  --pt-ease: cubic-bezier(0.87, 0, 0.13, 1); /* a mesma curva da referência e do menu */
  --pt-col: 0.5s; /* duração de cada coluna */
  --pt-step: 0.1s; /* intervalo entre colunas */
  position: fixed;
  inset: 0;
  z-index: 100; /* acima do menu (60) e do WhatsApp (30) */
  visibility: hidden;
  pointer-events: none;
}

.pt__col {
  position: absolute;
  top: 0;
  width: 26%; /* 1% a mais que a coluna: sem frestas entre elas */
  height: 100%;
  background: var(--pt-color);
  transform: scaleY(0);
}
.pt__col:nth-child(1) {
  left: 0;
  --pt-order: 3;
}
.pt__col:nth-child(2) {
  left: 25%;
  --pt-order: 2;
}
.pt__col:nth-child(3) {
  left: 50%;
  --pt-order: 1;
}
.pt__col:nth-child(4) {
  left: 75%;
  --pt-order: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html.pt-out .pt,
  html.pt-in .pt {
    visibility: visible;
    pointer-events: auto; /* nada é clicável durante a troca */
  }

  /* Cobrir: cada coluna desce do topo */
  html.pt-out .pt__col {
    transform-origin: 50% 0;
    animation: pt-cover var(--pt-col) var(--pt-ease) both;
    animation-delay: calc(var(--pt-order) * var(--pt-step));
  }

  /* Revelar: cada coluna recolhe para baixo */
  html.pt-in .pt__col {
    transform: scaleY(1);
    transform-origin: 50% 100%;
    animation: pt-reveal var(--pt-col) var(--pt-ease) both;
    animation-delay: calc(0.1s + var(--pt-order) * var(--pt-step));
  }
}

@keyframes pt-cover {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes pt-reveal {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}