/* ============================================================
   O rótulo atravessa.
   A home é escura, os destinos são claros. A superfície vira —
   uma aresta branca cresce dos limites do card — e a única coisa
   que sobrevive à virada é o rótulo mono do card, que continua
   na mesma coordenada da tela na página seguinte e viaja dali
   até o lugar do rótulo do hero, entregando o posto.

   A viagem é translação pura: os dois rótulos são Geist Mono
   Medium 10/14 com entreletra 0, então nada escala.

   Sem imagem nenhuma — por isso sempre executa.
   ============================================================ */

/* ── saída: a virada ───────────────────────────────────────── */
.page-departure {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  isolation: isolate;
  cursor: progress;
}
.page-departure-sheet {
  position: absolute;
  inset: 0;
  background: #fff;
  /* começa exatamente sobre o card e abre até a borda da tela */
  clip-path: inset(
    var(--departure-top) var(--departure-right)
    var(--departure-bottom) var(--departure-left)
  );
  animation: virar-superficie 320ms cubic-bezier(.76, 0, .24, 1) forwards;
}
@keyframes virar-superficie {
  to { clip-path: inset(0px 0px 0px 0px); }
}

/* o rótulo do card clicado sobe para cima da folha e só troca de
   cor enquanto a superfície vira embaixo dele */
.home-card[data-departing] .home-card-rotulo { visibility: hidden; }
.home-page .home-card[data-departing] {
  border-color: transparent;
  background: transparent;
  outline: none;
}
.home-page.is-departing .home-header,
.home-page.is-departing .home-hero,
.home-page.is-departing .home-footer,
.home-page.is-departing .home-card:not([data-departing]) {
  opacity: .16;
  transition: opacity 200ms ease;
}
.home-page.is-departing .mira { opacity: 0; }

/* ── o rótulo viajante ─────────────────────────────────────── */
.page-rotulo {
  position: fixed;
  z-index: 101;
  font-family: var(--mono, "Geist Mono"), ui-monospace, monospace;
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
/* na saída ele fica parado e acompanha a inversão da superfície */
.page-rotulo--saida {
  color: #8e8981;
  animation: virar-rotulo 320ms cubic-bezier(.76, 0, .24, 1) both;
}
@keyframes virar-rotulo {
  to { color: #6f6b62; }
}
/* na chegada ele parte da mesma coordenada e entrega o posto */
.page-rotulo--chegada {
  color: #6f6b62;
  animation: entregar-rotulo 520ms 80ms cubic-bezier(.76, 0, .24, 1) both;
}
@keyframes entregar-rotulo {
  0%, 84% { opacity: 1; }
  0% { transform: translate(0, 0); }
  100% {
    transform: translate(var(--rotulo-dx), var(--rotulo-dy));
    opacity: 0;
  }
}

/* ── chegada ───────────────────────────────────────────────────
   Definido antes da primeira pintura e consumido uma vez, só
   nestes cliques de card. Sem o atributo, nada disso existe e a
   página aparece pronta. */
html[data-page-arrival]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  pointer-events: none;
  animation: sair-cortina 220ms 60ms ease-out both;
}
@keyframes sair-cortina {
  to { opacity: 0; }
}

/* as réguas se desenham — uma barra da cor do papel cobre o fio
   e encolhe para a esquerda, revelando-o */
html[data-page-arrival] .pf-topo,
html[data-page-arrival] .pf-hero,
html[data-page-arrival] .pf-lista,
html[data-page-arrival] .introduction { position: relative; }

html[data-page-arrival] .pf-topo::after,
html[data-page-arrival] .pf-hero::after,
html[data-page-arrival] .pf-lista::after,
html[data-page-arrival] .introduction::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #fff;
  transform-origin: right;
  animation: revelar-regua 380ms cubic-bezier(.76, 0, .24, 1) both;
}
html[data-page-arrival] .pf-topo::after { bottom: -1px; animation-delay: 120ms; }
html[data-page-arrival] .pf-hero::after { bottom: -1px; animation-delay: 180ms; }
html[data-page-arrival] .pf-lista::after { top: -1px; animation-delay: 240ms; }
html[data-page-arrival] .introduction::after { top: -1px; animation-delay: 180ms; }

@keyframes revelar-regua {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* o rótulo da página recebe o posto quando o viajante chega */
html[data-page-arrival] .pf-hero .pf-rotulo,
html[data-page-arrival] .hero .eyebrow,
html[data-page-arrival] .abertura .rotulo {
  animation: receber-rotulo 200ms 520ms ease-out both;
}
@keyframes receber-rotulo {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* o título assenta por último */
html[data-page-arrival] .pf-hero h1,
html[data-page-arrival] .hero h1,
html[data-page-arrival] .abertura h1 {
  animation: assentar-titulo 380ms 360ms cubic-bezier(.22, .75, .2, 1) both;
}
@keyframes assentar-titulo {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-departure,
  .page-rotulo,
  html[data-page-arrival]::before { display: none; }
  html[data-page-arrival] .pf-topo::after,
  html[data-page-arrival] .pf-hero::after,
  html[data-page-arrival] .pf-lista::after,
  html[data-page-arrival] .introduction::after { display: none; }
  html[data-page-arrival] .pf-hero .pf-rotulo,
  html[data-page-arrival] .hero .eyebrow,
  html[data-page-arrival] .abertura .rotulo,
  html[data-page-arrival] .pf-hero h1,
  html[data-page-arrival] .hero h1,
  html[data-page-arrival] .abertura h1 { animation: none; }
}