/* synoch — homepage
   Every coordinate below comes from design.pptx, measured on a 1440-wide canvas.
   --u is one canvas pixel at the current viewport width (set exactly by main.js). */

:root {
  --u: calc(100vw / 1440);
  --mu: calc(100vw / 390);

  --green: #64E470;
  --paper: #FFF9FC;
  --ink: #171717;
  --butter: #FFE7A6;
  --oxblood: #770000;
  --cyan: #00F6F5;
  --signal: #077BFF;
  --signal-cta: #097BFF;
  --white: #FFFFFF;
  --ghost: #ABABAB;

  /* Neue Haas Grotesk in the deck is a trial licence; Helvetica Neue is the same design lineage. */
  --grot: "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;
  --heavy: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --optima: Optima, "Optima nova", Candara, "Noto Sans", sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  --menu-h: max(48px, calc(71 * var(--u)));
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grot);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

img { display: block; max-width: none; }
a { color: inherit; }
p, h1, h2 { margin: 0; }

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

.skip {
  position: fixed; left: 12px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--white); color: var(--ink);
  font: 500 15px/1 var(--grot); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- placement on the design canvas ---------- */

.abs {
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.hbox { height: calc(var(--h) * var(--u)); }

/* ---------- menu bar ---------- */

.menubar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--menu-h);
  background: var(--ink);
}
.menubar nav {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 calc(40 * var(--u));
}
.wordmark {
  color: var(--white);
  text-decoration: none;
  font: italic 900 max(18px, calc(27 * var(--u)))/1 var(--heavy);
  letter-spacing: -0.03em;
  padding: 6px 4px;
}
.nav-link {
  position: relative;
  justify-self: start;
  padding: 8px 0;
  color: var(--white);
  text-decoration: none;
  font: 400 max(15px, calc(20 * var(--u)))/1 var(--grot);
  letter-spacing: -0.01em;
}
.nav-link--end { justify-self: end; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s var(--ease-spring);
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.menubar a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }

/* ---------- I. hero ---------- */

.hero {
  position: relative;
  height: calc(880 * var(--u));
  background: var(--green);
  overflow: hidden;
}

.neuron-wrap { position: absolute; inset: 0; will-change: transform; }
.neuron {
  height: auto;
  z-index: 1;
  animation: boil .72s steps(1) infinite;
}
@keyframes boil {
  0%   { transform: none; }
  33%  { transform: translate(calc(.9 * var(--u)), calc(-.7 * var(--u))) rotate(.12deg); }
  66%  { transform: translate(calc(-.7 * var(--u)), calc(.6 * var(--u))) rotate(-.1deg); }
}

.tile {
  --cw: calc(var(--w) * var(--u));
  --ch: calc(var(--h) * var(--u));
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: var(--cw);
  height: var(--ch);
  overflow: hidden;
  background: #000;
  opacity: 0;
  animation: appear 1ms linear forwards;
  animation-delay: calc(140ms + var(--i) * 95ms);
}
.tile i {
  position: absolute; left: 50%; top: 50%;
  width: var(--cw); height: var(--ch);
  transform: translate(-50%, -50%) rotate(var(--rot));
  background: url(/assets/fly.jpg) no-repeat;
  background-size: var(--bs);
  background-position: var(--p0);
  animation: frames 2.6s steps(1) infinite;
  animation-delay: var(--d);
}
.tile.r90 i { width: var(--ch); height: var(--cw); }
@keyframes frames {
  0%  { background-position: var(--p0); }
  33% { background-position: var(--p1); }
  66% { background-position: var(--p2); }
}
/* opaque at both ends: a 1ms step must never resolve to its start value through rounding */
@keyframes appear { from, to { opacity: 1; } }

.label {
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  background: var(--ink);
  color: var(--white);
  font: 400 calc(32.5 * var(--u))/1 var(--grot);
  letter-spacing: -0.015em;
  white-space: nowrap;
  opacity: 0;
  animation: appear 1ms linear forwards;
  animation-delay: 640ms;
}

.paper-title {
  padding: calc(5.85 * var(--u)) calc(11.7 * var(--u));
  color: var(--white);
  font: 300 calc(88 * var(--u))/.84 var(--mono);
  letter-spacing: 0;
}
.paper-title .ln { display: block; white-space: nowrap; }
.paper-title b {
  font-weight: inherit;
  opacity: 0;
  animation: appear 1ms linear forwards;
  animation-delay: calc(760ms + var(--c) * 72ms);
}

.cta, .pill {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;          /* replaced by a cubic-Bézier outline once main.js runs */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.cta {
  z-index: 3;
  background: var(--signal-cta);
  color: var(--white);
  font: italic 900 max(13px, calc(19.5 * var(--u)))/1 var(--heavy);
  letter-spacing: -0.01em;
  animation: pop .9s backwards;
  animation-timing-function: var(--ease-spring);
  animation-timing-function: linear(0, .0866, .2972, .5537, .7962, .9884, 1.1146, 1.1729, 1.1709, 1.1253, 1.0563, .9873, .9378, .9161, .9206, .9446, .9786, 1.0118, 1.0365, 1.0484, 1.0471, 1.0354, 1.0182, 1.0003, .9862, .9785, .978, .9831, .9915, 1.0003, 1);
  animation-delay: 1.32s;
}
@keyframes pop { from { scale: 0; } to { scale: 1; } }
.cta:focus-visible, .pill:focus-visible { outline: none; background: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- II + III. manifesto and connections share one wire layer ---------- */

.story { position: relative; }
.wires {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.lollipop-stage, .graph-stage { display: none; }

.manifesto {
  position: relative;
  height: calc(880 * var(--u));
  background: var(--paper);
  scroll-margin-top: var(--menu-h);
  --ghost: #B4B1B2;
}
.voice {
  padding: calc(5.85 * var(--u)) calc(11.7 * var(--u));
  font: italic 400 calc(39 * var(--u))/1.22 var(--optima);
  color: var(--ink);
}
.mission {
  padding: calc(5.85 * var(--u)) calc(11.7 * var(--u));
  text-align: right;
  font: 400 calc(45.5 * var(--u))/1.23 var(--grot);
  letter-spacing: -0.026em;
  color: var(--ink);
}
.brand { font-style: italic; font-weight: 700; }

.connections {
  position: relative;
  height: calc(880 * var(--u));
  background: var(--butter);
  --ghost: #ADA592;
}
.conn-head {
  padding: calc(5.85 * var(--u)) calc(11.7 * var(--u));
  font: 400 calc(45.5 * var(--u))/1.23 var(--grot);
  letter-spacing: -0.018em;
  color: var(--oxblood);
}
.conn-note {
  padding: calc(5.85 * var(--u)) calc(11.7 * var(--u));
  font: 400 calc(32.5 * var(--u))/1.22 var(--grot);
  letter-spacing: -0.022em;
  color: var(--oxblood);
}

/* scroll-focused words */
.w { display: inline-block; }

/* ---------- IV. frontiers ---------- */

.frontiers {
  position: relative;
  height: calc(880 * var(--u));
  background: var(--cyan);
  overflow: hidden;
  overflow: clip;
  scroll-margin-top: var(--menu-h);
}
.fade {
  position: absolute; left: 0; right: 0;
  top: calc(239 * var(--u)); bottom: 0;
  background: linear-gradient(180deg,
    rgba(23, 23, 23, 0) 0%,
    rgba(23, 23, 23, .838) 46%,
    #171717 80%);
}
.row {
  position: absolute; left: 0; z-index: 1;
  top: calc(var(--y) * var(--u));
  width: 100%;
  height: calc(76 * var(--u));
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.row.dragging { cursor: grabbing; }
.track {
  display: flex;
  gap: calc(24 * var(--u));
  height: 100%;
  width: max-content;
  will-change: transform;
}
.pill {
  flex: none;
  height: 100%;
  padding: 0 calc(30 * var(--u));
  background: var(--signal);
  color: var(--white);
  font: 400 calc(32.5 * var(--u))/1 var(--grot);
  letter-spacing: -0.015em;
}
.footer-mark {
  position: absolute; left: 0; right: 0;
  top: calc(774 * var(--u));
  text-align: center;
  color: var(--white);
  font: 900 calc(39 * var(--u))/1.2 var(--heavy);
  letter-spacing: -0.035em;
}

/* ---------- phones and narrow windows ---------- */

@media (max-width: 820px) {
  :root { --menu-h: 52px; }
  .menubar nav { padding: 0 18px; }

  .hero { height: calc(560 * var(--mu)); }
  .hero .abs {
    left: calc(var(--mx) * var(--mu));
    top: calc(var(--my) * var(--mu));
    width: calc(var(--mw) * var(--mu));
  }
  .hero .hbox { height: calc(var(--mh) * var(--mu)); }
  .tile {
    --cw: calc(var(--mw) * var(--mu));
    --ch: calc(var(--mh) * var(--mu));
    left: calc(var(--mx) * var(--mu));
    top: calc(var(--my) * var(--mu));
  }
  .tile--desk { display: none; }
  .label { font-size: calc(14.5 * var(--mu)); }
  .paper-title { font-size: calc(44 * var(--mu)); padding: 0 calc(4 * var(--mu)); }
  .cta { font-size: calc(13.5 * var(--mu)); }

  .manifesto, .connections { height: auto; }
  .manifesto .abs, .connections .abs { position: relative; left: auto; top: auto; width: auto; padding: 0; }

  .manifesto { padding: 64px 22px 0; }
  .voice { font-size: 21px; max-width: 30ch; margin-bottom: 18px; }
  .mission { font-size: 26px; max-width: 15ch; margin: 44px 0 0 auto; }
  .lollipop-stage { display: block; margin: 44px -22px 0; aspect-ratio: 911 / 236; }

  .connections { padding: 8px 22px 72px; }
  .graph-stage { display: block; aspect-ratio: 800 / 640; margin: 0 -22px 28px; }
  .conn-head { font-size: 26px; margin-bottom: 22px; max-width: 18ch; }
  .conn-note { font-size: 18px; max-width: 26ch; }

  .frontiers { height: 540px; }
  .fade { top: 180px; }
  .row { top: calc(var(--my) * 1px); height: 50px; }
  .track { gap: 12px; }
  .pill { font-size: 18px; padding: 0 20px; }
  .footer-mark { top: auto; bottom: 44px; font-size: 26px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .neuron, .tile i { animation: none; }
  .tile, .label, .paper-title b { animation: none; opacity: 1; }
  .cta { animation: none; }
  .nav-link::after { transition: none; }
  .row { cursor: auto; }
}