/* ==========================================================================
   Motion.

   Everything here is scroll-driven or load-driven -- nothing loops forever
   demanding attention. The last block turns all of it off, and it is written
   as blanket overrides rather than per-rule opt-outs so that a new animation
   added later is covered by default instead of being quietly exempt.
   ========================================================================== */

/* -------------------------------------------------------- the curtain --- */

.curtain {
  position: fixed; inset: 0; z-index: 200;
  display: flex; pointer-events: none;
}
.curtain i {
  flex: 1; display: block;
  background: var(--sunken);
  border-right: 1px solid rgba(224, 175, 104, .09);
  transform: translateY(0);
  transition: transform 1.15s var(--curtain);
}
.curtain i:nth-child(2) { transition-delay: .06s; }
.curtain i:nth-child(3) { transition-delay: .12s; }
.curtain i:nth-child(4) { transition-delay: .18s; }
.curtain i:nth-child(5) { transition-delay: .24s; }
.curtain i:nth-child(6) { transition-delay: .30s; }
.curtain.up i { transform: translateY(-101%); }
.curtain.gone { display: none; }

/* --------------------------------------------------------- reveal ------- */

.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.rv.in { opacity: 1; transform: none; }

/* Paint the first screen immediately, independently of JavaScript downloads. */
.hero .rv { opacity: 1; transform: none; transition: none; }

/* Scripting off entirely: `no-js` is never removed, so the page is simply
   there. Without this the whole argument is invisible to a reader with
   JavaScript disabled -- and to a crawler that does not run it. */
.no-js .rv, .no-js .rvf { opacity: 1; transform: none; transition: none; }
.rv.d1 { transition-delay: .07s; }
.rv.d2 { transition-delay: .14s; }
.rv.d3 { transition-delay: .21s; }
.rv.d4 { transition-delay: .28s; }
.rv.d5 { transition-delay: .35s; }

/* A softer variant for large media, which looks wrong sliding. */
.rvf { opacity: 0; transition: opacity .9s var(--ease-out); }
.rvf.in { opacity: 1; }

/* ------------------------------------------------------- print parallax -- */
/* --py is written by js/motion.js from the scene's progress through the
   viewport. The image is oversized so there is room to travel. */

.plate img {
  height: 118%;
  top: -9%;
  transform: translate3d(0, calc(var(--py, 0) * 1%), 0);
}

/* ------------------------------------------------------ self-drawing SVG - */

.draw path, .draw line, .draw polyline, .draw rect, .draw circle, .draw ellipse {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1s var(--ease-out);
}
.draw.in path, .draw.in line, .draw.in polyline,
.draw.in rect, .draw.in circle, .draw.in ellipse { stroke-dashoffset: 0; }

.draw [data-fill] { opacity: 0; transition: opacity .55s var(--ease-out) .34s; }
.draw.in [data-fill] { opacity: 1; }

/* The lanterns above the drawn stage come up one at a time, like a board
   operator bringing the house lights in. */
.lamp { opacity: 0; transition: opacity .5s var(--ease-out); }
.draw.in .lamp { opacity: 1; }
.draw.in .lamp:nth-of-type(1) { transition-delay: .46s; }
.draw.in .lamp:nth-of-type(2) { transition-delay: .52s; }
.draw.in .lamp:nth-of-type(3) { transition-delay: .58s; }
.draw.in .lamp:nth-of-type(4) { transition-delay: .64s; }
.draw.in .lamp:nth-of-type(5) { transition-delay: .70s; }
.draw.in .lamp:nth-of-type(6) { transition-delay: .76s; }
.draw.in .lamp:nth-of-type(7) { transition-delay: .82s; }

/* A sightline running from a seat to the stage, drawn after the frame is up. */
.sight { transition: stroke-dashoffset .85s var(--ease-out) .6s, opacity .4s .6s; opacity: 0; }
.draw.in .sight { opacity: .55; }

/* ------------------------------------------------------ comparison rows -- */

.vs tbody tr { opacity: 0; transform: translateY(12px); }
.vs.in tbody tr {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.vs.in tbody tr:nth-child(1)  { transition-delay: .02s; }
.vs.in tbody tr:nth-child(2)  { transition-delay: .05s; }
.vs.in tbody tr:nth-child(3)  { transition-delay: .08s; }
.vs.in tbody tr:nth-child(4)  { transition-delay: .11s; }
.vs.in tbody tr:nth-child(5)  { transition-delay: .14s; }
.vs.in tbody tr:nth-child(6)  { transition-delay: .17s; }
.vs.in tbody tr:nth-child(7)  { transition-delay: .20s; }
.vs.in tbody tr:nth-child(8)  { transition-delay: .23s; }
.vs.in tbody tr:nth-child(9)  { transition-delay: .26s; }
.vs.in tbody tr:nth-child(10) { transition-delay: .29s; }
.vs.in tbody tr:nth-child(n+11) { transition-delay: .32s; }

/* ------------------------------------------------------------- the cue --- */

@keyframes cue-drop {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.cue .bar { animation: cue-drop 2.6s var(--ease) 2; }

@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
.termbar .live b { animation: live-pulse 2.4s ease-in-out 2; }

/* ===================================================================== */
/*  Off.                                                                 */
/* ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Nothing animates, and nothing is left invisible waiting for a trigger
     that will never produce motion. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .curtain { display: none !important; }
  .rv, .rvf { opacity: 1 !important; transform: none !important; }
  .plate img { transform: none !important; height: 100%; top: 0; }
  .vs tbody tr { opacity: 1 !important; transform: none !important; }
  .draw path, .draw line, .draw polyline,
  .draw rect, .draw circle, .draw ellipse { stroke-dashoffset: 0 !important; }
  .draw [data-fill], .lamp, .sight { opacity: 1 !important; }
  .sight { opacity: .55 !important; }
}

/* The same guarantee for anyone who lands with JS disabled: the reveal
   classes never get their .in, so they must not hide content. */
.no-js .rv, .no-js .rvf { opacity: 1; transform: none; }
.no-js .curtain { display: none; }
.no-js .vs tbody tr { opacity: 1; transform: none; }
.no-js .draw path, .no-js .draw line, .no-js .draw polyline,
.no-js .draw rect, .no-js .draw circle, .no-js .draw ellipse { stroke-dashoffset: 0; }
.no-js .draw [data-fill], .no-js .lamp { opacity: 1; }
.no-js .sight { opacity: .55; }