/* Curtain used for both the arrival preload and the leave transition. It sits
   above everything, drops from below on leave and lifts on arrival, so two
   real page loads read as one continuous movement. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--cream, #f4f0e8);
  color: var(--ink, #171715);
  transform: translateY(0);
  transition: transform .9s cubic-bezier(.76, 0, .24, 1), visibility .9s;
}
.curtain.is-done { transform: translateY(-101%); visibility: hidden; }
.curtain.is-leaving { transform: translateY(0); visibility: visible; }
.has-curtain .curtain.is-leaving { animation: curtain-in .62s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes curtain-in { from { transform: translateY(101%); } to { transform: translateY(0); } }

.curtain__mark { position: absolute; top: 50%; left: 50%; width: min(26rem, 46vw); transform: translate(-50%, -50%); }
.curtain__script { display: block; width: 100%; height: auto; overflow: visible; }
.curtain__fill-path { fill: currentColor; }
.curtain__line-path { fill: none; stroke: currentColor; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }

.curtain__count { position: absolute; right: 5.1vw; bottom: 4.4vh; font-family: var(--display, Georgia, serif); font-size: clamp(2rem, 3.5vw, 3.5rem); }
.curtain__line { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; }

@media (max-width: 950px) {
  .curtain__count { right: var(--pad, 20px); bottom: var(--pad, 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
}