/* ============================================================
   Holding page

   The logo centred on black, "Coming soon" beneath it, and a
   slow pulse of light. Self-contained: the site's stylesheet is
   not loaded here, so the few values it needs are declared
   below rather than inherited from the design system.
   ============================================================ */

:root {
  color-scheme: dark;
  --page: #08080a;
  --glow: 157, 78, 36;        /* the brand accent, #9d4e24, as a triplet for rgba() */
  /* Light from a rust-coloured source is not rust-coloured: the accent at any
     alpha over black reads as a brown smudge, because it is a dark colour
     (0.13 relative luminance). The core of the glow is therefore a hot tint of
     it, falling off through the accent proper. */
  --glow-hot: 232, 138, 74;
  --breath: 7s;               /* one full pulse; slow enough to read as breathing */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--page); }

.holding {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--page);
  color: #fff;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Nothing here scrolls, and the pulse extends past the logo — without this
     the glow can push a scrollbar into existence on short viewports. */
  overflow: hidden;
}

/* dvh tracks the area actually visible, so mobile browser chrome cannot push
   the logo off centre */
@supports (min-height: 100dvh) {
  .holding { min-height: 100dvh; }
}

.holding-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5vh, 46px);
  /* Fractionally above centre: an optically centred block sits a little high,
     and the glow adds visual weight below the mark. */
  transform: translateY(-4%);
}

.holding-mark {
  position: relative;
  display: grid;
  place-items: center;
}

/* The ambient wash behind the mark. Only opacity and transform animate, both
   of which the compositor handles on its own, so the pulse costs nothing to
   keep running. */
.holding-glow {
  position: absolute;
  /* Tight rather than vast. A wider glow spreads its dimmest range over
     hundreds of pixels, and out there the whole falloff spans about three
     levels of 8-bit brightness — so each step becomes a contour ring on the
     black. Concentrating the same light into a smaller radius keeps the
     gradient in the part of the range where it has steps to work with. */
  width: 135%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Many stops, and then blurred. A wide gradient over near-black bands into
     visible contour rings no matter how many stops it is given — 8-bit colour
     simply runs out of steps — and a blur is what dissolves them. It is a
     static filter, so the layer is rasterised once and only composited after
     that; the pulse still costs nothing per frame. */
  filter: blur(42px);
  background: radial-gradient(
    closest-side,
    rgba(var(--glow-hot), 0.58),
    rgba(var(--glow-hot), 0.34) 18%,
    rgba(var(--glow), 0.19) 34%,
    rgba(var(--glow), 0.11) 50%,
    rgba(var(--glow), 0.05) 66%,
    rgba(var(--glow), 0.02) 78%,
    rgba(var(--glow), 0) 88%
  );
  animation: holdingBreathe var(--breath) ease-in-out infinite;
  pointer-events: none;
}

.holding-logo {
  position: relative;
  display: block;
  width: min(430px, 72vw);
  height: auto;
  /* drop-shadow follows the alpha channel rather than the box, so the light
     comes off the strokes of the mark themselves — which is what makes it read
     as the logo glowing rather than a lamp behind it. */
  animation: holdingLit var(--breath) ease-in-out infinite;
}

@keyframes holdingBreathe {
  0%, 100% { opacity: 0.32; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

@keyframes holdingLit {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(var(--glow-hot), 0.3)); }
  50%      { filter: drop-shadow(0 0 26px rgba(var(--glow-hot), 0.85)); }
}

.holding-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 15px);
  text-align: center;
}

/* Shared by both lines. Letter-spacing is applied to the right of every
   character including the last, so a centred line carries half a space of
   dead weight on one side; the negative margin takes that back. Done here
   rather than with text-indent, which only ever reaches the first line. */
.holding-line,
.holding-soon {
  text-transform: uppercase;
  white-space: nowrap;
}

/* What the company does — the line with something to say, so it leads */
.holding-line {
  font-size: clamp(0.82rem, 1.7vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-right: -0.22em;
  color: rgba(255, 255, 255, 0.82);
}

/* Dimmed, so the two capabilities read as a pair rather than three items */
.holding-sep { color: rgba(255, 255, 255, 0.34); }

/* The status: quieter and smaller, because it is the least interesting thing
   on the page */
.holding-soon {
  font-size: clamp(0.74rem, 1.45vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  color: rgba(255, 255, 255, 0.38);
}

/* Reduced motion asks for less movement, not less design: the pulse stops at
   its brightest rather than the page going dark. */
@media (prefers-reduced-motion: reduce) {
  .holding-glow {
    animation: none;
    opacity: 0.7;
    transform: scale(1);
  }
  .holding-logo {
    animation: none;
    filter: drop-shadow(0 0 18px rgba(var(--glow-hot), 0.6));
  }
}