/* Reel */

.reel {
  display: none;
}

html.is-reel .reel {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-paper);
  opacity: 1;
  transition: opacity 600ms;
}

/* The overlay goes straight from display: none, which has no value to
   transition from. This supplies one so the fade in matches the fade out. */

@starting-style {
  html.is-reel .reel {
    opacity: 0;
  }
}

html.is-reel .reel video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html.is-reel-fading .reel {
  opacity: 0;
  pointer-events: none;
}

/* Replay keeps the logo reachable, so it has to clear the overlay. */

html.is-reel .site-header {
  z-index: 101;
}

/* Intro */

html.is-intro {
  overflow: hidden;
}

/* The page is laid out and scrolled to its deep link before the overlay
   exists, and the overlay then fades in over 600ms rather than appearing
   outright -- so the section under it would show through twice over. Hiding
   the page keeps the bare body behind the reel, which is the same grey the
   overlay is. Layout is untouched, so the fragment scroll still lands where
   it should. */

html.is-intro main {
  visibility: hidden;
}

html.is-intro-done main {
  visibility: visible;
}

html.is-intro-done {
  overflow: visible;
}

/* Corner entrance

   The animation is stacked on the logo rather than put beside it, in a box
   45% larger and centred on the same point, so the mark can grow past the
   logo's edges and still land on it. The two cross-fade at the end, which is
   why both carry the same transition and why the animation is filtered the
   way the logo is -- it goes through the header's difference blend either
   way, and matching the treatment keeps the fade from crossing a colour
   shift. */

.site-logo {
  position: relative;
}

.site-logo__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 145%;
  height: 145%;
  /* The reset caps every video at `max-width: 100%`, which here is the logo's
     own width -- leaving the box 45% taller but no wider. */
  max-width: none;
  translate: -50% -50%;
  opacity: 0;
  /* The clip is exported the way the full-screen reel is -- opaque, on the
     page's own grey -- because it has no alpha channel to hide behind. Invert
     alone leaves that grey at #121212, and the header's difference blend
     turns anything non-black into a visible square. The contrast stretch
     pulls it the rest of the way to black, which the blend passes through
     untouched, while the mark clamps to white and comes out of the blend at
     #121212 -- the same value the logo img lands on, so the cross-fade does
     not cross a colour shift. Tuned to --color-paper: if the page grey
     changes, c = 0.5 / (0.5 - (255 - grey) / 255). */
  filter: invert(1) contrast(1.1644);
  /* The logo underneath is the link; the animation is never the target. */
  pointer-events: none;
}

.site-logo img,
.site-logo__video {
  transition: opacity 600ms;
}

/* Arriving is a cut, not a fade. The header sits above the overlay, so the
   corner is already in view while the reel lifts -- fading the clip up would
   spend its opening frames on the fade. Only leaving this state animates,
   which is the cross-fade into the logo. */

html.is-logo-reel .site-logo img,
html.is-logo-reel .site-logo__video {
  transition: none;
}

/* `is-intro` is never taken off the root, so on its own it only says the
   intro ran at some point this session -- both classes together are what
   separate a reel still playing from one that has handed over. While the
   full-screen reel is up, neither the logo nor its animation is shown. */

html.is-intro:not(.is-intro-done) .site-logo img,
html.is-intro:not(.is-intro-done) .site-logo__video {
  opacity: 0;
}

/* Handed over: the animation is playing in the corner and the logo waits
   underneath it. Dropping the class is what starts the cross-fade. */

html.is-logo-reel .site-logo__video {
  opacity: 1;
}

html.is-logo-reel .site-logo img {
  opacity: 0;
}