/* ── Avera Labs ────────────────────────────────────────────────────────────
   One sky: the mark's aubergine (#433A53) over near-black, with sodium-vapor
   amber for disturbance. The accent means one thing and only one thing —
   something is moving through the field.

   The mark lives in the canvas at full scale. Nothing here competes with it:
   a wordmark, two links, a sentence, a duplex meter, a line of legal.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  --ground:  #0A0810;   /* page ground — near-black with a violet cast */
  --ink:     #E9E4F0;   /* violet-white — primary                      */
  --ink-dim: #8577A0;   /* utility type                                */
  --rule:    rgba(107, 93, 133, .48);
  --accent:  #FFA23A;   /* sodium amber                                */

  --gut:  clamp(18px, 3.4vw, 44px);
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --scrim-a: rgba(10, 8, 16, .84);
  --scrim-b: rgba(10, 8, 16, 0);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* one screen. nothing scrolls. */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* The whole field is the object's space: grab anywhere and turn it. The
   cursor is the entire affordance — no instruction text needed. */
body {
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
body.dragging { cursor: grabbing; }
.chrome a { cursor: pointer; }

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── chrome ─────────────────────────────────────────────────────────────── */

.chrome {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--gut);
  pointer-events: none;          /* the field owns the pointer */
  z-index: 2;
}

.chrome a { pointer-events: auto; }

/* The field runs edge to edge, so the chrome needs its own ground to sit on.
   Two soft scrims, no boxes — the grid still reads as continuous underneath. */
.chrome::before,
.chrome::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 22vh;
  z-index: -1;
  pointer-events: none;
}
.chrome::before {
  top: 0;
  background: linear-gradient(to bottom, var(--ground) 0%, var(--scrim-a) 28%, var(--scrim-b) 100%);
}
.chrome::after {
  bottom: 0;
  background: linear-gradient(to top, var(--ground) 0%, var(--scrim-a) 28%, var(--scrim-b) 100%);
}

.bar {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2.4vw, 30px);
}

.bar--top    { border-bottom: 1px solid var(--rule); padding-bottom: calc(var(--gut) * .48); }
.bar--bottom { border-top:    1px solid var(--rule); padding-top:    calc(var(--gut) * .48); }

/* ── the name, in real type ─────────────────────────────────────────────── */

/* Razor sharp on purpose: the field is where the roughness lives, and the
   contrast between the two is the whole point. */
.wordmark {
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 600;
  letter-spacing: -.014em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s ease;
}
.wordmark span { font-weight: 400; opacity: .68; }
.wordmark:hover, .wordmark:focus-visible { color: var(--accent); }

/* ── utility type ───────────────────────────────────────────────────────── */

.nav a, .legal {
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0;
}

.nav {
  margin-left: auto;
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
}
.nav a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color .3s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--accent); }

.legal {
  margin-left: auto;
  color: var(--ink-dim);
  text-align: right;
}

/* ── stage ──────────────────────────────────────────────────────────────── */

/* The mark occupies the optical centre of the canvas; this sits below it, so
   the stage is bottom-weighted rather than centred. */
.stage {
  display: grid;
  align-content: end;
  justify-items: center;
  text-align: center;
  position: relative;
  padding-bottom: clamp(16px, 5vh, 56px);
}

.stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(760px, 94vw);
  height: min(230px, 32vh);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--scrim-a) 0%, var(--scrim-b) 76%);
}

/* the sentence, spoken */
.say {
  margin: 0;
  max-width: 64ch;
  font-family: var(--mono);
  font-size: clamp(13px, 1.3vw, 17px);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}

.say span {
  display: inline-block;
  opacity: 0;
  transform: translateY(.34em);
  filter: blur(3px);
}

/* Each word arrives in turn. The mark ripples with it — see uVoice in
   avera-field.js, which pulses on the same schedule. */
.say[data-said="1"] span {
  animation: say .58s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: calc(var(--i) * .085s);
}

@keyframes say {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ── the duplex meter ───────────────────────────────────────────────────── */

/* Two traces, mirrored about a common line, running on independent
   frequencies — both channels open at the same time. Drawn in
   avera-field.js off the same envelope that drives the mark. */
.duplex {
  display: block;
  width: min(380px, 62vw);
  height: 34px;
  margin-top: clamp(12px, 2vh, 20px);
  opacity: 0;
  transition: opacity 1s ease .75s;
}
.say[data-said="1"] ~ .duplex { opacity: 1; }

/* ── accessibility ──────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .say span { opacity: 1; transform: none; filter: none; animation: none !important; }
  .duplex { opacity: 1; }
}

/* ── small screens ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .legal  { font-size: 9px; letter-spacing: .06em; }
  .nav    { gap: 18px; }
  .say    { max-width: 26ch; }
  .duplex { width: 68vw; height: 24px; }
  .stage  { padding-bottom: clamp(10px, 3vh, 32px); }
}