/* Tensornext website. One quiet column on paper: the seal, one serif line, a few links.
   Everything is built from the design system tokens in ds/; this file only adds layout. */

/* Mesh gradient colours (assets/mesh-gradient.js): paper with the faintest tobacco warmth in light,
   night with a faint ember in dark (tobacco blended about a seventh into night). Kept close to the page colour
   so text contrast holds everywhere. */
:root {
  color-scheme: light;
  --mesh-1: var(--paper);
  --mesh-2: color-mix(in srgb, var(--tobacco-100) 28%, var(--paper));
  --mesh-3: color-mix(in srgb, var(--linen) 32%, var(--paper));
  --mesh-4: color-mix(in srgb, var(--tobacco-50) 60%, var(--paper));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --mesh-1: var(--stone-950);
  --mesh-2: color-mix(in srgb, var(--tobacco-800) 14%, var(--stone-950));
  --mesh-3: color-mix(in srgb, var(--bg-surface) 35%, var(--stone-950));
  --mesh-4: color-mix(in srgb, var(--stone-900) 35%, var(--stone-950));
}
/* The design system switches to dark with [data-theme="dark"]. Mirror those values for visitors whose
   system is dark and who have not picked a theme, so the page follows the OS until the toggle is used. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mesh-1: var(--stone-950);
    --mesh-2: color-mix(in srgb, var(--tobacco-800) 14%, var(--stone-950));
    --mesh-3: color-mix(in srgb, var(--bg-surface) 35%, var(--stone-950));
    --mesh-4: color-mix(in srgb, var(--stone-900) 35%, var(--stone-950));
    --bg-page: var(--stone-950);
    --bg-raised: #2A2724;
    --bg-surface: #1F1D1A;
    --bg-inverse: #D6D0C8;
    --bg-hover: rgba(221, 215, 207, 0.05);
    --bg-active: rgba(221, 215, 207, 0.09);
    --bg-accent-soft: var(--tobacco-800);
    --fg-1: #DDD7CF;
    --fg-2: #B3ACA3;
    --fg-3: #9C958C;
    --fg-placeholder: #7E776F;
    --fg-inverse: var(--stone-950);
    --fg-accent: var(--tobacco-300);
    --fg-on-accent: var(--stone-950);
    --line: #3A3632;
    --line-strong: #45413C;
    --accent: var(--tobacco-300);
    --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--tobacco-300);
  }
}

html, body { background: var(--bg-page); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  isolation: isolate; /* lets the fixed gradient canvas sit above the body colour and below the content */
  transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}
.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
}
.mesh-bg.is-ready { opacity: 1; }
/* Cursor trail (assets/cursor-trail.js): a fixed canvas above the gradient and below the content */
.cursor-trail {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gutter {
  padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
}

/* Top bar: the theme switch, and on inner pages the seal as the way home */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: var(--space-5);
  min-height: 40px;
}
.theme-toggle {
  justify-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -10px; /* lines the icon up with the page gutter */
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--fg-1); }
.theme-toggle:active { transform: scale(var(--press-scale)); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* A small planet: the filled half is night. Dark theme turns it half a revolution; hover turns it a little. */
.theme-toggle__icon {
  --turn: 0deg;
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transform: rotate(var(--turn));
  transition: transform 600ms var(--ease-out);
}
.theme-toggle__night { fill: currentColor; stroke: none; }
.theme-toggle:hover .theme-toggle__icon { transform: rotate(calc(var(--turn) + 24deg)); }
:root[data-theme="dark"] .theme-toggle__icon { --turn: 180deg; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon { --turn: 180deg; }
}
.home-link {
  grid-column: 2;
  display: block;
  color: var(--fg-1);
  border-radius: 50%;
}
.home-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.seal { display: block; color: var(--fg-1); }
.seal--hero { width: 140px; height: 140px; }
.seal--small { width: 64px; height: 64px; }

/* Home: everything centred in the first screen */
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding-block: var(--space-12) var(--space-16);
  text-align: center;
}
.lede {
  margin: 0;
  max-width: 22ch;
  font: var(--type-h3);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
}
.vision {
  margin: 0;
  max-width: 34rem;
  font: var(--type-body-lg);
  color: var(--fg-2);
  text-wrap: pretty;
}
.lede + .vision { margin-top: calc(var(--space-6) - var(--space-12)); } /* sits closer to the line it explains */
.lede a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Site links, as on the reference: a quiet row, stacked on phones */
.site-nav ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-block;
  padding: 4px 2px;
  border-radius: var(--radius-xs);
  font: var(--type-label);
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--fg-1); }
.site-nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
footer > .site-nav { padding-block: var(--space-6) var(--space-4); }

.bottombar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5) max(var(--space-5), env(safe-area-inset-bottom, 0px));
  font: var(--type-caption);
  color: var(--fg-3);
}
.wordmark { display: block; height: 13px; width: auto; }
.bottombar p { margin: 0; }

/* Footer: kept small and quiet. The logo takes the same grey as the rest of the footer. */
.bottombar .wordmark { height: 9px; color: var(--fg-2); } /* letters level with the footer text */
.wordmark--sting { overflow: visible; }

/* The footer row, after thebrowser.company's: three small marks spread edge to edge.
   Logo sting, a coin that flips between Nevada (built here) and a globe (runs everywhere), and a
   JetBrains Mono plate that sometimes scrambles, all in the footer grey. */
.bottombar { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: center; color: var(--fg-2); }
.bottombar > * { margin: 0; }

.coin { position: relative; display: block; width: 24px; height: 24px; perspective: 160px; }
.coin__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: tn-coin 7s var(--ease-in-out) infinite;
}
.coin__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  backface-visibility: hidden;
}
.coin__face--back { transform: rotateY(180deg); }
.coin__art { display: block; width: 14px; height: 14px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1px; stroke-linejoin: round; stroke-linecap: round; }
.coin__art--nevada { width: auto; height: 13px; aspect-ratio: 46.64 / 70; }
@keyframes tn-coin {
  0%, 38% { transform: rotateY(0deg); }
  50%, 88% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

.plate {
  display: flex;
  flex-direction: column;
  width: 15ch; /* both lines are 15 characters, so they meet the edges with normal spacing */
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.25;
}
.plate__line { display: block; text-align: justify; text-align-last: justify; white-space: pre; }

.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;
}

/* Inner pages: a 640px reading column */
.page {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-block: var(--space-10) var(--space-20);
}
.page__head { display: flex; flex-direction: column; gap: var(--space-5); }
.page__title {
  margin: 0;
  font: var(--type-h2);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.page__intro {
  margin: 0;
  font: var(--type-body-lg);
  color: var(--fg-2);
  text-wrap: pretty;
}
/* Hairline rows: label left, text right (the design system's ListRow) */
.rows { display: flex; flex-direction: column; margin: 0; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row__label { margin: 0; font: var(--type-body-sm); color: var(--fg-3); }
.row__label--serif {
  font: var(--type-h4);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.rows--stacked .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.row__text { margin: 0; font: var(--type-body); color: var(--fg-1); text-wrap: pretty; }
.row__text--quiet { color: var(--fg-2); }

/* Opening (home page, assets/intro.js), after thebrowser.company: the seal builds itself large in the middle
   of the screen (globe first, then the letters round the ring), holds, glides into its place, and then the
   rest of the page arrives. About three seconds, ease-out and ease-in-out only. */
html.intro .home > *,
html.intro .topbar,
html.intro .bottombar { animation: tn-fade 400ms var(--ease-out) 3s both; } /* fallback if intro.js never runs */

.intro-play .seal--hero {
  animation: tn-intro-seal 2.5s both;
  transform-origin: 50% 50%;
}
@keyframes tn-intro-seal {
  0%, 60% { transform: translate(var(--intro-dx, 0px), var(--intro-dy, 0px)) scale(var(--intro-s, 1)); animation-timing-function: var(--ease-in-out); }
  100% { transform: none; }
}
.intro-play .seal-globe { animation: tn-fade 700ms var(--ease-out) 100ms both; }
.intro-play .seal-l { animation: tn-intro-letter 320ms var(--ease-out) both; animation-delay: calc(350ms + var(--i) * 34ms); }
.intro-play .seal-mark { animation: tn-fade 500ms var(--ease-out) 1.15s both; }
@keyframes tn-intro-letter { from { fill-opacity: 0; } to { fill-opacity: 1; } }

.intro-play .lede { animation: tn-rise 600ms var(--ease-out) 2.3s both; }
.intro-play .vision { animation: tn-rise 600ms var(--ease-out) 2.42s both; }
.intro-play .site-nav { animation: tn-rise 600ms var(--ease-out) 2.54s both; }
.intro-play .topbar,
.intro-play .bottombar { animation: tn-fade 700ms var(--ease-out) 2.7s both; }

/* Arrival: a short settled rise, one element after another */
.rise { animation: tn-rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }

@media (min-width: 800px) {
  .seal--hero { width: 184px; height: 184px; }
  .lede { font: var(--type-h2); letter-spacing: var(--tracking-display); max-width: 24ch; }
  .site-nav ul { flex-direction: row; gap: var(--space-10); }
  .bottombar { padding-block: var(--space-6) max(var(--space-6), env(safe-area-inset-bottom, 0px)); }
  .page__title { font: var(--type-h1); letter-spacing: var(--tracking-display); }
  .row { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-6); align-items: baseline; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  html.intro .home > *, html.intro .topbar, html.intro .bottombar { animation: none; }
  .coin__inner { animation: none; }
  body, .theme-toggle, .theme-toggle__icon, .site-nav a { transition: none; }
}