/* ============================================================
   ASCO — shared design system for the reading areas (02, 03).

   The bookend areas (01 launch, 04 agent) are near-wordless and
   cinematic. These carry the actual copy, so they run a second
   register: same dark ground, same signal blue, same mono labels
   and hairlines — but text-first, high contrast, and the
   decoration is pushed behind the content instead of under it.
   ============================================================ */
:root {
  --bg: #050607;
  --ink: #f2f1ee;          /* headings */
  --body: #c9ced6;         /* body copy — deliberately brighter than --muted */
  --muted: #9aa0a8;
  --ghost: #5c6168;
  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.05);
  --panel: rgba(255, 255, 255, 0.022);
  --signal: #0b5fff;
  --bright: #6fa3ff;
  --display: "Schibsted Grotesk", system-ui, sans-serif;   /* the ASCO logo face */
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(22px, 6vw, 96px);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.pixfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* content sits above the field, and dims it locally so copy stays readable */
.shell { position: relative; z-index: 1; }
.shell::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, rgba(5, 6, 7, 0.5), rgba(5, 6, 7, 0.86) 70%);
}

/* ---------- top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  padding: 18px var(--pad);
  background: linear-gradient(180deg, rgba(5, 6, 7, 0.9), transparent);
}
.wordmark { display: flex; align-items: center; gap: 9px; font: 700 16px/1 var(--mono); letter-spacing: 0.2em; color: var(--ink); }
/* the ASCO lettering: the logo's own face, chrome-filled */
.wordmark > span {
  font: 800 16.5px/1 var(--display); letter-spacing: 0.13em;
  background: linear-gradient(180deg, #ffffff 0%, #dfe5ec 30%, #78828f 47%, #eef2f7 53%, #9aa4b0 74%, #f4f7fa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #dfe5ec;
}
.mark { width: 19px; overflow: visible; }
.mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.mark-ghost { stroke: rgba(242, 241, 238, 0.16); }
.mark-run {
  stroke: var(--bright); stroke-dasharray: 0.42 0.58;
  animation: markrun 1.6s linear infinite;
  filter: drop-shadow(0 0 5px rgba(11, 95, 255, 0.7));
}
@keyframes markrun { to { stroke-dashoffset: -2; } }
.mark-dot {
  fill: var(--signal);
  transform-origin: center; transform-box: fill-box;
  animation: markdot 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(11, 95, 255, 0.9));
}
@keyframes markdot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.85; }
}
.areatag { margin-left: auto; font: 400 12.5px/1 var(--mono); letter-spacing: 0.2em; color: var(--ghost); }

/* ---------- the spine: area 04's ring, unrolled ---------- */
.spine {
  position: absolute; left: calc(var(--pad) - 26px); top: 0; bottom: 0; width: 2px;
  background: var(--line-soft);
}
.spine i {
  position: absolute; left: -5px; width: 12px; height: 1px;
  background: #cfd3d8; opacity: 0; transition: opacity 0.4s ease;
}
.spine i.major { width: 20px; left: -9px; }
.spine.in i { opacity: 0.3; }
.spine.in i.major { opacity: 0.75; }
.spine b {  /* the travelling signal */
  position: absolute; left: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 14px rgba(11, 95, 255, 0.9);
  top: 0; opacity: 0; transition: opacity 0.5s ease;
}
.spine.in b { opacity: 1; }
@media (max-width: 900px) { .spine { display: none; } }

/* ---------- section furniture ---------- */
.area { position: relative; padding: clamp(90px, 14vh, 170px) var(--pad); }
.eyebrow {
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bright); margin-bottom: 22px;
}
.h1 {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(30px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -0.02em;
  max-width: 18ch;
}
.h1 em { font-style: normal; color: var(--ghost); }
.lede {
  margin-top: 26px; max-width: 60ch;
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.72; color: var(--body);
}
.note {
  margin-top: 26px; font: 400 13.5px/1.7 var(--mono); letter-spacing: 0.04em; color: var(--muted);
  max-width: 62ch;
}

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- draw-in for any schematic ---------- */
.draw path, .draw line, .draw circle, .draw rect, .draw polyline {
  stroke-dasharray: var(--len, 1); stroke-dashoffset: var(--len, 1);
}
.in .draw path, .in .draw line, .in .draw circle, .in .draw rect, .in .draw polyline,
.draw.in path, .draw.in line, .draw.in circle, .draw.in rect, .draw.in polyline {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* ---------- buttons ---------- */
.cta {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  background: rgba(255, 255, 255, 0.03); color: var(--ink); text-decoration: none;
  padding: 14px 26px; font: 500 13.5px/1 var(--mono); letter-spacing: 0.16em;
  transition: border-color 0.2s, background 0.2s;
}
.cta:hover { border-color: rgba(111, 163, 255, 0.7); background: rgba(11, 95, 255, 0.12); }
.cta i { font-style: normal; color: var(--bright); }

/* ---------- area footer nav ---------- */
.areanav {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 40px var(--pad) 70px;
  font: 400 13px/1 var(--mono); letter-spacing: 0.18em; color: var(--ghost);
}
.areanav a { color: var(--muted); text-decoration: none; }
.areanav a:hover { color: var(--bright); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .draw path, .draw line, .draw circle, .draw rect, .draw polyline { stroke-dashoffset: 0; }
}