/* Founders Lab: monochrome terminal studio.
   Layout: fixed status bar, a sticky 3D stage driven by scroll, then a single
   column site laid over a live code field. Deliberately one dark theme. */
:root {
  --bg: #050505;
  --panel: rgba(7, 7, 7, 0.9);
  --ink: #f1f1ec;
  --dim: #a3a39c;
  --faint: #5c5c56;
  --line: #242422;
  --invert-ink: #050505;
  --screen: #060606;
  --chrome: #101010;

  --font-display: "Doto", "JetBrains Mono", ui-monospace, monospace;
  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --bar-h: 60px;
  --enter: 0;
  color-scheme: dark;
}

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

html { background: var(--bg); scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }

a { color: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--invert-ink); }

/* ---------------------------------------------------------------- ambient layers */

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------- status bar */

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0));
}
/* once the page scrolls under it (js/main.js adds .is-solid past the intro) */
.bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.bar.is-solid::before,
.no-gl .bar::before { opacity: 1; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.brand-cursor {
  width: 0.6em;
  height: 1.05em;
  font-size: 18px;
  background: var(--ink);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.bar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.bar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
  animation: blink 2s steps(1) infinite;
}

.bar-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 28px);
}
.bar-nav a {
  text-decoration: none;
  color: var(--dim);
  transition: color 0.2s;
}
.bar-nav a:hover { color: var(--ink); }

.skip {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--invert-ink);
  background: var(--ink);
  border: 0;
  padding: 7px 12px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.skip:hover { background: #fff; }
.skip[hidden] { display: none; }

/* EN / LT switch: the current language is bright and underlined */
.lang {
  display: inline-flex;
  align-items: center;
}
.lang button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--dim);
  background: none;
  border: 0;
  min-height: 44px; /* a thumb-sized target for each language */
  padding: 8px 4px;
  cursor: pointer;
  transition: color 0.2s;
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.lang-sep { color: var(--faint); }

/* ---------------------------------------------------------------- loader */

.loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--bg);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  transition: opacity 0.7s ease, visibility 0.7s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader-inner { width: min(520px, 100%); }
.boot {
  margin: 0 0 20px;
  min-height: 9.5em;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
  white-space: pre-wrap;
}
.boot b { color: var(--ink); font-weight: 500; }
.loader-bar {
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.loader-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.loader-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- intro stage */

.intro {
  position: relative;
  z-index: 1;
  height: 560vh;
}
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
#gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: calc(1 - var(--enter));
}

.hud {
  position: absolute;
  inset: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12px) max(var(--gutter), env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  opacity: calc(1 - var(--enter) * 1.6);
}
.corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid rgba(241, 241, 236, 0.55);
}
.corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.hud-tr, .hud-bl, .hud-br { position: absolute; }
.hud-tr { top: 34px; right: 34px; text-align: right; white-space: pre; line-height: 1.7; }
.hud-bl { bottom: 34px; left: 34px; display: flex; gap: 14px; align-items: baseline; }
.hud-bl #chap-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}
.hud-br { bottom: 34px; right: 34px; color: var(--ink); }

.hud-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  white-space: nowrap;
  opacity: var(--cue, 1);
}
.hud-cue i {
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--ink), transparent);
  animation: cue 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.hud-rail {
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 26vh;
  transform: translateY(-50%);
  background: rgba(241, 241, 236, 0.18);
}
.hud-rail i {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}

/* ---------------------------------------------------------------- hero (inside the screen) */

.hero {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding-top: var(--bar-h);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  opacity: var(--enter);
  pointer-events: none;
}
.stage.is-entered .hero { pointer-events: auto; }

.hero-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-eyebrow .dim { color: var(--dim); }

.hero-mark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 10.4vw, 196px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.28);
}

.hero-sub {
  margin: 4px 0 0;
  max-width: 34ch;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--invert-ink);
  background: var(--ink);
  border: 1px solid var(--ink);
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn-ghost { background: rgba(5, 5, 5, 0.6); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--invert-ink); }

/* ---------------------------------------------------------------- site */

.site {
  position: relative;
  z-index: 2;
}

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--dim);
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  padding-block: 14px;
  animation: ticker 36s linear infinite;
}
.ticker-track span { padding-right: 0.5em; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding-block: clamp(80px, 12vw, 150px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section-head { display: grid; gap: 10px; margin-bottom: 40px; }

.label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--dim);
}

.section h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 0.25s;
}
.card:hover { border-color: var(--faint); }
.card-path {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
}
.card h3 {
  margin: 0;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.card p:last-child {
  margin: 0;
  max-width: 52ch;
  color: var(--dim);
}

/* ---------------------------------------------------------------- portfolio
   Each project sits on a small monitor like the one in the intro (title bar,
   scanlines, tmux status line), with its story as brief > build > result. */

.section-lede {
  margin: 6px 0 0;
  max-width: 56ch;
  color: var(--dim);
}

/* the portfolio runs wider than the other sections so the work reads at a proper size */
#portfolio { max-width: 1400px; }

.cases {
  display: grid;
  gap: 20px;
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: start;
  padding: clamp(16px, 2.4vw, 32px);
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 0.25s;
}
.case:hover { border-color: var(--faint); }

.case-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the bars' nowrap text must not widen the monitor */
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--screen);
}
.screen-bar,
.screen-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.screen-bar span,
.screen-status span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.screen-bar {
  color: var(--faint);
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
}
.screen-status {
  font-weight: 700;
  color: var(--invert-ink);
  background: var(--ink);
}

.screen-view {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  background: var(--screen);
}
.screen-view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: filter 0.5s ease;
}
/* light scanlines and vignette, a nod to the monitor in the room; screenshots keep their real colours */
.screen-view::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  transition: opacity 0.5s ease;
}
.case:hover .screen-view::after,
.case:focus-within .screen-view::after { opacity: 0.4; }

/* the screenshot is a link to the live site */
a.screen-view { display: block; color: inherit; text-decoration: none; }
a.screen-view img,
a.screen-view video { transition: transform 0.6s ease; }
a.screen-view:hover img,
a.screen-view:hover video { transform: scale(1.02); }
a.screen-view:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.open-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--invert-ink);
  background: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}
a.screen-view:hover .open-hint,
a.screen-view:focus-visible .open-hint { opacity: 1; transform: none; }
@media (hover: none) {
  .open-hint { opacity: 1; transform: none; }
}

/* a product demo plays on the monitor instead of a screenshot */
.screen-view video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  background: var(--screen);
}
.screen-video.is-full video { object-fit: contain; }
.screen-video.is-full::after,
.screen-video.is-full .play-full { display: none; }
.play-full {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 1;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--invert-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.play-full:hover { background: rgba(5, 5, 5, 0.85); color: var(--ink); }
button.case-link {
  padding: 0 0 5px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--faint);
  cursor: pointer;
}
button.case-link:hover { border-color: var(--ink); }

.screen-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.screen-empty b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.28);
}
.case:hover .screen-empty b { animation: flicker 0.5s steps(2) 1; }
@keyframes flicker {
  0% { opacity: 0.2; }
  40% { opacity: 1; }
  60% { opacity: 0.45; }
  100% { opacity: 1; }
}

.case-body {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}
.case-body .card-path { font-size: 13px; }
.case-body h3 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.case-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-tags li {
  padding: 5px 10px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.case-log {
  display: grid;
  gap: 12px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.case-log li {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.log-key {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}
.log-key::before { content: "> "; color: var(--faint); }
/* the Lithuanian keys run longer (sprendimas, rezultatas); on phones they sit above their line */
:lang(lt) .case-log li { grid-template-columns: 12ch minmax(0, 1fr); }
@media (max-width: 480px) {
  :lang(lt) .case-log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* phone monitors: the two halves of a bar stack instead of cutting words */
  .screen-bar, .screen-status {
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 8px 10px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }
}
.case-log p {
  margin: 0;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--dim);
}

.case-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 6px 0 0;
  border-top: 1px solid var(--line);
}
.case-stats div {
  display: grid;
  align-content: space-between; /* a label that wraps keeps its number level with the others */
  gap: 4px;
  min-width: 0;
  padding: 12px 12px 0 0;
}
.case-stats dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.case-stats dd {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal; /* never split a number such as 07.2026 */
}
@media (max-width: 380px) {
  .case-stats dd { font-size: 21px; }
}

.case-link {
  justify-self: start;
  margin-top: 6px;
  padding-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--faint);
  transition: border-color 0.2s;
}
a.case-link:hover { border-color: var(--ink); }
.case-link[aria-disabled="true"] {
  color: var(--faint);
  border-bottom-style: dashed;
}

/* git log ends in the pager's reverse-video (END) */
.cases-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 24px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.cases-end b {
  padding: 2px 6px;
  font-weight: 500;
  color: var(--invert-ink);
  background: var(--ink);
}
.cases-end a {
  text-decoration: none;
  color: var(--dim);
  transition: color 0.2s;
}
.cases-end a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .case { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- portfolio storm
   js/storm.js: the projects arrive in a whirlwind of code that spins in a
   runway above the list, then fly out to their places as the first one lands.
   The two canvases sit either side of the cases still in the air (the back
   half of the funnel under them, the front half over the ones behind it), so
   the cases weave through the storm. Without the script, or with reduced
   motion, none of this applies and the cases sit in place. */
.storm-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.storm-back { z-index: 0; }
.storm-front { z-index: 2; }
.cases.is-storm { position: relative; }
.cases.is-storm .case { position: relative; will-change: transform; }
/* the empty stretch above the list where the storm rides up before anything
   lands; js/storm.js sizes it so the first case leaves once the funnel is in view */
.storm-runway { height: 40vh; height: 40svh; }
/* a case touching down flashes its frame: a lit outline over the border that the
   script fades out, so the flash costs no repaints */
.storm-flash {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 0 48px rgba(241, 241, 236, 0.22);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- process
   A deploy pipeline in a terminal window. Four stages sit on a rail that fills
   as the section scrolls up the screen (js/pipeline.js); each one turns
   queued → running → done, and the site goes live when the last one passes.
   The markup starts with every stage done, so that is what readers without the
   script, or with reduced motion, see. On narrow screens the rail runs down
   the left. */

.pipe {
  --p: 1;
  --pad-x: clamp(22px, 3.6vw, 52px);
  --pad-t: clamp(32px, 4.4vw, 60px);
  --pad-b: clamp(30px, 4vw, 52px);
}
.pipe-track {
  position: relative;
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
}
.pipe-rail {
  position: absolute;
  top: calc(var(--pad-t) + 4px);
  left: var(--pad-x);
  right: var(--pad-x);
  height: 1px;
  background: var(--line);
}
.pipe-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--p) * 100%);
  height: 100%;
  background: var(--ink);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}
/* the head of the run */
.pipe-fill::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.55);
  animation: blink 1.1s steps(1) infinite;
}
.pipe[data-done] .pipe-fill::after { display: none; }
.pipe-live {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--faint);
  background: var(--screen);
  border: 1px solid var(--line);
  transform: translateY(-50%);
  transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.pipe-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pipe[data-done] .pipe-live {
  color: var(--invert-ink);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}
.pipe[data-done] .pipe-live i { animation: blink 1.1s steps(1) infinite; }

.jobs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.8vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.job {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}
.job-node {
  width: 9px;
  height: 9px;
  margin-bottom: 18px;
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
/* stage numbers as an LED matrix: unlit while queued, lit once done */
.job-num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 7.6vw, 112px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.25);
  transition: color 0.4s, text-shadow 0.4s;
}
.job-path {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 0;
}
.job-state {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.job-state span { display: none; }
.job-state .st-q::before { content: "○ "; }
.job-state .st-r::before { content: "● "; }
.job-state .st-d::before { content: "✓ "; }
.job[data-state="queued"] .st-q,
.job[data-state="running"] .st-r,
.job[data-state="done"] .st-d { display: inline; }
.job h3 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(22px, 2.1vw, 27px);
  letter-spacing: -0.01em;
}
.job-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.job-badge {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--invert-ink);
  background: var(--ink);
}
.job-text {
  margin: 0;
  font-size: 17px;
  color: var(--dim);
}
/* what each stage hands over */
.job-out {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.job-out li {
  padding: 4px 9px;
  color: var(--dim);
  border: 1px solid var(--faint);
  transition: color 0.3s, border-color 0.3s;
}
.job[data-state="done"] .job-out li::before { content: "✓ "; color: var(--ink); }

.job[data-state="queued"] .job-node { background: var(--screen); border-color: var(--faint); box-shadow: none; }
.job[data-state="queued"] .job-num { color: var(--line); text-shadow: none; }
.job[data-state="queued"] .job-state { color: var(--faint); }
.job[data-state="queued"] .job-out li { color: var(--faint); border-color: var(--line); }
.job[data-state="running"] .job-node,
.job[data-state="running"] .st-r::before { animation: blink 0.8s steps(1) infinite; }
.job[data-state="running"] .job-num {
  color: var(--dim);
  text-shadow: none;
  animation: flicker 1.6s steps(1) infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  8% { opacity: 0.4; }
  12% { opacity: 1; }
  55% { opacity: 0.7; }
  58% { opacity: 1; }
}

.pipe:not([data-done]) .ps-live,
.pipe[data-done] .ps-run { display: none; }

.process-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 32px;
}

/* every stage shares the same seven rows, so numbers, titles, labels, texts
   and chips line up across the columns whatever wraps */
@media (min-width: 901px) {
  .jobs { grid-template-rows: repeat(7, auto); }
  .job {
    grid-row: span 7;
    grid-template-rows: subgrid;
  }
  .job > * { align-self: start; }
}

@media (max-width: 900px) {
  .jobs {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding: 0 0 32px 34px;
  }
  .job-node {
    position: absolute;
    top: 0;
    left: -34px;
    margin: 0;
  }
  .job-num { font-size: 64px; }
  .pipe-rail {
    top: var(--pad-t);
    bottom: var(--pad-b);
    left: calc(var(--pad-x) + 4px);
    right: auto;
    width: 1px;
    height: auto;
  }
  .pipe-fill {
    width: 100%;
    height: calc(var(--p) * 100%);
  }
  .pipe-fill::after { top: auto; bottom: -3px; }
  .pipe-live {
    top: auto;
    right: auto;
    bottom: 0;
    left: -5px;
    transform: translateY(50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pipe-fill::after, .pipe[data-done] .pipe-live i,
  .job[data-state="running"] .job-node, .job[data-state="running"] .job-num,
  .job[data-state="running"] .st-r::before { animation: none; }
}

.contact { display: grid; gap: 16px; }
.contact-note {
  margin: 0;
  max-width: 52ch;
  color: var(--dim);
}
.contact-mail {
  justify-self: start;
  margin-top: 8px;
  padding-bottom: 6px;
  font-family: var(--font-mono);
  font-size: clamp(18px, 3vw, 28px);
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--faint);
  overflow-wrap: anywhere;
  transition: border-color 0.2s;
}
.contact-mail:hover { border-color: var(--ink); }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-block: 28px max(28px, env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.foot-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* footer links: privacy policy, terms of use, email */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.foot-links a {
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s;
}
.foot-links a:hover,
.foot-links a[aria-current="page"] { color: var(--ink); }
.foot-links .foot-mail { text-transform: none; letter-spacing: 0.06em; }

.contact-fine {
  margin: 0;
  max-width: 52ch;
  font-size: 13px;
  color: var(--dim);
}
.contact-fine a { color: var(--ink); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- legal pages
   privacy.html and terms.html hold both languages; js/i18n.js sets html[lang]
   and this shows one. A reading column, with the contents list sticking beside
   it on wide screens. */

html[lang="lt"] .only-en,
html:not([lang="lt"]) .only-lt { display: none; }

.bar.is-solid {
  background: var(--bg);
}

.legal {
  --hang: 52px;
  --hang-pt: 34px;
  max-width: 1180px;
  margin: 0 auto;
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + clamp(40px, 7vw, 88px));
  padding-bottom: clamp(64px, 10vw, 120px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.legal-head {
  display: grid;
  gap: 14px;
  margin-bottom: 36px;
}
.legal-head h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.legal-meta a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--faint);
  transition: border-color 0.2s;
}
.legal-meta a:hover { border-color: var(--ink); }
.legal-lede {
  margin: 4px 0 0;
  max-width: 62ch;
  color: var(--dim);
}

.legal-summary {
  max-width: 74ch;
  margin-bottom: clamp(48px, 7vw, 80px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  background: var(--panel);
}
.legal-summary h2 {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal-summary ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.1em;
}
.legal-summary li::marker { color: var(--faint); }
.legal-summary p {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--dim);
}

.legal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.toc {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.toc summary {
  padding-block: 12px;
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.toc ol {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
}
.toc a {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  padding-block: 4px;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s;
}
.toc a:hover { color: var(--ink); }
.toc .toc-part {
  padding: 12px 0 4px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.toc .toc-part:first-child { padding-top: 0; }
@media (max-width: 959px) {
  .toc a { padding-block: 10px; } /* folded list on phones: rows big enough to tap */
}

@media (min-width: 960px) {
  .legal-body {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
  }
  .toc {
    position: sticky;
    top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 28px);
    max-height: calc(100vh - var(--bar-h) - env(safe-area-inset-top, 0px) - 56px);
    overflow-y: auto;
  }
}

.legal-text {
  display: grid;
  gap: 52px;
  max-width: 70ch;
  min-width: 0;
}
.legal-text [id] { scroll-margin-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 24px); }
.legal-text h2,
.legal-text h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-wrap: balance;
}
.legal-text h2 {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.legal-text h3 {
  margin: 30px 0 12px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.legal-text .n {
  flex: none;
  min-width: calc(var(--hang) - 14px);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.legal-text p,
.legal-text li,
.legal-text dd { color: var(--dim); }
.legal-text p { margin: 0 0 14px; }
.legal-text strong { color: var(--ink); font-weight: 600; }
.legal-text code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--ink);
}
.legal-text a {
  color: var(--ink);
  text-decoration-color: var(--faint);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-text a:hover { text-decoration-color: var(--ink); }
.legal-text ul {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding-left: 1.2em;
}
.legal-text li::marker { color: var(--faint); }

/* numbered clauses (10.1) and their lettered points (a), hung in a margin */
.cl {
  padding-left: var(--hang);
  text-indent: calc(-1 * var(--hang));
}
.cl-n {
  display: inline-block;
  width: var(--hang);
  text-indent: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.legal-text ul.pts {
  gap: 6px;
  margin-left: var(--hang);
  padding-left: 0;
  list-style: none;
}
.pts li {
  padding-left: var(--hang-pt);
  text-indent: calc(-1 * var(--hang-pt));
}
.pts .cl-n { width: var(--hang-pt); }

.legal-part {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal-text .legal-part { color: var(--ink); }

/* privacy policy: what, why, legal basis and how long for each use of data */
.facts {
  margin: 0 0 14px;
  border-top: 1px solid var(--line);
}
.facts > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 4px 20px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.facts dd { margin: 0; }

.legal-text address {
  margin: 0 0 14px;
  font-style: normal;
  color: var(--ink);
}

@media (max-width: 560px) {
  .legal { --hang: 0px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); }
  .cl-n { width: auto; margin-right: 8px; }
  .pts .cl-n { width: var(--hang-pt); margin-right: 0; }
}

/* ---------------------------------------------------------------- air hockey (easter egg)
   Click the coffee cup in the room. A terminal window like the project
   monitors, with an LED dot-matrix table drawn by js/airhockey.js. */

.hockey-open, .hockey-open body { overflow: hidden; }

.hockey {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(5, 5, 5, 0.95);
  touch-action: none;
}
.hockey[hidden] { display: none; }
.hockey:focus { outline: none; }

.hockey-window {
  display: grid;
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--screen);
  box-shadow: 0 0 80px rgba(255, 255, 255, 0.05);
  animation: hockey-on 0.45s ease-out both;
}
/* a CRT switching on: a bright line that opens into the picture */
@keyframes hockey-on {
  0% { transform: scale(0.6, 0.004); filter: brightness(4); }
  45% { transform: scale(1, 0.004); filter: brightness(4); }
  100% { transform: none; filter: none; }
}

.hockey-bar { align-items: center; }
.hockey-close {
  flex: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s;
}
.hockey-close:hover { color: var(--ink); }

.hockey-stage { position: relative; }
.hockey-stage.is-playing { cursor: none; }
.hockey-canvas { display: block; }
.hockey-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
}
.hockey-stage.is-glitch { animation: hockey-glitch 0.32s steps(3) 1; }
@keyframes hockey-glitch {
  0% { transform: translateX(-5px); filter: contrast(1.8); }
  33% { transform: translateX(4px) skewX(-2deg); }
  66% { transform: translateX(-2px); }
  100% { transform: none; }
}

.hockey-msg {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 14px 18px;
  font: 13px/1.8 var(--font-mono);
  color: var(--ink);
  white-space: pre-wrap;
  background: rgba(6, 6, 6, 0.88);
  border: 1px solid var(--line);
  pointer-events: none;
}
.hockey-msg:empty { display: none; }
.hockey-msg .dim { color: var(--dim); }
.hockey-msg b {
  padding: 1px 5px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--invert-ink);
  background: var(--ink);
}

.hockey-status button {
  flex: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.hockey-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the label that follows the cursor over the cup */
.egg-hint {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 41;
  padding: 6px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--invert-ink);
  background: var(--ink);
  pointer-events: none;
}
.egg-hint[hidden] { display: none; }

@media (max-width: 520px) {
  .hockey-cmd, .hockey-status span:first-child { display: none; }
}

/* ---------------------------------------------------------------- fallbacks */

.no-gl .intro { height: auto; }
.no-gl .stage { position: relative; }
.no-gl #gl, .no-gl .hud { display: none; }
.no-gl .hero { opacity: 1; transform: none; pointer-events: auto; }
.no-gl .skip { display: none; }

/* small tablets: the Lithuanian links run longer, so the skip button says just PRALEISTI */
@media (max-width: 820px) {
  html[lang="lt"] .skip-more { display: none; }
}
/* below 768px the Lithuanian section links no longer fit beside the brand, as on phones */
@media (max-width: 767px) {
  html[lang="lt"] .bar-nav a { display: none; }
}

@media (max-width: 720px) {
  :root { --bar-h: 54px; }
  .bar { gap: 10px; }
  .lang button { min-width: 32px; padding: 0 4px; }
  .bar-status { display: none; }
  .bar-nav a { display: none; }
  .skip-more { display: none; }
  .brand-mark { font-size: 18px; }
  .hud-tr { display: none; }
  .hud-bl { left: 18px; }
  .hud-bl, .hud-br { bottom: 18px; }
  .hud-br { right: 18px; }
  /* the in-scene monitor's light bar slides behind these on the zoom */
  .hud-bl, .hud-br { padding: 4px 8px; background: rgba(5, 5, 5, 0.92); }
  .foot-links { gap: 0 22px; }
  .foot-links a { display: inline-block; padding-block: 12px; }
  .hud-cue { bottom: 64px; }
  .intro { height: 460vh; }
}

/* the smallest phones: tighten the bar so brand, EN / LT and skip still fit */
@media (max-width: 380px) {
  .bar { gap: 10px; letter-spacing: 0.08em; }
  .bar-nav { gap: 8px; }
  .brand-mark, .brand-cursor { font-size: 15px; }
  .skip { padding: 7px 8px; }
}
/* 320px: room for the Lithuanian PRALEISTI beside full-height EN / LT targets */
@media (max-width: 350px) {
  .lang button { min-width: 28px; padding: 0 2px; }
  .brand-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .ticker-track, .brand-cursor, .bar-dot, .hud-cue i, .case:hover .screen-empty b, .hockey-window { animation: none; }
  .screen-view img, .screen-view::after { transition: none; }
}