/* ============================================================
   SILICA WORKS - page loader, the column
   ------------------------------------------------------------
   The loader for every page that is NOT index.html.

   A narrow accent column stands at the centre of a paper ground
   with the lockup in ink on it. When the page is ready the column
   widens past the viewport, so the last thing seen is a full
   accent field, and the plate lifts off that onto the page.

   WHY THIS PAGE GETS A DIFFERENT LOADER FROM THE INDEX. The
   curtain (css/loader.css) ends by flying its mark into the nav
   bar's empty slot - a handoff that can only happen once, on the
   first page of a visit, because after that the bar already has
   its logo and there is no gap for anything to arrive in. Running
   it again on every page would be a mark flying down to fill a
   seat that was never vacated.

   The column has no such claim on the bar. It is a shorter, more
   ordinary arrival: colour, lockup, flash, page.

   AND IT IS THE OTHER HALF OF THE NAVIGATION. Leaving the index
   closes the curtain over it (js/page-exit.js); arriving here
   opens the column out of the centre. Both are the accent at full
   bleed, so the colour does not break across the page load and
   the two moves read as one - the field the curtain closed to is
   the field this column widens out of.

   That is also why the column ARRIVES ALREADY FULL when the
   referrer closed a curtain over it. See the note on the plate.
   ============================================================ */

/* ------------------------------------------------------------
   The plate
   ------------------------------------------------------------
   Paper, unlike the curtain's transparent plate. Here the plate
   IS the ground - the column stands on it - so it has to carry a
   colour, and paper is the page's own ground so the lift lands on
   no change at all.
   ------------------------------------------------------------ */
.sw-col {
  position: fixed;
  inset: 0;
  /* Clears the nav bar (1000) and the cursor layer, which sits at
     9999 in css/cursor.css and would otherwise draw its label over
     the plate - equal z-index is decided by source order and the
     cursor comes later in the body. */
  z-index: 10000;
  background: var(--sw-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  /* A cover, not a control: without this a click landing before
     the lift reaches the page underneath. */
  pointer-events: auto;
  overflow: hidden;
  /* The wordmark's size, shared with the column so the column can
     be sized to hold it - see .sw-col-field. */
  --sw-col-fs: clamp(1.9rem, min(3.9vw, 6.8vh), 3.8rem);
}

/* Set by the script once the lift finishes. display:none rather
   than a removal so the markup stays inspectable. */
.sw-col--done {
  display: none;
}

/* ------------------------------------------------------------
   The column
   ------------------------------------------------------------
   34vw at rest, standing full height at the centre. The script
   scales it out from nothing and later widens it past the
   viewport.

   scaleX from a 50% origin rather than an animated width: a
   transform is composited, a width is a layout change on every
   frame, and the lockup sitting on top of it must not be relaid
   out as the colour grows behind it.

   The start state is in CSS so the column is at zero width on the
   first paint. Like the curtain's fields it uses the `translate`
   and `scale` properties rather than `transform`, because GSAP
   composes its own values into `transform` and would otherwise
   treat whatever is already there as a base to add to - see the
   long note in css/loader.css, which is the same trap.
   ------------------------------------------------------------ */
.sw-col-field {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  /* 34vw, but never narrower than the name plus a margin either
     side. On a phone 34vw is ~130px against a ~205px name, so the
     name overhung the column onto the paper - the one place the
     lockup did not sit on its ground. The name is about 6.8 of its
     own font-size wide; 3rem is the margin. On a desktop 34vw is
     the wider of the two and nothing changes. The exit's scaleX(4)
     still clears the viewport from either width. */
  width: max(34vw, calc(var(--sw-col-fs) * 6.8 + 3rem));
  background: var(--sw-accent);
  translate: -50% 0;
  scale: 0 1;
  will-change: transform;
}

/* ARRIVING FROM A CLOSED CURTAIN.
   ------------------------------------------------------------
   Set by js/loader-column.js before the first paint when the
   previous page closed its curtain on the way out. The column
   starts at full bleed rather than at zero, so the accent is
   already edge to edge as this page paints - continuous with the
   field the last page left on screen - and the sequence begins by
   drawing back to the column rather than growing out of nothing.

   Without it the navigation flashes: the curtain hands over a
   solid accent screen and this page paints paper with a hairline
   of colour at the middle of it. */
html.sw-col-handoff-pending .sw-col-field {
  scale: 4 1;
}

/* ------------------------------------------------------------
   The lockup
   ------------------------------------------------------------
   Mark over wordmark, both centred, over the column. Relative so
   it paints above the absolutely-positioned field beside it.
   ------------------------------------------------------------ */
.sw-col-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.2vh, 1.6rem);
  position: relative;
}

/* Ink, which is what reads on the accent - the same pairing the
   curtain's lockup uses and the one css/styles.css states the
   accent is for. The green cut would be the column's own colour
   on itself. */
.sw-col-mark {
  color: var(--sw-ink);
  height: clamp(3rem, min(7.2vh, 13vw), 4.75rem);
  width: auto;
  display: block;
}

/* THE WORDMARK IS THE CURTAIN'S, value for value.
   ------------------------------------------------------------
   Söhne Extrabold caps at the titles' -0.045em and 0.8 leading,
   and the same size - see
   the wordmark notes in css/loader.css. Every page of the site
   opens on the same lockup, whichever cover it arrives under; only
   the ground the lockup sits on differs. */
.sw-col-word {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-size: var(--sw-col-fs);
  line-height: 0.8;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--sw-ink);
  white-space: nowrap;
}

.sw-col-layer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  white-space: nowrap;
  /* The word space, as a gap: a flex row discards whitespace-only
     text nodes, so the space the script keeps inside the first
     mask is for whatever reads the markup, not for the eye. */
  gap: 0.24em;
  /* Negative tracking hangs the last letter's ink past its box;
     this puts it back so the line centres under the mark. */
  padding-right: 0.045em;
}

/* One mask per word, one moving span per letter - built by the
   script. Vertical clip only: the letters gather in from the sides
   as they rise, so the sides must stay open. The top inset reaches
   above the line box because at 0.8 leading the caps overshoot it. */
.sw-col-word-mask {
  display: block;
  clip-path: inset(-0.14em -100vw -0.04em -100vw);
}

.sw-col-char {
  display: inline-block;
  white-space: pre;
  /* Pivots on the baseline, so the lean tips each cap like type on
     a slope rather than shearing it about its middle. */
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Nothing in the lockup paints before the script has placed it.
   Between the first paint and GSAP's first write the lockup is
   laid out at its resting appearance, so without this the mark
   and the shadow flash at full strength and then vanish as their
   starting values are set. opacity rather than visibility,
   because the boxes still have to be laid out. */
html.sw-col-loading .sw-col-mark-solid,
html.sw-col-loading .sw-col-mark-shade,
html.sw-col-loading .sw-col-layer {
  opacity: 0;
}

/* ------------------------------------------------------------
   No-JS
   ------------------------------------------------------------
   The plate is inert markup without a script to lift it, so with
   scripting off it would sit over the page forever. Hiding it up
   front and showing it only once something has said it will be
   cleared means a reader with JS off gets the page directly.

   .sw-col-loading is set by an inline script in the head, before
   the first paint. js/loader-column.js removes it at the end.
   ------------------------------------------------------------ */
.sw-col {
  display: none;
}

html.sw-col-loading .sw-col {
  display: flex;
}

/* Motion off: the plate still covers the load, but nothing
   grows. The script shortens it to a plain fade, so the column is
   placed at full bleed and the lockup is simply present. */
@media (prefers-reduced-motion: reduce) {
  .sw-col-field {
    scale: 4 1;
  }

  .sw-col-char {
    transform: none !important;
    opacity: 1 !important;
  }

  html.sw-col-loading .sw-col-mark-solid,
  html.sw-col-loading .sw-col-layer {
    opacity: 1;
  }

  html.sw-col-loading .sw-col-mark-shade {
    opacity: 0.22;
  }
}