/* Paginatransitie: een zwart doek met een gele lijn schuift van onder over de pagina (vertrek)
   en op de nieuwe pagina naar boven weg (aankomst). 700 ms, ease-in-out. Zie js/transition.js. */
.pt {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  display: grid; place-items: center; background: var(--black); color: var(--white);
  transform: translateY(100%); visibility: hidden;
}
/* Gele lijn op de bewegende rand: boven bij het binnenkomen, onder bij het wegschuiven */
.pt::before, .pt::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--yellow); }
.pt::before { top: 0; }
.pt::after { bottom: 0; }
.pt__label { opacity: 0; transform: translateY(24px); }

/* Vertrek: doek schuift van onder naar boven over de pagina, het label komt erbij */
.pt.is-in { visibility: visible; pointer-events: auto; transform: translateY(0); transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.pt.is-in .pt__label { opacity: 1; transform: none; transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1) 0.35s, transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0.35s; }

/* Aankomst: de pagina start bedekt (html.pt-arrive, gezet vóór de eerste paint) ... */
html.pt-arrive .pt { visibility: visible; pointer-events: auto; transform: translateY(0); }
html.pt-arrive .pt .pt__label { opacity: 1; transform: none; }
/* Onder het doek: geen CSS-overgangen op de pagina. Wat daar verandert (naar het anker scrollen, actieve foto,
   menubalk) staat zo meteen op zijn eindstand en loopt niet meer na als het doek weg is. */
html.pt-arrive body > :not(.pt), html.pt-arrive body > :not(.pt) *,
html.pt-arrive body > :not(.pt)::before, html.pt-arrive body > :not(.pt) *::before,
html.pt-arrive body > :not(.pt)::after, html.pt-arrive body > :not(.pt) *::after { transition: none !important; }
/* ... en het doek schuift naar boven weg */
.pt.is-out { visibility: visible; transform: translateY(-100%); transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
/* Label blijft op zijn plaats (transform: none) en fadet enkel uit; zonder die regel viel het terug naar de
   beginstand van 24 px lager en sprong het zichtbaar omlaag zodra het doek begon weg te schuiven. */
.pt.is-out .pt__label { opacity: 0; transform: none; transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1); }

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