/* NX Tech November — reset, page ground, type scale, the glow field. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Clean white, no page tint. The statement spheres still carry their own
   light; everything between them is white. */
body.page-white { background: #FFFFFF; }
body.page-white .section { background: #FFFFFF; }
body.page-white .section.dark { background: var(--ink); }
body.page-white .statement {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, canvas, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--nx-mid);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Layout shell ───────────────────────────────────────────────── */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--section); position: relative; }

/* ── Type ───────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-wrap: balance;
}

.display { font-size: var(--display); }
.head    { font-size: var(--head); line-height: 1.06; letter-spacing: -.025em; }
.sub     { font-size: var(--sub); line-height: 1.22; letter-spacing: -.02em; }

/* The one typographic idea: an emphasis word at 600. A trailing clause used to
   fade to a lighter colour as well; it does not any more. Two colours inside
   one sentence read as two thoughts, so weight carries the emphasis and the
   line keeps a single colour throughout. */
.em    { font-weight: 600; }
.fade  { color: inherit; }

/* Every heading is brand blue, whatever its size or section. Two values, not
   one: deep blue holds 4.9:1 on the light ground but muddies to 3.4:1 on
   navy, where Nx Blue reads at 7.8:1. One hex everywhere would mean an
   unreadable heading in every dark section. */
h1, h2, h3, h4 { color: var(--heading); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--nx); }

p { margin: 0; }
.lede { font-size: 1.1875rem; line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }
.copy { color: var(--ink-soft); max-width: 60ch; }

.label {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-deep);
}
.dark .label { color: var(--nx); }

.measure { max-width: 34ch; }

/* ── The glow field ─────────────────────────────────────────────── */
/* One soft Nx Blue light source per section, sitting behind content.
   This replaces the reference's orange. */

.glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.glow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(66, 181, 247, .34) 0%,
    rgba(66, 181, 247, .16) 34%,
    rgba(66, 181, 247, .05) 56%,
    transparent 72%);
  filter: blur(14px);
}

/* The bloom behind a statement is a sphere: a tall egg the headline sits
   inside, with the light pooling in lobes within it rather than drifting
   loose across the page. The lobes are clipped to the egg by its own radius,
   which is what gives the shape an edge; the mask then softens that edge so
   it fades out rather than ending on a line. */
.glow--bloom::before { content: none; }

/* Two masses, not one, and not centred. The reference was measured rather
   than copied by eye: on a white page, a tall mass on the left at x 0.19
   running the full height, and a smaller one at the lower right at x 0.79,
   y 0.84. An earlier attempt put a single wide ellipse in the middle, which
   is not what is there. */
.bloom__orb {
  position: absolute;
  border-radius: 50%;
  translate: -50% -50%;
  filter: blur(54px);
}
/* Measured off the reference: the left mass centres at x 0.22 and runs the
   full height; the right one centres at x 0.73, y 0.78 and covers the lower
   half. Its intensity is matched too: the reference peaks at 183 of 255 on
   its red-minus-blue channel, and anything much softer is the washed out
   version of this that came before. */
/* Density comes from going deeper in the core, not from more alpha on a pale
   blue: raising the opacity of Nx Blue only makes more pale blue. Each mass
   is a deep blue heart inside an Nx Blue body. */
/* Measured off the reference row by row, not placed by eye.
   Above the headline the left mass runs from x 0.12 to 0.46 and bottoms at
   x 0.30; below it, from x 0.05 to 0.38 bottoming at x 0.21. So it is a tall
   mass leaning slightly left as it falls, behind the headline the whole way
   down. That is what makes the pair read as a sphere, and moving it into the
   margin, as an earlier pass did to protect a lighter heading colour, is
   exactly what lost the shape. The heading went darker instead. */
.bloom__orb--a {
  left: 25%;
  top: 43%;
  width: 37%;
  height: 112%;
  background:
    radial-gradient(closest-side, rgba(26, 111, 174, .50), transparent 48%),
    radial-gradient(closest-side,
      rgba(46, 155, 224, .92), rgba(66, 181, 247, .58) 52%, transparent 80%);
}
/* Below the headline it bottoms out at x 0.78, and darker than the left. */
.bloom__orb--b {
  left: 77%;
  top: 80%;
  width: 36%;
  height: 62%;
  background:
    radial-gradient(closest-side, rgba(26, 111, 174, .52), transparent 46%),
    radial-gradient(closest-side,
      rgba(46, 155, 224, .95), rgba(66, 181, 247, .52) 54%, transparent 82%);
}

/* The field that ties the two masses together. Without it they read as two
   separate glows with white between them; with it the pair reads as one
   sphere the headline sits inside, which is what the reference does and what
   every earlier attempt here was missing. It goes first in the markup so it
   sits behind both. */
.bloom__orb--field {
  left: 46%;
  top: 50%;
  width: 80%;
  height: 114%;
  filter: blur(72px);
  background: radial-gradient(closest-side,
    rgba(66, 181, 247, .34), rgba(66, 181, 247, .17) 58%, transparent 84%);
}

@media (max-width: 860px) {
  .bloom__orb--a { left: 28%; width: 56%; }
  .bloom__orb--b { left: 74%; width: 56%; top: 82%; }
  .bloom__orb--field { width: 112%; }
}

.glow--top::before    { top: 8%; }
.glow--bottom::before { top: 92%; }
.glow--left::before   { left: 16%; }
.glow--right::before  { left: 84%; }

.section > .shell { position: relative; z-index: 1; }

/* ── Dark break ─────────────────────────────────────────────────── */

.dark {
  background: var(--ink);
  color: var(--on-dark);
}
.dark .copy, .dark .lede { color: var(--on-dark-soft); }
/* Our story is white, not the softened white the other dark sections use, and
   its trailing clause is the same white as the rest. */
#story .copy, #story .lede { color: var(--on-dark); }
.dark a:hover { color: var(--nx); }

/* ── Scroll progress ────────────────────────────────────────────── */

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  background: var(--nx);
  z-index: 90;
}

/* ── Reveal on scroll ───────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--travel) var(--ease), transform var(--travel) var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--ink); color: var(--on-dark);
  padding: .7rem 1.1rem; border-radius: var(--pill);
}
.skip:focus { top: 1rem; }