/* =============================================================================
   WeatherTS — landing page, in the app's own visual language.

   The light tokens are the app's (src/styles/theme.css). The dark ones trade
   the app's navy for the neutral grey of the window the page opens in, keeping
   its lit blue for what is on. Separation comes from opaque surfaces and 1px
   keylines, never from gradients, glass, glow or soft shadows; corners are
   3-4px.

   The type is the page's own: Overpass, the open descendant of Highway Gothic,
   the lettering of US interstate signs -- the sign the palette is drawn from --
   with Overpass Mono for figures and codes.
   ========================================================================== */

:root {
  --bar-h: 56px;
  --maxw: 1140px;

  --radius: 4px;
  --radius-sm: 3px;
  --radius-chip: 3px;

  --sans: "Overpass", system-ui, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.12s;
  --t: 0.2s;

  /* dark: neutral grey, the grey of the window around the page -- so the page
     and the window it opens in read as one surface, with no navy seam where
     one meets the other. The blue stays for what is lit. */
  --bg: #202020;
  --panel: #262626;
  --panel-solid: #262626;
  --panel-2: rgba(236, 236, 236, 0.045);
  --border: #353535;
  --border-strong: #4d4d4d;
  --text: #ececec;
  --text-dim: #b8b8b8;
  --text-faint: #8e8e8e;
  --accent: #6c9dff;
  --accent-strong: #5287f5;
  --accent-soft: rgba(108, 157, 255, 0.14);
  --accent-ring: rgba(108, 157, 255, 0.6);
  --accent-text: #8fb4ff;
  --on-accent: #121212;
  --danger: #f2715a;
  --track: #353535;
  --wash-rgb: 236, 236, 236;
}

/* light: the same sign in daylight */
:root[data-theme="light"] {
  --bg: #e3eaf3;
  --panel: #f4f7fb;
  --panel-solid: #f4f7fb;
  --panel-2: rgba(11, 21, 34, 0.045);
  --border: #c3cfdd;
  --border-strong: #90a3ba;
  --text: #0b1522;
  --text-dim: #394a60;
  --text-faint: #56687f;
  --accent: #3f7cf2;
  --accent-strong: #4d86f4;
  --accent-soft: rgba(47, 105, 220, 0.12);
  --accent-ring: rgba(47, 105, 220, 0.55);
  --accent-text: #1f55c2;
  --on-accent: #0b1522;
  --danger: #b3321f;
  --track: #c3cfdd;
  --wash-rgb: 11, 21, 34;
}

/* ─────────────  base  ───────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; }

.ic {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic--fill { fill: currentColor; stroke: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; }
.center { text-align: center; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 1px;
}

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 8px 12px;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.note {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
.note a { color: var(--accent-text); text-decoration: none; }
.note a:hover { text-decoration: underline; }

/* ─────────────  top bar  ─────────────
   An opaque strip on a hairline, like the app's panels; each section by icon
   and name. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* The page ground, not a panel: in dark it is the window's own grey. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--maxw);
  height: var(--bar-h);
  margin: 0 auto;
  padding: 0 28px;
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 6px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__brand img { width: 30px; height: auto; }
.topbar__brand b { color: var(--accent-text); font-weight: 700; }
.topbar__nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.topbar__end { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.topbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.topbar__link .ic { width: 15px; height: 15px; }
.topbar__link:hover { color: var(--text); border-color: var(--border-strong); }
/* The section on screen: a lit bar under its name, sitting on the hairline. */
.topbar__link.is-open { color: var(--text); }
.topbar__link.is-open .ic { color: var(--accent); }
.topbar__link[data-spy]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -13px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.28s var(--ease-out);
}
.topbar__link.is-open::after { transform: scaleX(1); }

.topbar__theme .ic { display: none; }
:root[data-theme-mode="auto"] .topbar__theme .ic--auto,
:root[data-theme-mode="light"] .topbar__theme .ic--light,
:root[data-theme-mode="dark"] .topbar__theme .ic--dark { display: block; }

/* ─────────────  buttons and chips  ───────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
/* The filled accent carries dark text in both themes, as in the app. */
.btn--fill { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--fill:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn--lg { height: 46px; padding: 0 22px; font-size: 15.5px; }
.btn:disabled { opacity: 0.6; cursor: default; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
/* A lit lamp: the one thing on. */
.chip--on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.chip--on::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }

.tag {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ─────────────  hero  ───────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--border);
}
.hero > .wrap { position: relative; z-index: 1; }
/* Controls sit on the ground colour, so no isobar runs through them. */
.hero .btn:not(.btn--fill), .hero .chip:not(.chip--on) { background: var(--bg); }

/* The pressure chart behind the hero: hairline isobars around a low. */
.isobars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.isobars svg { display: block; width: 100%; height: 100%; }
.isobars__system { transform-box: view-box; transform-origin: 78% 45%; }
.isobars path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}
.isobars path.is-major { opacity: 0.9; }
/* Labels break the line under them, as on a printed chart. */
.isobars text {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--text-faint);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.isobars .isobars__low { font-family: var(--sans); font-size: 44px; font-weight: 800; fill: var(--accent-text); }
.isobars .isobars__centre { font-size: 13px; fill: var(--accent-text); }
.hero__grid { display: block; }
.hero__copy { max-width: 760px; }

.hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-size: 19px;
  font-weight: 700;
}
.hero__brand img { width: 33px; height: auto; }
.hero__brand b { color: var(--accent-text); font-weight: 700; }
.hero__brand--sm { font-size: 16px; margin-bottom: 10px; }
.hero__brand--sm img { width: 26px; }

.hero__title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 800;
  max-width: 16em;
}
.hero__sub { margin: 18px 0 26px; max-width: 34em; font-size: 17px; color: var(--text-dim); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

/* keylined figures: a grid of cells split by 1px lines */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 48px 0 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts__cell { padding: 16px 18px; background: var(--panel); }
.facts dt { font-size: 12.5px; color: var(--text-faint); }
.facts dd {
  margin: 2px 0 0;
  font-family: var(--mono);  font-size: 26px; font-weight: 600; color: var(--text);
}
.facts--dl { margin: 30px 0 16px; text-align: left; }
.facts--dl dd { font-size: 15px; }

/* ─────────────  sections  ───────────── */
.section { padding: 84px 0; }
.section--band { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section--band + .section--band { border-top: 0; }

.head { max-width: 720px; margin-bottom: 36px; }
.head__label {
  margin: 0 0 10px;
  font-family: var(--mono);  font-size: 13px; font-weight: 600;
  color: var(--accent-text);
}
.head__title { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.18; letter-spacing: -0.01em; }
.head__sub { margin: 14px 0 0; color: var(--text-dim); font-size: 16.5px; max-width: 40em; }
.lede { margin: 14px 0 0; color: var(--text-dim); font-size: 17px; max-width: 42em; }
.lede a { color: var(--accent-text); }
.center .lede { margin-left: auto; margin-right: auto; margin-bottom: 26px; }

/* ─────────────  groups: the catalog's panels  ───────────── */
.groups { columns: 2 440px; column-gap: 16px; }
.group {
  break-inside: avoid;
  margin: 0 0 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.section--band .group { background: var(--bg); }
.group__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.group__head .ic { color: var(--accent); }
.group__head h3 { font-size: 15px; font-weight: 700; }
.group__list { list-style: none; margin: 0; padding: 6px 0; }
.group__list li {
  position: relative;
  padding: 7px 16px 7px 34px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.group__list li + li { border-top: 1px solid rgba(var(--wash-rgb), 0.06); }
/* The lamp of a switch that is on. */
.group__list li::before {
  content: "";
  position: absolute;
  left: 15px; top: 15px;
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--accent);
}

.road { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.road .group { margin: 0; }
/* Not on yet: an outline where the lit lamp would be. */
.group--wip .group__list li::before { background: transparent; border: 1.5px solid var(--accent); }
.group--later .group__list li::before { background: transparent; border: 1.5px dashed var(--border-strong); }

/* ─────────────  faq  ───────────── */
.head--left { margin-bottom: 18px; }
.faq { display: grid; gap: 8px; }
.faq__item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.faq__item > summary:hover { background: rgba(var(--wash-rgb), 0.04); }
.faq__item[open] { border-color: var(--border-strong); }
.faq__item[open] > summary { color: var(--accent-text); }
.faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq__item > p { margin: 0; padding: 0 16px 14px; color: var(--text-dim); font-size: 15px; max-width: 62ch; }
.faq__item a { color: var(--accent-text); }

/* ─────────────  credits  ───────────── */
.handle {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px 0 8px;
  font-family: var(--mono);  font-size: 13px; color: var(--text-dim);
}
.handle .ic, .person__nick .ic { width: 13px; height: 13px; color: #5865f2; }

.people__label { margin: 40px 0 14px; font-size: 13.5px; color: var(--text-faint); }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.person {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.person__face {
  flex: none; width: 40px; height: 40px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.person__who { display: grid; gap: 1px; min-width: 0; }
.person__name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__role { font-size: 12px; color: var(--text-faint); }
.person__nick {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-family: var(--mono);  font-size: 11.5px; color: var(--text-dim);
  overflow: hidden; white-space: nowrap;
}

/* ─────────────  community  ─────────────
   The server as a card in the page's own terms: a keylined panel, not
   Discord's embed. Its one borrowed colour is Discord's online green, on the
   same square lamp the beta chip uses. */
/* It follows the download band directly; a keyline keeps them two sections. */
#community.section--band { border-top: 1px solid var(--border); }

.invite {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  transition: border-color var(--t) var(--ease);
}
.invite:hover { border-color: var(--border-strong); }
.invite__icon {
  width: 56px; height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
  object-fit: cover;
}
.invite__body { display: grid; gap: 4px; min-width: 0; }
.invite__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 0;
  font-size: 17px; font-weight: 700;
}
.invite__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);  font-size: 12px; font-weight: 600; color: var(--text-faint);
}
.invite__tag .ic { width: 13px; height: 13px; color: #5865f2; }
.invite__stats {
  display: flex; flex-wrap: wrap; gap: 2px 14px;
  margin: 0;
  font-family: var(--mono);  font-size: 12.5px; color: var(--text-dim);
}
.invite__stats[hidden] { display: none; }
.invite__stat { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.invite__stat::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--text-faint); }
.invite__stat--online::before { background: #23a55a; animation: lamp 2.4s ease-in-out infinite; }
.invite__desc { margin: 0; font-size: 14.5px; color: var(--text-dim); }
.invite__join:hover .ic { transform: rotate(-10deg) scale(1.1); }

/* ─────────────  waitlist  ───────────── */
.waitlist { max-width: 480px; margin: 0 auto; }
.waitlist__field { display: flex; flex-wrap: wrap; gap: 8px; }
.waitlist input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.waitlist input::placeholder { color: var(--text-faint); }
.waitlist input:focus { outline: none; border-color: var(--accent); }
.waitlist input[aria-invalid="true"] { border-color: var(--danger); }
.waitlist__msg {
  min-height: 1.3em;
  margin: 12px 0 0;
  font-family: var(--mono);  font-size: 13px; color: var(--text-dim);
}
.waitlist__msg.is-ok { color: var(--accent-text); }
.waitlist__msg.is-err { color: var(--danger); }

/* ─────────────  footer  ───────────── */
.footer { padding: 44px 0 26px; background: var(--panel); border-top: 1px solid var(--border); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 32px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.footer__brand p:last-child { margin: 0; color: var(--text-faint); font-size: 14.5px; }
.footer__h { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.footer__col { display: flex; flex-direction: column; gap: 7px; }
.footer__col a { color: var(--text-dim); font-size: 14.5px; text-decoration: none; }
.footer__col a:hover { color: var(--accent-text); }
.footer__note {
  font-family: var(--mono);  font-size: 12.5px; line-height: 1.7; color: var(--text-faint);
}
.footer__base {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 18px;
  font-family: var(--mono);  font-size: 12px; color: var(--text-faint);
}

/* ─────────────  narrower screens  ───────────── */
@media (max-width: 980px) {
  .people { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Narrower: the sections drop to a second row that scrolls sideways, so
   every name stays written out. */
@media (max-width: 960px) {
  :root { --bar-h: 96px; }
  .topbar__inner { flex-wrap: wrap; height: auto; gap: 4px 10px; padding: 8px 18px 0; }
  .topbar__nav {
    order: 3;
    flex: 0 0 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .topbar__nav::-webkit-scrollbar { display: none; }
  .topbar__link[data-spy]::after { bottom: -7px; }
}

@media (max-width: 720px) {
  /* The low would sit under the text on a phone: the rings stay, fainter,
     and the labels go. */
  .isobars text { display: none; }
  .isobars path, .isobars path.is-major { opacity: 0.35; }
  .wrap { padding: 0 18px; }
  .hero { padding: 40px 0 44px; }
  .section { padding: 60px 0; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .road { grid-template-columns: 1fr; }
  .groups { columns: 1; }
  .invite { grid-template-columns: auto 1fr; }
  .invite__join { grid-column: 1 / -1; justify-content: center; }
}

/* The bar's own buttons (theme, Discord, GitHub) go to icons where the row is
   short of room: on a phone, to share the first row with the name, and on a
   small laptop, where the sections still sit on the same row. The words stay
   for screen readers. */
@media (max-width: 520px), (min-width: 961px) and (max-width: 1180px) {
  .topbar__end .topbar__link { padding: 0 9px; }
  .topbar__end .topbar__link span {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .people { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ─────────────  motion  ─────────────
   Everything that animates in is hidden only under .js, which the head
   script sets: with scripts off, the page is simply all there. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes word-in { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
@keyframes bar-in { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes lamp { 50% { opacity: 0.3; } }
@keyframes isobar-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } }
/* The system drifts, as a low does across a chart. */
@keyframes isobar-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-3%, 2%) scale(1.04); }
}

.js .topbar { animation: bar-in 0.6s var(--ease-out) both; }

.hero__title .w { display: inline-block; }
.w--lit { color: var(--accent-text); }
.js .hero__title .w { animation: word-in 0.75s var(--ease-out) both; animation-delay: calc(70ms * var(--i) + 150ms); }
.js .hero .chips { animation: rise 0.7s var(--ease-out) both; }
.js .hero__sub { animation: rise 0.7s var(--ease-out) 720ms both; }
.js .hero .actions { animation: rise 0.7s var(--ease-out) 820ms both; }
.js .hero #dl-meta { animation: rise 0.7s var(--ease-out) 900ms both; }
.js .hero .facts { animation: rise 0.8s var(--ease-out) 950ms both; }

.chip--on::before { animation: lamp 2.4s ease-in-out infinite; }

.isobars__system { animation: isobar-drift 26s ease-in-out infinite alternate; }
.js .isobars path {
  stroke-dasharray: 1;
  animation: isobar-draw 1.8s var(--ease-out) both;
  animation-delay: calc(var(--i) * 110ms + 200ms);
}
.js .isobars text { animation: fade-in 0.8s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 900ms); }

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* A group's lamps switch on one after another as it comes into view. */
.group__list li { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + 200ms); }
.group__list li::before { transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.35s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + 380ms); }
.js .group.reveal:not(.is-in) .group__list li { opacity: 0; transform: translateX(-8px); }
.js .group.reveal:not(.is-in) .group__list li::before { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); transform: scale(0.6); }

.group { transition: border-color var(--t) var(--ease); }
.group:hover { border-color: var(--border-strong); }
.group__head .ic { transition: transform 0.35s var(--ease-out); }
.group:hover .group__head .ic { transform: rotate(-12deg) scale(1.12); }

.btn { transform: translateZ(0); }
.btn:active { transform: translateY(1px); }
.btn .ic { transition: transform 0.25s var(--ease-out); }
.js-dl:hover .ic { transform: translateY(2px); }

.faq__item[open] > p { animation: rise 0.35s var(--ease-out) both; }

.facts dd { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .group.reveal .group__list li { opacity: 1; transform: none; }
}