/* home-opening.css - the opening mark, and the bar it builds.

   Page-local on purpose. Only `index.html` opens on a mark standing in the
   middle of the screen, and `assets/css/style.css` carries the shared chrome,
   which is the one surface every page has to agree on. Everything here is
   either a layer that exists on this page alone, or a state class that this
   page's script puts on the document and takes off again the moment the bar is
   assembled.

   Nothing in this file is a resting state. With no script the layer below is
   hidden, `is-arrival` is never set, and the header is exactly what
   `style.css` says it is. */

/* The mark's layer. Fixed over the scene, under the header, and out of the way
   of every pointer. It is authored hidden: `main.js` shows it at the beat the
   scene is live and hides it again the moment the mark has landed in the
   bar. */
.arrival {
  position: fixed;
  z-index: 49;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.arrival.is-armed {
  visibility: visible;
}

/* Laid out at the size it stands at in the middle of the screen and scaled
   down into the bar, so the picture is never drawn above its own resolution.
   The transform origin is the top-left corner throughout: the script computes
   one corner and one scale, and the flight into the bar is then a plain tween
   of the same three numbers.

   The width here is only where it starts. The script sizes the mark against
   the viewport's short side, because a size that carries a 1440 screen
   swallows a 390 one. */
.arrival__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 236px;
  height: auto;
  transform-origin: 0 0;
  overflow: visible;
  will-change: transform;
}

/* The centre mark is the production fill. The SVG mask path is the opening
   mechanic: JavaScript raises its liquid edge through the drawing, then settles
   that edge to the exact production boundary before the mark leaves. */

/* The bar, while it is being built.

   Two hairlines in the header are borders, and a border cannot be drawn on.
   For the length of the opening only, each one is handed to a pseudo-element
   that can be scaled, and the border itself is held transparent. Same pixel,
   same colour, same place - the swap back at the end of the act is invisible.

   The transitions declared in `style.css` are turned off here for the same
   reason: they are for the theme change, and they would smear a value the
   opening timeline is already animating. */
html.is-arrival .brand {
  border-right-color: transparent;
}

html.is-arrival .brand::after {
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  content: "";
  background: var(--nav-divider);
  transform: scaleY(var(--arrival-rule, 0));
  transform-origin: 50% 0;
}

html.is-arrival .site-header__inner::after {
  transform: scaleX(var(--arrival-bar, 0));
  transform-origin: 0 50%;
  transition: none;
}

/* The word is revealed by a wipe rather than a fade: it is being written, not
   turned up. `style.css` gives the lockup a colour and transform transition
   for the theme change; both would fight the wipe. */
html.is-arrival .brand__word,
html.is-arrival .brand__logo {
  transition: none;
}