/* ============================================================
   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%;

  /* Own compositing layer, so scrolling does not repaint this through the
     sticky parent. Kept for smoothness only.

     It was added while chasing a Safari bug where the reel jumped back about
     ten frames at a time, on the theory that the sticky layer was being
     presented stale. THAT DIAGNOSIS WAS WRONG. The real cause was HTTP caching:
     the frames had been renumbered in place while keeping their modification
     times, so Safari revalidated, got 304, and painted the pre-cut pictures.
     See the REV note in reel.js, which is the actual fix.

     translateZ(0) rather than `will-change: transform`: this is a full-viewport
     canvas, and will-change would ask for a permanent extra buffer that size
     for the whole life of the 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; }
}