/* ==========================================================================
   swivcity - splash
   Plain CSS. No build step, no webfont request, no external asset.

   One page, one word, one canvas. The page never scrolls: the field is the
   whole design, so anything that moved it off screen would be a bug.
   ========================================================================== */

:root {
  /* Ground. Same off-black as the studio site, never #000. */
  --bg:        #070b09;

  /* Signals. Amber is the city. Green and red are the runs feeding it. */
  --amber:     #ffb454;
  --green:     #7cfc9a;
  --red:       #ff5a56;

  --ink:       #e2ece6;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* No scroll, either axis. 100% on both elements so the fixed canvas and the
   centering grid have a viewport sized box to resolve against. */
html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* --- the city field -------------------------------------------------------
   Fixed and behind everything. Never intercepts a click or a selection.
   -------------------------------------------------------------------------- */
.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* --- the wordmark ---------------------------------------------------------- */
.splash {
  position: relative;              /* stacking context: keeps the scrim below
                                      the word but above the field */
  z-index: 1;
  min-height: 100dvh;              /* dvh, never vh */
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.splash__inner { position: relative; }

/* A soft pool of ground colour behind the word, fading to nothing, so the
   field keeps running underneath instead of being boxed off by a panel. This
   is what keeps the wordmark legible where a bright pulse passes behind it:
   bare ink over a pulse head measures about 2.2:1, and about 13:1 under this.
   Sized in vmin so the pool scales with the type, which is vw driven. */
.splash__inner::before {
  content: "";
  position: absolute;
  inset: -16vmin -10vmin;
  z-index: -1;
  pointer-events: none;
  /* closest-side, not the default farthest-corner: with farthest-corner the
     gradient only reaches zero alpha out at the corners, so it is still
     partly opaque where it meets the top and side edges and the box outline
     shows up as a straight dark seam across the field. closest-side lands the
     transparent stop on every edge, and the corners beyond it are empty. */
  background: radial-gradient(
    ellipse closest-side at center,
    rgba(7, 11, 9, 0.88) 0%,
    rgba(7, 11, 9, 0.80) 55%,
    rgba(7, 11, 9, 0.44) 78%,
    rgba(7, 11, 9, 0) 100%
  );
}

.mark {
  margin: 0;
  font-size: clamp(2.6rem, 0.9rem + 7.6vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  /* One word, and it stays one word. At the narrowest supported width it
     measures roughly half the viewport, so this can never overflow. */
  white-space: nowrap;
}