/* The landing page (site/theme/landing.html). It is a Starlight splash page, so the frame around it is
   the docs' own; the rules at the top undo Starlight's title panel and content width for it.

   Motion means current: an amber spark runs along a wire, and what it reaches comes on. On load
   (:root[data-intro]) the mark draws itself and its spark lights, then current runs from main.volt
   to the C voltc writes and on to the terminal. Below that, one trace runs from the mark's spark
   down the page (.current, laid out by current.js), and scrolling carries a spark along
   it; what it passes gets .on. Things wait in their starting state only while :root[data-motion]
   is set, so without the script, or with reduced motion, every part shows how it ends. */

body:has(.landing) .content-panel:has(h1#_top) {
  display: none;
}
body:has(.landing) .content-panel {
  padding: 0;
}
body:has(.landing) .sl-container {
  max-width: none;
  margin: 0;
}

.landing {
  position: relative;
  --wrap: 74rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --stage: #110d29; /* code and terminal panels stay dark in both themes */
  --stage-line: #2c2463;
  --stage-text: #e6e1ff;
  --stage-muted: #8d86b8;
  color: var(--v-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.landing > section,
.landing > .foot {
  padding: clamp(3.5rem, 7vw, 6rem) max(var(--gutter), (100% - var(--wrap)) / 2);
}

.landing h1,
.landing h2,
.landing h3 {
  color: var(--v-text);
  font-weight: 700;
  font-variation-settings: "wdth" 90, "opsz" 72;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
}
.landing h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin-bottom: 1.1rem;
  max-width: 18ch;
}
.landing h3 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.landing p {
  margin: 0 0 1rem;
  max-width: 60ch;
}
.landing .sub {
  margin-bottom: 2.5rem;
}
.landing a:not(.button) {
  color: var(--v-text);
  text-decoration-color: var(--v-violet);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
.landing a:not(.button):hover {
  color: var(--v-violet-soft);
}
.landing code,
.landing pre {
  font-family: var(--v-mono);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.button {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.35rem;
  border-radius: 0.7rem;
  border: 1px solid var(--v-line);
  color: var(--v-text);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.button:hover {
  border-color: var(--v-violet);
}
.button.primary {
  background: var(--v-violet);
  border-color: var(--v-violet);
  color: #fff;
}
.button.primary:hover {
  background: color-mix(in oklab, var(--v-violet) 85%, white);
}

/* ---------- the hero: main.volt, wired to what voltc writes, wired to what it prints ---------- */

.hero {
  padding-top: clamp(3rem, 7vw, 5.5rem) !important;
}
/* the mark beside the headline, or above it on a narrow screen */
.hero-text {
  display: grid;
  gap: 1.5rem 3rem;
}
.hero h1 {
  font-size: clamp(2.9rem, 6.6vw, 5.6rem);
  font-variation-settings: "wdth" 94, "opsz" 96, "wght" 700;
  letter-spacing: -0.01em;
  line-height: 0.97;
}
.hero h1 .ln {
  display: block;
}
.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  margin: 0 !important;
  max-width: 44ch !important;
}
.hero .actions {
  margin-top: 0.5rem;
}
.hero-mark {
  order: -1;
  width: clamp(9rem, 30vw, 12rem);
  height: auto;
  overflow: visible;
}
@media (min-width: 60rem) {
  .hero-text {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "h1 mark" "lede mark" "actions mark";
  }
  .hero h1 {
    grid-area: h1;
  }
  .lede {
    grid-area: lede;
  }
  .hero .actions {
    grid-area: actions;
  }
  .hero-mark {
    grid-area: mark;
    align-self: center;
    width: clamp(15rem, 27vw, 24rem);
  }
}
.hero-mark path {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-mark .trace {
  stroke: var(--v-mark);
}
.hero-mark .spark {
  fill: var(--v-spark);
}
/* a pulse that runs along the trace into the spark, and the rings the spark throws */
.hero-mark .pulse {
  stroke: var(--v-spark);
  stroke-dasharray: 0.12 2;
  stroke-dashoffset: 0.12;
  opacity: 0;
}
.hero-mark .ring {
  fill: none;
  stroke: var(--v-spark);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.hero-mark .spark,
.hero-mark .ring {
  transform-box: fill-box;
  transform-origin: center;
}

/* the load sequence: the headline's words swell from thin and narrow to full, left to right, while
   the mark's trace draws; its spark lights with a burst; then the pulse comes round every few
   seconds */
@keyframes swell {
  from { font-variation-settings: "wdth" 75, "opsz" 96, "wght" 200; opacity: 0.15; }
}
@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes pop {
  0% { transform: scale(0); }
  55% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes burst {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(3.4); opacity: 0; }
}
@keyframes beat {
  0% { stroke-dashoffset: 0.12; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
  18% { stroke-dashoffset: -1; opacity: 1; }
  18.1%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes flash {
  0%, 17% { transform: scale(1); opacity: 0; }
  18% { transform: scale(1); opacity: 0.8; }
  32%, 100% { transform: scale(2.6); opacity: 0; }
}
:root[data-intro] .hero h1 .w {
  animation: swell 0.9s calc(0.05s + var(--i) * 0.07s) var(--v-ease) both;
}
:root[data-intro] .hero .lede {
  animation: appear 0.8s 0.5s both;
}
:root[data-intro] .hero .actions {
  animation: appear 0.8s 0.65s both;
}
:root[data-intro] .hero-mark .trace {
  stroke-dasharray: 1;
  animation: draw 1s 0.35s cubic-bezier(0.65, 0, 0.35, 1) both;
}
:root[data-intro] .hero-mark .spark {
  animation: pop 0.55s 1.3s var(--v-ease) both;
}
:root[data-intro] .hero-mark .burst {
  animation: burst 0.9s 1.35s var(--v-ease) forwards;
}
:root[data-intro] .hero-mark .burst + .burst {
  animation-delay: 1.5s;
}
:root[data-motion] .hero-mark .pulse {
  animation: beat 6s 2.6s infinite;
}
:root[data-motion] .hero-mark .flash {
  animation: flash 6s 2.6s infinite;
}

.circuit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 68rem) {
  .circuit {
    grid-template-columns: minmax(0, 1.05fr) 3rem minmax(0, 1.2fr) 3rem minmax(0, 0.8fr);
    align-items: start;
  }
  /* the wires run at the height of the panels' first lines */
  .circuit .wire {
    margin-top: 4.3rem;
  }
}

.stage {
  margin: 0;
  background: var(--stage);
  border: 1px solid var(--stage-line);
  border-radius: 0.9rem;
  overflow: hidden;
  min-width: 0;
}
.stage figcaption {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--stage-line);
  color: var(--stage-muted);
  font-family: var(--v-mono);
  font-size: 0.8rem;
}
/* each stage's lamp: on once current reaches it */
.stage .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--v-violet);
  flex-shrink: 0;
}
.stage pre.astro-code {
  margin: 0;
  padding: 1rem 1.1rem;
  background: transparent !important;
  font-size: 0.84rem;
  line-height: 1.7;
  overflow-x: auto;
}
.stage pre.astro-code .line {
  display: inline-block;
}
.stage-out input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch {
  display: inline-flex;
  gap: 0.25rem;
}
.switch label {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
}
.switch label:hover {
  color: var(--stage-text);
}
#be-c:checked ~ figcaption label[for="be-c"],
#be-llvm:checked ~ figcaption label[for="be-llvm"] {
  color: var(--stage-text);
  border-color: var(--stage-line);
  background: #1d1745;
}
#be-c:focus-visible ~ figcaption label[for="be-c"],
#be-llvm:focus-visible ~ figcaption label[for="be-llvm"] {
  outline: 2px solid var(--v-violet);
}
.out-llvm,
#be-llvm:checked ~ .out-c {
  display: none;
}
#be-llvm:checked ~ .out-llvm {
  display: block;
}
.stage-term pre {
  margin: 0;
  padding: 1rem;
  color: var(--stage-text);
  font-size: 0.85rem;
  line-height: 1.7;
  white-space: pre-wrap;
}
.prompt {
  color: var(--v-mark);
  user-select: none;
}
.landing .stage .prompt,
.landing .shell .prompt {
  color: #a78bfa;
}
.result {
  color: #fff;
}

/* a wire between stages: a track, and the pulse that runs along it (down, when the stages stack) */
.wire {
  position: relative;
  height: 2.5rem;
  overflow: hidden;
}
.wire::before,
.wire::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--v-line);
}
.wire::after {
  background: linear-gradient(to bottom, transparent, var(--v-spark));
  height: 40%;
  opacity: 0;
}
@media (min-width: 68rem) {
  .wire {
    height: 2px;
    overflow: visible;
  }
  .wire::before,
  .wire::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 2px;
    margin: 0;
  }
  .wire::after {
    background: linear-gradient(to right, transparent, var(--v-spark));
    width: 45%;
    right: auto;
  }
}

@keyframes run-down {
  0% { opacity: 1; transform: translateY(-100%); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(250%); }
}
@keyframes run-right {
  0% { opacity: 1; transform: translateX(-100%); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(222%); }
}
@keyframes lamp {
  from { background: var(--stage-line); }
  to { background: var(--v-violet); }
}
@keyframes line-in {
  from { opacity: 0; transform: translateX(-0.4rem); }
  to { opacity: 1; transform: none; }
}
@keyframes type {
  from { width: 0; }
}
@keyframes appear {
  from { opacity: 0; }
}

/* then the pipeline: main.volt is on; current runs to the C, whose lines come on one by one; then
   on to the terminal, where the command types and the program prints */
:root[data-intro] .stage-src .dot {
  animation: lamp 0.3s 1.45s both;
}
:root[data-intro] .w1::after {
  animation: run-down 0.65s 1.7s var(--v-ease) both;
}
:root[data-intro] .stage-out .dot {
  animation: lamp 0.3s 2.25s both;
}
:root[data-intro] .stage-out .line {
  animation: line-in 0.35s calc(2.3s + var(--i, 0) * 0.06s) var(--v-ease) both;
}
:root[data-intro] .w2::after {
  animation: run-down 0.6s 3.05s var(--v-ease) both;
}
:root[data-intro] .stage-term .dot {
  animation: lamp 0.3s 3.55s both;
}
:root[data-intro] .stage-term .typed {
  animation: type 0.7s 3.65s steps(var(--n)) both;
}
:root[data-intro] .stage-term .result {
  animation: appear 0.2s 4.45s both;
}
@media (min-width: 68rem) {
  :root[data-intro] .w1::after {
    animation-name: run-right;
  }
  :root[data-intro] .w2::after {
    animation-name: run-right;
  }
}
/* switching backends brings the other excerpt on, line by line */
:root[data-motion] .stage-out .line {
  animation: line-in 0.3s calc(var(--i, 0) * 0.035s) var(--v-ease) both;
}

.typed {
  display: inline-block;
  overflow: hidden;
  white-space: pre;
  vertical-align: bottom;
  width: calc(var(--n) * 1ch);
}

/* ---------- nothing runs underneath: the runtime's parts, switched off ---------- */

.norun {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 60rem) {
  .norun {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
.breakers {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--v-line);
}
.breakers li {
  display: grid;
  grid-template-columns: 1fr auto 3.5rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--v-line);
  margin: 0;
}
.part {
  color: var(--v-muted);
  font-size: 1.1rem;
  font-weight: 500;
}
.state {
  font-family: var(--v-mono);
  font-size: 0.8rem;
  text-align: right;
}
.toggle {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--v-raised);
  border: 1px solid var(--v-line);
}
.knob {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--v-muted);
}

/* before: on (violet, knob right); each switches off as the current reaches its tap */
:root[data-motion] .breakers li:not(.on) .part {
  color: var(--v-text);
}
:root[data-motion] .breakers li:not(.on) .toggle {
  background: var(--v-violet);
  border-color: var(--v-violet);
}
:root[data-motion] .breakers li:not(.on) .knob {
  transform: translateX(1.25rem);
  background: #fff;
}
:root[data-motion] .breakers li:not(.on) .state {
  opacity: 0;
}
@keyframes switch-track {
  from { background: var(--v-violet); border-color: var(--v-violet); }
}
@keyframes switch-knob {
  from { transform: translateX(1.25rem); background: #fff; }
}
@keyframes part-dim {
  from { color: var(--v-text); }
}
.breakers li.on .toggle {
  animation: switch-track 0.35s 0.1s var(--v-ease) both;
}
.breakers li.on .knob {
  animation: switch-knob 0.35s 0.1s var(--v-ease) both;
}
.breakers li.on .part {
  animation: part-dim 0.5s 0.1s both;
}
.breakers li.on .state {
  animation: appear 0.4s 0.25s both;
}

/* ---------- samples ---------- */

.tabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tab-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem;
  border: 1px solid var(--v-line);
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 1.5rem;
}
.tab-labels label {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--v-muted);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s, background 0.2s;
}
.tab-labels label:hover {
  color: var(--v-text);
}
.panel {
  display: none;
  gap: 2.5rem;
}
@media (min-width: 60rem) {
  .panel {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
  }
}
.panel pre.astro-code {
  margin: 0;
  min-width: 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--stage-line);
  border-radius: 0.9rem;
  font-size: 0.85rem;
  line-height: 1.7;
  overflow-x: auto;
}
.printed {
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  background: var(--stage);
  border: 1px solid var(--stage-line);
  border-radius: 0.7rem;
  color: var(--stage-text);
  font-size: 0.85rem;
  white-space: pre-wrap;
}
/* a sample's output prints when its tab opens */
:root[data-motion] .panel .printed span {
  animation: appear 0.25s calc(0.25s + var(--i) * 0.12s) both;
}
.tabs > input:nth-of-type(1):checked ~ .tab-labels label:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .tab-labels label:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .tab-labels label:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ .tab-labels label:nth-of-type(4),
.tabs > input:nth-of-type(5):checked ~ .tab-labels label:nth-of-type(5) {
  background: var(--v-violet);
  color: #fff;
}
.tabs > input:nth-of-type(1):focus-visible ~ .tab-labels label:nth-of-type(1),
.tabs > input:nth-of-type(2):focus-visible ~ .tab-labels label:nth-of-type(2),
.tabs > input:nth-of-type(3):focus-visible ~ .tab-labels label:nth-of-type(3),
.tabs > input:nth-of-type(4):focus-visible ~ .tab-labels label:nth-of-type(4),
.tabs > input:nth-of-type(5):focus-visible ~ .tab-labels label:nth-of-type(5) {
  outline: 2px solid var(--v-violet);
  outline-offset: 2px;
}
#s-errors:checked ~ .panel-errors,
#s-ownership:checked ~ .panel-ownership,
#s-templates:checked ~ .panel-templates,
#s-comptime:checked ~ .panel-comptime,
#s-interop:checked ~ .panel-interop {
  display: grid;
}

/* ---------- measured against C: each row's bars charge as the current passes it ---------- */

.bench {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 64rem) {
  .bench {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
  .bench-text {
    position: sticky;
    top: calc(var(--sl-nav-height) + 2rem);
  }
}
.chart {
  display: grid;
  gap: 0.15rem;
  font-size: 0.9rem;
}
.chart-head,
.chart-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr 1fr;
  gap: 1rem;
  align-items: center;
}
.chart-head {
  color: var(--v-muted);
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--v-line);
  margin-bottom: 0.35rem;
}
.chart-row {
  padding: 0.3rem 0;
}
.prog {
  font-family: var(--v-mono);
  font-size: 0.8rem;
  color: var(--v-text);
}
.bar-cell {
  display: grid;
  grid-template-columns: 1fr 3.2rem;
  align-items: center;
  gap: 0.6rem;
}
.track {
  position: relative;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--v-raised);
}
/* where C's time is */
.track::after {
  content: "";
  position: absolute;
  left: var(--c);
  top: -0.3rem;
  bottom: -0.3rem;
  width: 2px;
  background: var(--v-muted);
  opacity: 0.6;
}
.bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: color-mix(in oklab, var(--v-violet) 45%, var(--v-muted));
}
.bar[data-faster] {
  background: var(--v-violet);
}
.num {
  font-family: var(--v-mono);
  font-size: 0.78rem;
  text-align: right;
}
:root[data-motion] .chart-row:not(.on) .bar {
  width: 0;
}
@keyframes charge {
  from { width: 0; }
}
/* the spark at the bar's head while it charges */
@keyframes spark-out {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
.chart-row.on .bar {
  animation: charge 1.1s var(--v-ease) both;
}
.chart-row.on .bar::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  bottom: -1px;
  width: 0.5rem;
  border-radius: 999px;
  background: var(--v-spark);
  animation: spark-out 1.2s both;
}

/* ---------- interop: current in from the languages Volt imports, out to the ones that call it ---------- */

.network {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.imports,
.callers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.imports li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  background: var(--v-panel);
  border: 1px solid var(--v-line);
  border-radius: 0.7rem;
  min-width: 0;
}
.imports .lang {
  font-weight: 700;
  color: var(--v-text);
  min-width: 2.6rem;
}
.imports code {
  font-size: 0.8rem;
  color: var(--v-muted);
  background: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.callers li {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}
.callers span {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--v-line);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--v-text);
  background: var(--v-panel);
}
.hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--v-violet);
  border-radius: 1rem;
  background: var(--v-panel);
  color: var(--v-text);
  font-weight: 750;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  font-variation-settings: "wdth" 88;
  justify-self: center;
}
.hub svg {
  width: 4.5rem;
  overflow: visible;
}
.hub-trace {
  fill: none;
  stroke: var(--v-mark);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hub-spark {
  fill: var(--v-spark);
}
.wires {
  display: none;
}
@media (min-width: 66rem) {
  .network {
    grid-template-columns: minmax(0, 1.1fr) 5rem auto 5rem minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    min-height: 22rem;
  }
  .imports {
    grid-template-rows: repeat(4, 1fr);
    gap: 0;
  }
  .callers {
    grid-template-rows: repeat(5, 1fr);
    gap: 0;
  }
  .imports li,
  .callers li {
    align-self: center;
  }
  .imports li {
    margin: 0.3rem 0;
  }
  .hub {
    align-self: center;
  }
  .wires {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .wires path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-width: 2px;
  }
  .wires .track {
    stroke: var(--v-line);
  }
  .wires .pulse {
    stroke: var(--v-spark);
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-dasharray: 0.16 1;
    stroke-dashoffset: 0.16;
    opacity: 0;
  }
}
@keyframes flow {
  0% { stroke-dashoffset: 0.16; opacity: 1; }
  90% { opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes hub-on {
  from { border-color: var(--v-line); }
}
.network.on .wires-in .pulse {
  animation: flow 0.8s calc(0.2s + var(--i) * 0.12s) var(--v-ease) both;
}
.network.on .hub {
  animation: hub-on 0.4s 0.95s both;
}
.network.on .wires-out .pulse {
  animation: flow 0.8s calc(1.15s + var(--i) * 0.1s) var(--v-ease) both;
}
@keyframes dim-in {
  from { opacity: 0.35; }
}
.network.on .callers li {
  animation: dim-in 0.4s calc(1.6s + var(--i) * 0.1s) both;
}
:root[data-motion] .network:not(.on) .hub {
  border-color: var(--v-line);
}
:root[data-motion] .network:not(.on) .callers li {
  opacity: 0.35;
}

/* ---------- what's in it ---------- */

.spec dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 2rem 2.5rem;
  margin: 2.5rem 0 0;
}
@media (min-width: 72rem) {
  .spec dl {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2.25rem 2rem;
  }
}
.spec dl > div {
  border-top: 1px solid var(--v-line);
  padding-top: 1rem;
}
.spec dt {
  color: var(--v-text);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}
.spec dd {
  margin: 0;
  font-size: 0.97rem;
}
.spec dt a {
  color: inherit;
}
@media (min-width: 72rem) {
  .spec.meta dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- start: the first command types itself ---------- */

.start {
  text-align: left;
}
.shell {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.25rem;
  background: var(--stage);
  border: 1px solid var(--stage-line);
  border-radius: 0.9rem;
  color: var(--stage-text);
  font-size: 0.88rem;
  line-height: 1.75;
  overflow-x: auto;
  max-width: 46rem;
}
.shell-out {
  color: var(--stage-muted);
}
.shell-out .said {
  color: #fff;
}
:root[data-motion] .shell:not(.on) .typed {
  width: 0;
}
:root[data-motion] .shell:not(.on) .shell-out .line {
  opacity: 0;
}
.shell.on .typed {
  animation: type 1.2s 0.2s steps(var(--n)) both;
}
.shell.on .shell-out .line {
  animation: appear 0.15s calc(1.6s + var(--i) * 0.28s) both;
}

/* ---------- the trace down the page, and the spark that scrolling carries along it ---------- */

.current {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}
.current path,
.current line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.current .track,
.current .tap line {
  stroke: var(--v-line);
  transition: stroke 0.3s;
}
.current .tap circle {
  fill: var(--v-line);
  transition: fill 0.3s;
}
.current .lit,
.current .tap.lit line {
  stroke: var(--v-violet);
}
.current .tap.lit circle {
  fill: var(--v-violet);
}
.current .tail {
  stroke: var(--v-spark);
  stroke-width: 2.5;
}
.current .spark {
  fill: var(--v-spark);
}
:root[data-intro] .current {
  animation: appear 0.8s 1.4s both;
}

/* a heading fills with light, left to right, as the current reaches it */
:root[data-motion] .landing .charge {
  background: linear-gradient(90deg, var(--v-text) 40%, var(--v-spark) 47%, color-mix(in oklab, var(--v-text) 28%, transparent) 54%)
    100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes fill {
  to { background-position: 0 0; }
}
:root[data-motion] .landing .charge.on {
  animation: fill 1.3s var(--v-ease) forwards;
}

/* ---------- foot ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--v-line);
  padding-top: 2rem !important;
  padding-bottom: 3rem !important;
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .landing *,
  .landing *::before,
  .landing *::after {
    animation: none !important;
    transition: none !important;
  }
}