/* Siol Systems — site layer over the Felt Route kit. Colours to experiment with live up here. */

:root {
  --fr-paper: #f6f0e3;          /* warm paper above ground */
  --fr-ink-soil: #5a3a26;       /* crayon-brown soil, drawn as a felt area */
  --fr-ink-root: #ecd6ab;       /* roots read light against the soil */
  --fr-ink-stem: #4c7f45;
  --fr-ink-leaf: #6aa35a;
  --fr-face-display: "Instrument Serif", Georgia, serif; /* the wordmark; Isobar stays for the nav */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { overflow-x: hidden; }

/* ---------- hero: the whole first screen is the stage ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
}
#ground, #stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the soil is drawn once into its own layer and only ever slid down, so its texture is never redrawn */
#ground { will-change: transform; }

.mark {
  position: absolute;
  left: 0; right: 0;
  top: 33%;            /* the flowers' heads just catch the bottom of SYSTEMS, not the whole word */
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
  font-family: var(--fr-face-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.01em;
  font-size: clamp(60px, 20vw, 132px);
  color: var(--fr-graphite);
  pointer-events: none;
}
.mark-line { display: block; }
/* the name is much bigger on wide screens, so it sits higher to keep the same overlap */
@media (min-width: 760px) { .mark { top: 29%; } }
.mark .ch { display: inline-block; opacity: 0; will-change: transform, opacity; }

/* ---------- nav: the tab bar, centred at the top ---------- */

.nav {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  opacity: 0;
  pointer-events: none; /* the intro hands it the pointer once it's mostly in */
}

/* Bencho's tokens, mapped to this site's own on the component root so nothing leaks out */
.tbb {
  --ink: var(--fr-graphite);
  --on-ink: var(--fr-paper);
  --font-ui: var(--fr-face-rail);
}

/* ══ Tab bar (tab-bar.js, ported from Bencho's TabBar.tsx) ═════════
   Icon tabs on a softened-square bar; the chosen tab opens to show its
   name, and one light tile slides under it on a spring (moved by the
   component). The name's width rides a 0fr → 1fr grid column so it
   opens to exactly what the word needs. */
.tbb {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--tbb-pad);
  border-radius: var(--tbb-r);
  /* a step darker than the grey cards it sits on, in either theme —
     at 7% it was the card's own colour and the bar disappeared */
  background: color-mix(in srgb, var(--ink) 13%, var(--on-ink));
  font-family: var(--font-ui);
  user-select: none;
  -webkit-user-select: none;}

.tbb-tile {
  position: absolute;
  top: var(--tbb-pad);
  bottom: var(--tbb-pad);
  left: 0;
  width: 0;
  border-radius: max(6px, calc(var(--tbb-r) - var(--tbb-pad)));
  background: var(--on-ink);
  will-change: transform, width;}

.tbb-tab {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: max(6px, calc(var(--tbb-r) - var(--tbb-pad)));
  background: transparent;
  /* every icon in full ink: the tile and the name say which is
     chosen, so the others need not fade to say they are not */
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  outline: none;
  transition: color 220ms ease, padding 600ms cubic-bezier(0.22, 1, 0.36, 1);}

.tbb-tab[data-on] { padding: 0 16px 0 12px; color: var(--ink); }

.tbb-tab:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 35%, var(--on-ink)); }

.tbb-icon { flex: none; }

/* the name: a column that opens to its word, the word sliding out from
   behind the icon as it does */
.tbb-name {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 600ms cubic-bezier(0.22, 1, 0.36, 1);}

.tbb-name > span {
  overflow: hidden;
  white-space: nowrap;
  padding-left: 0;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  translate: -8px 0;
  transition:
    opacity 160ms ease,
    translate 420ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 600ms cubic-bezier(0.22, 1, 0.36, 1);
  letter-spacing: -0.01em;}

.tbb-tab[data-on] .tbb-name { grid-template-columns: 1fr; }

.tbb-tab[data-on] .tbb-name > span {
  padding-left: 8px;
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 420ms ease 160ms,
    translate 600ms cubic-bezier(0.22, 1, 0.36, 1) 160ms,
    padding 600ms cubic-bezier(0.22, 1, 0.36, 1);}

@media (prefers-reduced-motion: reduce) {
  .tbb-tab, .tbb-name, .tbb-name > span { transition: none; }
}

/* ---------- ?debug scrubber, for tuning the timing ---------- */

.debug {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(20, 20, 22, 0.86); color: #f6f0e3;
  font: 12px/1.2 var(--fr-face-rail);
}
.debug input[type="range"] { flex: 1 1 160px; accent-color: #ecd6ab; }
.debug button, .debug select { font: inherit; background: #f6f0e3; color: #1a1a1c; border: 0; border-radius: 6px; padding: 4px 8px; }
.debug output { min-width: 9ch; font-variant-numeric: tabular-nums; }