/* Landing sequence: black ground, the mark builds, the wordmark slides out of
   it, the lockup flies to its seat in the masthead, and the page is uncovered
   behind it.

   This file and intro.js are a removable layer, on the same terms as motion.*:
   nothing here fires until the inline decision in index.html puts `l42-booting`
   on <html>, and removing that plus these two tags returns the page to a
   straight render. The failsafe in index.html lifts the cover on its own if
   intro.js never runs. */

/* ---- the cover, held from the first paint ---- */
html.l42-booting { background:#06090D; }
html.l42-booting #l42-hero,
html.l42-booting #l42-page { visibility:hidden; }

/* Scroll is held for the whole sequence, and the masthead lockup is held back
   until the flying one lands on top of it, so only one is ever seen. */
html.l42-booting, html.l42-booting body,
html.l42-lifting, html.l42-lifting body { overflow:hidden; }
html.l42-booting .l42-home,
html.l42-lifting .l42-home { opacity:0; }

@media (prefers-reduced-motion: reduce) {
  html.l42-booting, html.l42-lifting { background:#FFFFFF; }
  html.l42-booting #l42-hero, html.l42-booting #l42-page { visibility:visible; }
  html.l42-booting .l42-home, html.l42-lifting .l42-home { opacity:1; }
  #l42-intro { display:none; }
}

/* ---- the overlay ---- */
/* The overlay takes the clicks: the page behind it is not there to be read
   yet, and a click on it is how a reader says they have seen enough. */
#l42-intro { position:fixed; inset:0; z-index:9999;
             --l42i-word:820ms; --l42i-travel:980ms; --l42i-wipe:860ms;
             --l42i-cell:640ms; --l42i-step:74ms; --l42i-shift:0px; }

/* The ground carries a slow accent bloom, and is taken off the page by a soft
   edge that sweeps down over it rather than a flat fade, so the reveal has a
   direction. */
#l42-intro .l42i-scrim {
  position:absolute; inset:0; background:#06090D;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0 20%, #000 48%, #000 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0 20%, #000 48%, #000 100%);
  -webkit-mask-size:100% 200%;  mask-size:100% 200%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:50% 100%; mask-position:50% 100%;
}
#l42-intro .l42i-scrim::after {
  content:''; position:absolute; inset:0; opacity:0;
  background:radial-gradient(78% 62% at 50% 48%, rgba(28,86,196,0.30) 0%, rgba(20,68,158,0.13) 34%, rgba(6,9,13,0) 68%);
  transition:opacity 1500ms cubic-bezier(.22,.7,.2,1);
}
#l42-intro.is-mark .l42i-scrim::after { opacity:1; }
#l42-intro.is-wipe .l42i-scrim {
  -webkit-mask-position:50% -100%; mask-position:50% -100%;
  transition:-webkit-mask-position var(--l42i-wipe) cubic-bezier(.52,0,.24,1),
                     mask-position var(--l42i-wipe) cubic-bezier(.52,0,.24,1);
}

/* ---- the travelling lockup ----
   .l42i-flip is sized and seated on the masthead lockup exactly, and is held
   away from that seat by a transform; releasing the transform is the flight.
   .l42i-shift holds the mark on the centre line while it is alone, then gives
   the centre back to the whole lockup as the wordmark comes out. */
#l42-intro .l42i-flip { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
#l42-intro.is-fly .l42i-flip { transition:transform var(--l42i-travel) cubic-bezier(.62,.02,.16,1); }

#l42-intro .l42i-shift { transform:translateX(var(--l42i-shift)); }
#l42-intro.is-word .l42i-shift { transform:none;
  transition:transform var(--l42i-word) cubic-bezier(.18,.82,.22,1); }

#l42-intro .l42i-shift svg { width:100% !important; height:auto !important;
  filter:drop-shadow(0 0 34px rgba(126,172,255,0.26));
  transition:filter 760ms ease-out; }
#l42-intro.is-fly .l42i-shift svg { filter:drop-shadow(0 0 0 rgba(126,172,255,0)); }

/* ---- the mark builds on the diagonal ---- */
#l42-intro .l42i-cell { opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
#l42-intro.is-mark .l42i-cell {
  animation:l42iCell var(--l42i-cell) cubic-bezier(.2,.82,.24,1) calc(var(--i) * var(--l42i-step)) both;
}
@keyframes l42iCell {
  from { opacity:0; transform:scale(.34) translateY(6px); }
  60%  { opacity:1; }
  to   { opacity:1; transform:none; }
}

/* ---- the wordmark comes out of the mark ----
   The clip is taken on a group pinned to the wordmark's own box by an invisible
   rect, so the letters can travel inside it without dragging the box along. */
#l42-intro .l42i-word { opacity:0; }
#l42-intro.is-word .l42i-word {
  animation:l42iWord var(--l42i-word) cubic-bezier(.16,.86,.22,1) both;
}
@keyframes l42iWord {
  from { opacity:1; clip-path:inset(-20% 100% -20% -2%); }
  to   { opacity:1; clip-path:inset(-20% -2% -20% -2%); }
}
#l42-intro .l42i-wordin { transform:translateX(-26px); }
#l42-intro.is-word .l42i-wordin {
  animation:l42iWordIn var(--l42i-word) cubic-bezier(.16,.86,.22,1) both;
}
@keyframes l42iWordIn { from { transform:translateX(-26px); } to { transform:none; } }

/* the accent edge the letters are drawn out behind */
#l42-intro .l42i-cursor { opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
#l42-intro.is-word .l42i-cursor {
  animation:l42iEdgeX var(--l42i-word) cubic-bezier(.16,.86,.22,1) both,
            l42iEdgeO var(--l42i-word) linear both;
}
@keyframes l42iEdgeX { from { transform:translateX(0) scaleY(.24); } to { transform:translateX(360px) scaleY(1); } }
@keyframes l42iEdgeO { 0% { opacity:0; } 9% { opacity:1; } 74% { opacity:1; } 100% { opacity:0; } }