/*
  VIREO v5 — "Murmuration".

  The page has exactly one graphic: a flock. It is never cut, never swapped and
  never scrolls away — it only changes what it is doing. Everything here is
  built to stay out of its way: the type is the layout, there are no cards, no
  panels, no filled surfaces anywhere over the sky.

  Layering rule: every fixed layer has a POSITIVE z-index and an explicit place
  in the stack. No negative z anywhere.
      poster 0 · canvas 1 · scrim 2 · content 3 · nav 10 · progress 20 · boot 30

  Colour: the scene reads its palette out of these variables (bird tints,
  ground, accents), so a theme is defined in one place — here. The sky ramps
  themselves live in flock.js, because they are a seven-step arc over scroll
  rather than a static value.
*/

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  --bg: #05060a;
  --ink: #efeadd;
  --ink-2: #a8a595;
  --ink-3: #74736a;
  --olive: #a8af62;
  --olive-soft: #c6cb8f;
  --gold: #d8c68a;
  --line: rgba(239, 234, 221, 0.14);
  --line-2: rgba(239, 234, 221, 0.26);
  --on-olive: #14150e;

  /* Bird tints, read by flock.js. dim = the body in shadow, lit = a bird
     turned into the light, hot = the specular flash off a flat wing. */
  --bird-dim: #171a19;
  --bird-lit: #b9bd93;
  --bird-hot: #f2e7c0;

  /* How hard the copy is protected from the sky behind it. */
  --scrim: 0.62;

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 64px);
  --nav-h: 76px;

  /* Long, physical, expensive. Nothing bouncy anywhere on this page. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);
  --t-1: 240ms;
  --t-2: 520ms;
  --t-3: 900ms;
}

[data-theme='light'] {
  --bg: #e8e6dc;
  --ink: #23241c;
  --ink-2: #55564a;
  --ink-3: #82826f;
  --olive: #6f7639;
  --olive-soft: #8d9450;
  --gold: #9a7d3c;
  --line: rgba(35, 36, 28, 0.16);
  --line-2: rgba(35, 36, 28, 0.3);
  --on-olive: #f7f4e9;

  /* Daylight inverts the flock: birds read as ink against a bright sky. */
  --bird-dim: #2b2e24;
  --bird-lit: #5c6140;
  --bird-hot: #8f9558;

  --scrim: 0.5;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--t-3) var(--ease), color var(--t-3) var(--ease);
}

h1, h2 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 4px;
  border-radius: 4px;
}

.skip {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 40;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--on-olive);
  font-weight: 500;
  transition: top var(--t-1) var(--ease);
}
.skip:focus { top: 16px; }

/* ── Stage layers ────────────────────────────────────────────────── */
/* The poster is what a missing GPU, a blocked CDN or reduced-motion leaves on
   screen: the same idea in static form — a dawn sky and a flock frozen
   mid-turn. ui.js draws the birds into it. */
.poster {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 74% at 22% 96%, #2a1c11 0%, rgba(42, 28, 17, 0) 62%),
    linear-gradient(to top, #191d1c 0%, #0a0c12 46%, #05060a 100%);
  transition: opacity var(--t-3) var(--ease);
}
[data-theme='light'] .poster {
  background:
    radial-gradient(120% 74% at 22% 96%, #f7e3c8 0%, rgba(247, 227, 200, 0) 62%),
    linear-gradient(to top, #eae7db 0%, #d9dfe4 52%, #c6d3e0 100%);
}
/* WebGPU took over — the poster steps aside. */
[data-scene='ready'] .poster { opacity: 0; }

.poster__sun {
  position: absolute;
  left: 24%;
  bottom: 6%;
  width: min(46vmin, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 177, 94, 0.5) 0%, rgba(255, 177, 94, 0.12) 34%, transparent 70%);
}
.poster__flock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--bird-lit);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.85;
}
/* The poster has one movement and one only — the whole flock drifting, far
   too slowly to read as an animation. */
.poster__flock g {
  animation: drift 34s var(--ease-io) infinite alternate;
}
@keyframes drift {
  from { transform: translate(-16px, 8px); }
  to { transform: translate(18px, -12px); }
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms var(--ease);
}
.stage.is-ready { opacity: 1; }
.stage canvas { display: block; width: 100%; height: 100%; }

/* A sky is a bright, busy backdrop for 17px type. The scrim is the smallest
   thing that fixes it: darkness pooled at the edges where the copy sits,
   nothing at all through the middle where the flock performs. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(3, 4, 8, var(--scrim)) 0%, rgba(3, 4, 8, 0) 42%),
    linear-gradient(to left, rgba(3, 4, 8, var(--scrim)) 0%, rgba(3, 4, 8, 0) 42%),
    linear-gradient(to top, rgba(3, 4, 8, 0.5) 0%, rgba(3, 4, 8, 0) 26%);
}
[data-theme='light'] .scrim {
  background:
    linear-gradient(to right, rgba(240, 238, 230, var(--scrim)) 0%, rgba(240, 238, 230, 0) 42%),
    linear-gradient(to left, rgba(240, 238, 230, var(--scrim)) 0%, rgba(240, 238, 230, 0) 42%),
    linear-gradient(to top, rgba(240, 238, 230, 0.55) 0%, rgba(240, 238, 230, 0) 26%);
}

/* ── Boot / loading ──────────────────────────────────────────────── */
.boot {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  background: var(--bg);
  transition: opacity var(--t-3) var(--ease), visibility var(--t-3);
}
.boot.is-done { opacity: 0; visibility: hidden; }
.boot__mark { width: 34px; color: var(--olive); }
.boot__mark svg { width: 100%; height: auto; display: block; }
.boot__bar {
  display: block;
  width: 168px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.boot__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--olive);
  transition: width 420ms var(--ease);
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  height: 1px;
  width: 0;
  background: var(--olive);
  transition: width 100ms linear;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--on-olive);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
.cta:hover { background: var(--olive-soft); transform: translateY(-1px); }
.cta--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }

.ghost {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 6px;
  font-size: 15px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.ghost:hover { color: var(--ink); border-color: var(--olive); }

/* ── Navigation ──────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  padding: 0 var(--gut);
  border-bottom: 1px solid transparent;
  transition: background var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--line);
}
.nav__brand { font-weight: 700; font-size: 17px; letter-spacing: 0.34em; }
.nav__links {
  display: flex;
  gap: clamp(14px, 2.6vw, 34px);
  margin-left: auto;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
}
.nav__links a { transition: color var(--t-1) var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__side { display: flex; align-items: center; gap: 12px; }

/* Language switch. Two mirrors of the same page (/ = uk, /en = en), so this
   is a pair of links rather than a toggle: the visitor should see which
   language they are in without clicking. Mono, like the other readouts. */
.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.lang a { color: var(--ink-3); transition: color var(--t-1) var(--ease); }
.lang a:hover { color: var(--ink); }
.lang a[aria-current] { color: var(--ink); }
.lang span { opacity: 0.5; }

.theme {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.theme:hover { color: var(--ink); border-color: var(--line-2); }
.theme svg { width: 17px; height: 17px; }
.theme__moon { display: none; }
[data-theme='light'] .theme__sun { display: none; }
[data-theme='light'] .theme__moon { display: block; }

/* ── Sections ────────────────────────────────────────────────────── */
main { position: relative; z-index: 3; }

.scene-section {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--nav-h) + 8vh) var(--gut) 12vh;
}
.scene-section.center { justify-items: center; text-align: center; }
/* Room above the copy for the mark to land in. */
.scene-section.final { align-content: center; padding-top: calc(var(--nav-h) + 30vh); }
.hero { padding-bottom: 16vh; }

.hold { max-width: 46ch; }
.hold--left { margin-right: auto; }
.hold--right { margin-left: auto; text-align: right; }
.hold--center { max-width: 24ch; }
.hold--wide { max-width: 34ch; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hold--right .eyebrow { justify-content: flex-end; }
.hold--center .eyebrow { justify-content: center; }
.eyebrow i { font-style: normal; color: var(--olive); }

/* The type IS the layout. clamp() carries it from a 375px phone to a 4K
   display without a single breakpoint in between. */
.display {
  margin-top: clamp(20px, 3vw, 34px);
  font-size: clamp(2.9rem, 7.4vw, 8rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-shadow: 0 2px 40px rgba(3, 4, 8, 0.45);
}
[data-theme='light'] .display { text-shadow: 0 2px 40px rgba(240, 238, 230, 0.6); }
.display span { display: block; }
.display--md { font-size: clamp(2.6rem, 7.2vw, 7rem); }
.display--final { font-size: clamp(2rem, 4.4vw, 3.9rem); line-height: 1.04; }

.lede {
  margin-top: clamp(20px, 2.6vw, 32px);
  max-width: 42ch;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 300;
  color: var(--ink-2);
}
.hold--right .lede { margin-left: auto; }
.hold--center .lede { margin-inline: auto; }

.acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px, 4vw, 48px); }
.acts--center { justify-content: center; }

.cue {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  translate: -50% 0;
  width: 1px;
  height: 56px;
  background: var(--line-2);
  overflow: hidden;
}
.cue i {
  display: block;
  width: 100%;
  height: 18px;
  background: var(--olive);
  animation: cue 2.6s var(--ease-io) infinite;
}
@keyframes cue {
  0% { transform: translateY(-20px); }
  100% { transform: translateY(56px); }
}

/* ── Readouts: numbers set against the sky, never in cards ───────── */
.readouts {
  position: absolute;
  top: 50%;
  right: var(--gut);
  translate: 0 -50%;
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  text-align: right;
}
.readouts--nutrition { top: 44%; }
.readouts--training { right: auto; left: var(--gut); text-align: left; top: 56%; }
.readouts--running { top: 58%; }
.readouts li {
  display: grid;
  gap: 5px;
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.readouts--training li { padding: 0 0 0 16px; border-right: 0; border-left: 1px solid var(--line); }
.readouts b {
  font: 400 10.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.readouts span {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Instrument (progress section) ───────────────────────────────── */
.instrument {
  position: absolute;
  right: var(--gut);
  bottom: 14vh;
  width: min(440px, 42vw);
  display: grid;
  gap: 0;
}
.instrument__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.instrument__row:last-child { border-bottom: 1px solid var(--line); }
.instrument b {
  font: 400 10.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.instrument .bar { display: block; height: 1px; background: var(--line); }
.instrument .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--olive);
  transition: width 1400ms var(--ease);
}
.instrument.is-in .bar i { width: calc(var(--v) * 100%); }
.instrument .val {
  font: 300 22px/1 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.instrument em { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* ── Footer ──────────────────────────────────────────────────────── */
.foot {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  padding: 40px var(--gut);
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.foot > span:first-child { font-weight: 700; letter-spacing: 0.3em; color: var(--ink-2); }
.foot nav { display: flex; gap: 24px; margin-left: auto; }
.foot a:hover { color: var(--ink); }
.foot__meta { width: 100%; }

/* ── Reveal ──────────────────────────────────────────────────────── */
[data-in] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
}
[data-in].is-in { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .readouts {
    position: static;
    translate: none;
    margin-top: clamp(34px, 6vw, 56px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }
  .readouts li,
  .readouts--training li {
    padding: 0 0 0 14px;
    border-left: 1px solid var(--line);
    border-right: 0;
  }
  .instrument { position: static; width: 100%; margin-top: 8vh; }
  .hold--right { margin-left: 0; text-align: left; }
  .hold--right .eyebrow { justify-content: flex-start; }
  .hold--right .lede { margin-left: 0; }
  .scene-section { align-content: center; }
}

@media (max-width: 760px) {
  /* Copy at the top, flock underneath: on a phone they cannot share the
     middle of the screen. */
  .scene-section { align-content: start; padding-top: calc(var(--nav-h) + 10vh); }
  .scene-section.center { align-content: start; }
  .nav__links { display: none; }
  .nav__side { margin-left: auto; gap: 10px; }
  .nav__side .cta--sm { padding: 0 14px; font-size: 13px; }
  .display { font-size: clamp(2.7rem, 13vw, 4.6rem); }
  .display--md { font-size: clamp(2.3rem, 11vw, 4rem); }
  .instrument__row { grid-template-columns: 1fr auto auto; }
  .instrument .bar { display: none; }
  /* The sky is behind the copy on a phone, not beside it. */
  .scrim {
    background: linear-gradient(to bottom, rgba(3, 4, 8, 0.8) 0%, rgba(3, 4, 8, 0.2) 46%, rgba(3, 4, 8, 0.55) 100%);
  }
  [data-theme='light'] .scrim {
    background: linear-gradient(to bottom, rgba(240, 238, 230, 0.85) 0%, rgba(240, 238, 230, 0.25) 46%, rgba(240, 238, 230, 0.6) 100%);
  }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-in] { opacity: 1; transform: none; }
  .instrument .bar i { width: calc(var(--v) * 100%); }
}