.pt-overlay { position: fixed; inset: 0; z-index: 3000; pointer-events: none; visibility: hidden; overflow: hidden; }

/* Covers the new page from its first paint until page-transition.js builds the overlay.
   Lifts itself after 4s even if the script never arrives. */
html.pt-cover:not(.pt-built)::after {
  content: ""; position: fixed; inset: 0; z-index: 3000; background: var(--ink);
  animation: pt-failsafe 0s linear 4s forwards;
}
@keyframes pt-failsafe { to { visibility: hidden; } }
.pt-backdrop, .pt-rows { position: absolute; inset: 0; }
.pt-backdrop { background: var(--ink); opacity: 0; transition: opacity .3s; }

.pt-row {
  --from: -112%; --to: 112%; --tilt: 0deg;
  position: absolute; left: -14vw; right: -14vw; height: 40vh;
  font-family: var(--font-title); font-size: min(28vh, 26vw); line-height: 1; text-transform: uppercase;
  transform-origin: 50% 0; transform: rotate(var(--tilt)) translateX(var(--from)); will-change: transform;
}
.pt-row--1 { --tilt: 2deg; top: calc(0vh - 2.5vw); height: calc(40vh + 2.5vw); background: var(--orange); color: var(--ink); }
.pt-row--2 { --from: 112%; --to: -112%; --tilt: -3deg; top: calc(40vh - 6.5vw); background: var(--magenta); color: #ffdeeb; transition-delay: 70ms; }
.pt-row--3 { --tilt: 1.2deg; top: calc(80vh - 13vw); height: calc(21vh + 15.5vw); background: var(--navy); color: #cfd8f2; transition-delay: .14s; }

.pt-track { display: flex; align-items: center; gap: .15em; height: 100%; overflow: hidden; white-space: nowrap; }
.pt-word { display: inline-flex; align-items: center; gap: .15em; flex: 0 0 auto; }
.pt-plus { width: .55em; height: .55em; flex: 0 0 auto; }

@keyframes pt-drift { to { translate: var(--pt-drift, -6%) 0; } }
.pt-overlay.enter .pt-track, html.pt-cover .pt-track { animation: pt-drift 7s linear infinite alternate; }
.pt-row--2 .pt-track { --pt-drift: 6%; }

html.pt-cover .pt-overlay, .pt-overlay.enter { visibility: visible; }
html.pt-cover .pt-backdrop, .pt-overlay.enter .pt-backdrop { opacity: 1; }
html.pt-cover .pt-row { transform: rotate(var(--tilt)) translateX(0); }
.pt-overlay.enter .pt-row {
  transform: rotate(var(--tilt)) translateX(0);
  transition: transform .48s cubic-bezier(.55, 0, .45, 1);
}
html.pt-cover .pt-overlay.leave .pt-row {
  transform: rotate(var(--tilt)) translateX(var(--to));
  transition: transform .52s cubic-bezier(.55, 0, .45, 1);
}
html.pt-cover .pt-overlay.leave .pt-row--2 { transition-delay: 70ms; }
html.pt-cover .pt-overlay.leave .pt-row--3 { transition-delay: .14s; }
html.pt-cover .pt-overlay.leave .pt-backdrop { opacity: 0; transition: opacity .35s .15s; }

.pt-row--m { left: -20vw; right: -20vw; }
.pt-row--m .pt-track { height: var(--band); }
.pt-row--c1 { background: var(--orange); color: var(--ink); }
.pt-row--c2 { background: var(--magenta); color: #ffdeeb; }
.pt-row--c3 { background: var(--navy); color: #cfd8f2; }
.pt-row--m:nth-child(even) .pt-track { --pt-drift: 6%; }
@media (prefers-reduced-motion: reduce) {
  .pt-overlay, .pt-overlay * { transition: none !important; animation: none !important; }
}