/* Program Notes — motion. Personality: a live show run from a printed program.
   Cues go to standby, then live; lines print across the sheet; pages turn on the spine.
   Hidden-before-reveal states exist only under html.mo-on, which cue.js adds itself.
   html.mo (set in the page head when motion is allowed) only runs the first-screen keyframes,
   which start from a visible or near-visible state and always end visible. */

:root {
  --dur-tap: 140ms;
  --dur-quick: 240ms;
  --dur-menu: 460ms;
  --dur-menu-out: 260ms;
  --dur-intro: 700ms;
  --dur-reveal: 820ms;
  --dur-print: 1000ms;
  --dur-plate: 1100ms;
  --dur-cue: 900ms;
  --dur-page: 620ms;
  --dur-ticker: 64s;
  --ease-cue: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.3, 0.7, 0.3, 1);
  --ease-leaf: cubic-bezier(0.65, 0, 0.25, 1);
  --stagger: 70ms;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Micro-interactions ---------- */
  .btn::before, .ro-row::before, .ep::before { transition: transform var(--dur-quick) var(--ease-cue); }
  .btn { transition: color var(--dur-quick) var(--ease-cue), transform var(--dur-tap) var(--ease-press); }
  .btn:active { transform: translateY(1px) scale(0.985); }
  .btn--ghost { transition: color var(--dur-quick) var(--ease-cue), box-shadow var(--dur-quick) var(--ease-cue), transform var(--dur-tap) var(--ease-press); }
  .btn .arrow, .ro-arrow, .ep-act .arrow, .text-link .arrow { transition: transform var(--dur-quick) var(--ease-cue); }
  .btn:hover .arrow, .btn:focus-visible .arrow,
  .ro-row:hover .ro-arrow, .ro-row:focus-visible .ro-arrow,
  .ep-act a:hover .arrow, .ep-act a:focus-visible .arrow,
  .text-link:hover .arrow, .text-link:focus-visible .arrow { transform: translateX(0.3rem); }
  .ro-title, .ro-no { transition: transform var(--dur-quick) var(--ease-cue); }
  .ro-row:hover .ro-title, .ro-row:focus-visible .ro-title { transform: translateX(0.4rem); }
  #site-nav li a::after { transition: transform var(--dur-quick) var(--ease-cue); }
  .text-link::after { transition: transform var(--dur-quick) var(--ease-cue); }
  .header-cta, .jump a, .filters button, .choice, .crisis ul a, .contact-lines a { transition: background-color var(--dur-quick), color var(--dur-quick), border-color var(--dur-quick); }
  .ep-thumb img { transition: transform var(--dur-reveal) var(--ease-cue), opacity var(--dur-quick); }
  .tally, .tally::before { transition: background-color var(--dur-quick), border-color var(--dur-quick), color var(--dur-quick); }
  .field input, .field textarea { transition: background-size var(--dur-quick) var(--ease-cue), border-color var(--dur-quick); }
  .field.is-invalid input, .field.is-invalid textarea { animation: nudge 360ms var(--ease-press) 1; }
  .choice input { transition: transform var(--dur-tap) var(--ease-press); }
  .choice:active input { transform: scale(0.88); }
  .next-page .np-title { transition: color var(--dur-quick); }
  .nav-toggle .bars::before, .nav-toggle .bars::after { transition: transform var(--dur-quick) var(--ease-cue); }

  @keyframes nudge { 25% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }

  /* Mobile menu: the panel prints down from the bar; rows follow; closing is faster */
  @media (max-width: 63.99em) {
    .js #site-nav { transition: clip-path var(--dur-menu-out) var(--ease-leaf), visibility 0s linear var(--dur-menu-out); }
    .js #site-nav.is-open { transition: clip-path var(--dur-menu) var(--ease-cue), visibility 0s; }
    .js #site-nav li { opacity: 0; transform: translateY(-0.5rem); transition: opacity var(--dur-menu-out), transform var(--dur-menu-out) var(--ease-cue); }
    .js #site-nav.is-open li { opacity: 1; transform: none; transition: opacity var(--dur-menu) var(--ease-cue), transform var(--dur-menu) var(--ease-cue); transition-delay: calc(80ms + var(--k, 0) * 45ms); }
  }

  /* ---------- First screen (CSS only; never waits for a script) ---------- */
  .mo:not(.no-intro) #site-header .bar > * { animation: settle var(--dur-intro) var(--ease-cue) backwards; }
  .mo:not(.no-intro) #site-header .bar > :nth-child(2) { animation-delay: 60ms; }
  .mo:not(.no-intro) #site-header .bar > :nth-child(3) { animation-delay: 120ms; }
  .mo:not(.no-intro) #site-header .bar > :nth-child(4) { animation-delay: 180ms; }
  .mo .program-rule { animation: print var(--dur-print) var(--ease-cue) 80ms backwards; transform-origin: 0 50%; }
  .mo .folio { animation: settle var(--dur-intro) var(--ease-cue) 200ms backwards; }
  .mo h1 .w { display: inline-block; animation: word var(--dur-reveal) var(--ease-cue) backwards; animation-delay: calc(220ms + var(--i, 0) * var(--stagger)); }
  .mo .intro { animation: lift var(--dur-intro) var(--ease-cue) backwards; animation-delay: calc(420ms + var(--d, 0) * 90ms); }
  .mo .portrait .frame { animation: plate-in var(--dur-plate) var(--ease-cue) 120ms backwards; }
  .mo .nameplate { animation: lower-third var(--dur-reveal) var(--ease-cue) 760ms backwards; }
  .mo .seen-on { animation: wipe var(--dur-print) var(--ease-cue) 640ms backwards; }

  @keyframes settle { from { transform: translateY(-0.4rem); } }
  @keyframes lift { from { transform: translateY(0.9rem); opacity: 0.001; } }
  @keyframes word { from { transform: translateY(0.28em); opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -0.2em 0 0); } }
  @keyframes print { from { transform: scaleX(0.02); } }
  @keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes plate-in { from { clip-path: inset(0 0 14% 0); transform: translateY(0.6rem); } to { clip-path: inset(0 0 0 0); } }
  @keyframes lower-third { from { clip-path: inset(0 100% 0 0); transform: translateX(-0.75rem); } to { clip-path: inset(0 0 0 0); } }

  /* ---------- Reveals (below the first screen; JS arms them) ---------- */
  .mo-on [data-rv] { transition: opacity var(--dur-reveal) var(--ease-cue), transform var(--dur-reveal) var(--ease-cue), clip-path var(--dur-print) var(--ease-cue); }

  /* rise: paragraphs, forms, blocks */
  .mo-on [data-rv="rise"]:not(.in) { opacity: 0; transform: translateY(1.5rem); }

  /* print: a line printing across the program sheet, left to right */
  .mo-on [data-rv="print"]:not(.in) { clip-path: inset(0 100% 0 0); transform: translateX(-0.5rem); }
  .mo-on [data-rv="print"].in { clip-path: inset(0 -1rem 0 0); }

  /* plate: photographs unveil from the bottom edge */
  .mo-on [data-rv="plate"] .frame { transition: clip-path var(--dur-plate) var(--ease-cue); }
  .mo-on [data-rv="plate"]:not(.in) .frame { clip-path: inset(100% 0 0 0); }

  /* credits: names fade up one after another, like title cards */
  .mo-on [data-rv="credits"] > * { transition: opacity var(--dur-reveal) var(--ease-cue), transform var(--dur-reveal) var(--ease-cue); transition-delay: calc(var(--k, 0) * 140ms); }
  .mo-on [data-rv="credits"]:not(.in) > * { opacity: 0; transform: translateY(0.75rem) scale(0.98); }

  /* rows: listing rows slide in from the cue column, staggered (capped in JS) */
  .mo-on [data-rv="rows"] > * { transition: opacity var(--dur-reveal) var(--ease-cue), transform var(--dur-reveal) var(--ease-cue); transition-delay: calc(var(--k, 0) * 55ms); }
  .mo-on [data-rv="rows"]:not(.in) > * { opacity: 0; transform: translateX(-1.25rem); }

  /* Keyboard focus completes any reveal it enters, at once */
  .mo-on [data-rv]:has(:focus-visible), .mo-on [data-rv]:has(:focus-visible) > *, .mo-on [data-rv]:has(:focus-visible) .frame { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }

  /* Segment rule: drawn across as the segment arrives */
  .mo-on .seg::before { transition: transform var(--dur-print) var(--ease-cue); }
  .mo-on .seg:not(.drawn)::before { transform: scaleX(0); }

  /* ---------- Signature: cue lights ---------- */
  .cue-light { transition: background-color var(--dur-quick), border-color var(--dur-quick); }
  .mo-on .seg.is-live .cue-light::after { animation: cue-go var(--dur-cue) var(--ease-cue) 1; }
  .mo-on .seg.is-standby .cue-light { animation: standby 1.1s ease-in-out 2; }
  .mo-on .cue-no, .mo-on .cue-name { transition: color var(--dur-quick), transform var(--dur-quick) var(--ease-cue); }
  .mo-on .seg:not(.is-live) .cue-no { transform: translateY(0.15rem); }
  .mo-on .seg.is-live .cue-tc { color: var(--accent); }
  .mo-on .studio .seg.is-live .cue-tc { color: var(--accent-soft); }
  @keyframes cue-go { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.7); } }
  @keyframes standby { 50% { border-color: var(--accent); } }

  /* Book stand-in turns slightly as it scrolls (the --rot value is scrubbed in JS) */
  .standin { transition: box-shadow var(--dur-quick); }

  /* ---------- Page turn (cross-document view transitions) ---------- */
  @view-transition { navigation: auto; }
  #site-header { view-transition-name: site-header; }
  .folio { view-transition-name: folio; }
  ::view-transition-group(root) { animation-duration: var(--dur-page); }
  ::view-transition-old(root) {
    animation: page-away var(--dur-page) var(--ease-leaf) both;
    transform-origin: 0 50%;
    z-index: 2;
  }
  ::view-transition-new(root) {
    animation: page-under var(--dur-page) var(--ease-leaf) both;
    z-index: 1;
  }
  ::view-transition-group(folio) { animation-duration: var(--dur-page); animation-timing-function: var(--ease-leaf); }
  @keyframes page-away {
    0% { transform: perspective(2200px) rotateY(0deg); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: perspective(2200px) rotateY(-62deg) translateX(-4%); opacity: 0; }
  }
  @keyframes page-under { from { transform: scale(0.985); opacity: 0.6; } }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}