/* ─────────────────────────────────────────
   COMPONENT — PAGE TRANSITION (curtain wipe)
   Following a link to another page of the site (menu, footer, any link):
     1. leaving  — a clay curtain (.pt-curtain) drops down over the screen
     2. arriving — the next page opens covered (html.pt-enter::after) and,
                   once its styles and fonts are ready (.pt-go), the curtain
                   lifts off upwards.
   Behaviour: js/page-transition.js (+ the one-line script in each <head> that
   adds .pt-enter before the first paint). Skipped with reduced motion, for
   same-page #links, new tabs and outside links. index.html doesn't use it.
───────────────────────────────────────── */

:root {
  --pt-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --pt-drop: 550ms;   /* curtain down (keep in sync with DROP in the JS) */
  --pt-lift: 700ms;   /* curtain up */
}

/* 1. leaving */
.pt-curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;                /* above the menu overlay (200) */
  background: var(--inverse);
  transform: translateY(-100%);
  pointer-events: none;
}

.pt-curtain.is-in {
  transform: translateY(0);
  transition: transform var(--pt-drop) var(--pt-ease);
}

/* 2. arriving */
html.pt-enter::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--inverse);
  pointer-events: none;
  animation: pt-lift var(--pt-lift) var(--pt-ease) 120ms both;
  animation-play-state: paused;   /* waits for .pt-go (styles + fonts ready) */
}

html.pt-enter.pt-go::after { animation-play-state: running; }

@keyframes pt-lift {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}