/* THE ACT HEADLINE, IN A PIRATE HAND (Eivind, 2026-10-05: "when they come to
   the island, we will draw the curtain and write act 3 or whatever ... we
   will open the act with a nice written headline. and we want to use a nice
   pirate font.")

   The engine's curtain (js/curtain.js) prints the act label in .cu-act while
   the cloth is shut; the lighter act card (.arc-card h2) does the same over
   the frame. Both wear Futura (--font-display) in the engine's style.css.
   Here they wear Pirata One, the same face the studio's Pirates world uses
   (story-studio/fonts/worlds.css); build-web.cjs ships the woff2 and its OFL
   licence to /fonts/. Loaded after /game/style.css in play.html, so the
   plain selectors below outrank the engine's by order alone.

   The engine's cuActIn keyframes animate letter-spacing to .34em, and a
   running animation beats a normal declaration, so the curtain label gets
   its own entrance (same timing, tighter tracking: a display blackletter
   with Futura's spacing reads as scattered). cuActOut is kept for the exit. */
@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/PirataOne-400-latin.woff2) format('woff2');
}

#curtain .cu-act {
  font-family: 'Pirata One', var(--font-display);
  font-size: clamp(28px, 5.2vw, 56px);
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 28px rgba(0,0,0,.9);
  animation: atActIn .7s .95s ease-out both;
}
@keyframes atActIn { from { opacity: 0; letter-spacing: .2em; } to { opacity: 1; letter-spacing: .08em; } }

/* a fresh act start (js/act-title.js): the cloth is already drawn when BEGIN is
   pressed, so the headline is the first thing seen, then the velvet parts */
#curtain.shut.at-held .cu-l, #curtain.shut.at-held .cu-r, #curtain.shut.at-held .cu-valance { animation-duration: 0s; }
#curtain.shut.at-held .cu-act { animation-delay: .3s; }

/* the lighter card at a plain arc boundary (no intermission) takes the same face */
.arc-card h2 {
  font-family: 'Pirata One', var(--font-display);
  font-size: clamp(26px, 5vw, 48px);
  font-weight: 400;
  letter-spacing: .06em;
}