/* between-slide transitions (owned by js/transitions.js)
   #trx sits over the slides (z 55): under the film grain (60), the section cut (80) and the flash frame (85).
   Covers are plain elements in #trx. Copies of the outgoing slide live in a shadow root inside #trx
   (.trx-stage), which links every stylesheet of the page, this one included, so the copies look exactly
   like the slide. Every colour here is a slide ground (black, white, light grey) or a thin rule. */

#trx {
  position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; visibility: hidden; contain: strict;
  --trx-line: max(2px, calc(3px * var(--rs, 1)));
}
#trx.on { visibility: visible; }
#trx > * { position: absolute; pointer-events: none; }
#trx .trx-host { inset: 0; }

/* solid covers */
#trx .trx-fill { inset: 0; }
#trx .trx-bar { top: -5vh; height: 110vh; left: 0; width: 140vw; }
#trx .trx-bar.v { top: 0; left: -5vw; width: 110vw; height: 150vh; }
#trx .trx-bar b {   /* the slate: the new slide's file number, outlined like the background numerals */
  position: absolute; left: 50%; top: 50%; white-space: nowrap;
  font: 400 62vh/.8 var(--f-display, 'League Gothic', Impact, sans-serif); letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: var(--trx-line) var(--trx-h, #000);
}
#trx .trx-ring { left: 0; top: 0; border-radius: 50%; border: var(--trx-line) solid; box-sizing: border-box; }
#trx .trx-blades { inset: 0; }
#trx .trx-blade { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#trx .trx-blade i { position: absolute; left: -150vmax; top: 0; width: 300vmax; height: 150vmax; }
#trx .trx-tiles, #trx .trx-slats { inset: 0; }
#trx .trx-tiles i, #trx .trx-slats i { position: absolute; display: block; }
#trx .trx-lbar { left: 0; width: 100%; height: calc(50% + 1px); }
#trx .trx-lbar.t { top: 0; transform-origin: 50% 0; }
#trx .trx-lbar.b { bottom: 0; transform-origin: 50% 100%; }

/* type wall: one word, row after row, in the deck's display face */
#trx .trx-wall { inset: 0; }
#trx .trx-row {
  position: absolute; left: -8vw; white-space: nowrap; margin: 0;
  font: 400 var(--trx-fs, 200px)/.82 var(--f-display, 'League Gothic', Impact, sans-serif);
  text-transform: uppercase; letter-spacing: -.005em; word-spacing: .12em;
  -webkit-text-stroke: var(--trx-line) var(--trx-h, #000);
}

/* the new slide before its entrance: line masks tight, so lowered lines don't peek (studio.css hangs them .26em low) */
html.trx-hold .reveal .slides section.present .sl-mask { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* sad: soft black curtain */
#trx .trx-veil { left: 0; width: 100%; height: 260vh; top: 0; background: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); }

/* ---- inside the clone stage (shadow root) ---- */
.trx-stage { position: absolute; inset: 0; pointer-events: none; }
.trx-stage .trx-piece { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; }
.trx-stage .trx-win { position: absolute; overflow: hidden; }
.trx-stage .slides section { transition: none !important; }
.trx-stage .trx-fill { position: absolute; inset: 0; }
.trx-stage .trx-line { position: absolute; }
.trx-stage svg.trx-svg { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; overflow: visible; }

@media print { #trx { display: none !important; } }