/* ============================================================
   SPOTLIGHT MAESTRO — the opening reel
   Rendered fly-through, scrubbed by scroll, with live HTML sitting
   in the tablet's screen.
   ============================================================ */

/* The header is sticky, so on the normal page it takes part in layout and
   would push the footage down the page. Float it here instead. */
.nav { position: fixed; left: 0; right: 0; }

.reel {
  position: relative;
  /* Scroll length of the whole move, at roughly one frame every 40px, which
     scrubs smoothly on a trackpad.

     This is TIED TO THE FRAME COUNT and must be changed with it. The frames are
     spread across a fixed fraction of a fixed rail, so dropping frames on their
     own makes the reel play SLOWER over the same scroll rather than shorter.
     Only pulling the rail in turns a cut into a shorter opening.

       frames span   = PLAY_TO * (height - 100vh)      [100vh is the sticky view]
       per frame     = span / (frames - 1)

     Held at 2.77vh per frame throughout:

       110 frames, PLAY_TO 0.84   460vh
        98 frames, PLAY_TO 0.84   420vh   after cutting the dead booth section
        98 frames, PLAY_TO 0.96   380vh   after the fade was brought forward to
                                          overlap the motion, which reclaimed
                                          the frozen gap that used to sit
                                          between the last frame and the fade

     Note the PLAY_TO term: raising it lets the frames use more of the rail, so
     the rail itself can shrink without the reel playing any faster. */
  height: 380vh;
}

.reel-view {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #05070c;
  transition: opacity .35s ease;
}

.reel-view canvas {
  display: block;
  width: 100%;
  height: 100%;

  /* SAFARI. Forces the canvas onto its own compositing layer instead of being
     painted into the sticky parent's.

     Without it, Safari intermittently presents a STALE snapshot of the sticky
     layer while scrolling: measured off a screen recording, the scrollbar
     advanced perfectly monotonically while the frame on screen jumped back
     roughly ten frames again and again, once holding a stale image for two
     thirds of a second. Two interleaved sequences were visible, both
     advancing, about 0.4s apart, which is a compositor presenting an old tile
     rather than anything wrong with the scroll position. Chrome and Firefox
     never showed it.

     translateZ(0) rather than `will-change: transform`: this element is a
     full-viewport canvas and will-change would ask Safari to hold a permanent
     extra buffer that size for the whole page. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ---------- the title in the proscenium ---------- */
/* Screen-centred rather than tracked to the architecture: at the opening frame
   the proscenium IS centred, so it reads as hanging in the arch, and it drifts
   and fades out before the camera has moved far enough for the difference to
   show. */
.reel-title {
  position: absolute;
  /* Sat on the curtain itself, below the swags, rather than riding up into
     the valance and the gilt. */
  left: 50%; top: 58%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.reel-title img {
  width: 150px; height: 150px;
  border-radius: 34px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px rgba(0,0,0,.75),
              0 0 130px rgba(92,153,250,.45);
}
.reel-title .rt-name { line-height: 1; }
/* SPOTLIGHT is tracked so its width matches MAESTRO's exactly, giving the two
   lines a common left and right edge. The figure is not a round number and not
   a taste decision: it falls out of the two font sizes, so it has to be
   recalculated whenever either of them changes.

     width = sum of the letters' advances + (letters - 1) * letter-spacing

   MAESTRO is 7 letters and so has 6 gaps, SPOTLIGHT is 9 and has 8. Solving
   for the tracking that equalises them at 30px against 46px/.22em gives .518em.
   Measure rather than derive: nudge the value and check with

     [...document.querySelectorAll('.rt-name b,.rt-name i')]

   summing measureText per character, because Inter's advances do not scale
   perfectly linearly across sizes and a constant fitted at one size is a couple
   of pixels out at another.

   text-indent must always equal the letter-spacing. Letter-spacing adds a
   trailing space after the LAST letter too, which drags a centred line half a
   space left, and by different amounts on lines tracked differently. Indenting
   by the same amount cancels it. */
.reel-title .rt-name b {
  display: block;
  font-size: 30px; font-weight: 500; letter-spacing: .518em;
  color: #f2f6ff;
  margin-bottom: 12px;
  text-indent: .518em;
  text-shadow: 0 2px 30px rgba(0,0,0,.9);
}
.reel-title .rt-name i {
  display: block;
  font-style: normal;
  font-size: 46px; font-weight: 800; letter-spacing: .22em;
  color: #fff;
  text-indent: .22em;
  text-shadow: 0 2px 40px rgba(0,0,0,.95), 0 0 70px rgba(92,153,250,.6);
}
.reel-title .rt-sub {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(226,236,252,.82);
  text-shadow: 0 2px 20px rgba(0,0,0,.95);
}

/* The tablet screen is painted directly into the canvas by reel.js, not laid
   over it as a transformed element, so there is no CSS for it here. See the
   note above paintScreen() for why. */

/* The end of the reel: the frame fades to BLACK rather than to the page's blue.
   The booth footage is nearly black by this point, so black is the shorter
   journey and the fade reads as the lights going out; the page then scrolls up
   out of the dark, which is also where its own background is darkest. Fading to
   blue meant lifting a black picture to a lighter colour and then dropping it
   again, which drew attention to itself. */
.reel-dark {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: #000000;
}

/* Loading. The sequence is a few megabytes, so it is worth showing that
   something is happening rather than a black hole. */
.reel-load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #05070c;
  transition: opacity .6s ease, visibility .6s;
  z-index: 3;
}
.reel-load.done { opacity: 0; visibility: hidden; }
.reel-load img { width: 74px; height: 74px; border-radius: 18px; }
.reel-load .track {
  width: 190px; height: 2px;
  background: rgba(150,180,225,.18);
  overflow: hidden;
}
.reel-load .track i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--mid), var(--edge));
  transition: width .2s ease;
}
.reel-load span {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint);
}

.reel-skip {
  position: absolute;
  right: 26px; bottom: 26px;
  z-index: 4;
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid rgba(150,180,225,.28);
  background: rgba(4,7,15,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.reel-skip:hover { color: #fff; border-color: rgba(214,232,255,.55); }

.reel-cue {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(230,240,255,.55);
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.reel-cue i {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.8), transparent);
  animation: reelCue 2.4s ease-in-out infinite;
}
@keyframes reelCue {
  0%,100% { opacity: .25; transform: scaleY(.6); transform-origin: top; }
  50%     { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

@media (max-width: 760px) {
  .reel { height: 320vh; }   /* same 2.16vh per frame as the old 380vh over 110 */
  .reel-title img { width: 104px; height: 104px; }
  /* Smaller type, so the tracking that justifies the two lines changes with it:
     MAESTRO measures 205.3px at 32px/.22em, giving .572em for SPOTLIGHT. */
  .reel-title .rt-name b { font-size: 20px; letter-spacing: .572em; text-indent: .572em; }
  .reel-title .rt-name i { font-size: 32px; }
}

/* Anyone who asked for less movement never loads the sequence at all: reel.js
   removes the whole section and the page opens on the hero. */
@media (prefers-reduced-motion: reduce) {
  .reel { display: none; }
}