/* ─────────────────────────────────────────────────────────────
   Nova — shared design system

   Signature: the Nova field. A light echo drifting outward from a
   single star, with the ecosystem drawn as a constellation around
   it. Dark theme is the sky; light theme is the printed chart.

   Violet is Nova itself — the mark, the star, the primary action.
   Electric blue belongs to the products. Amber is reserved for
   one job only: the "in development" status.
   ───────────────────────────────────────────────────────────── */

:root {
  --ground:      #F5F6FB;
  --panel:       #FFFFFF;
  --ink:         #0E1120;
  --ink-2:       #4B5470;
  --ink-3:       #666E8D;   /* 4.65:1 on --ground — the old #737C99 was 3.84 */
  --rule:        rgba(14,17,32,.13);
  --rule-strong: rgba(14,17,32,.26);
  --brand:         #5B3FE0;   /* text-safe violet on paper */
  --brand-graphic: #7C5CFF;
  --brand-solid:   #6B4AF5;
  --brand-soft:    rgba(124,92,255,.09);
  --on-brand:      #FFFFFF;
  --eco:           #2A6FBF;   /* text-safe blue on paper */
  --eco-graphic:   #4EA8FF;
  --warn:          #8A6212;   /* text-safe amber on paper */
  --warn-graphic:  #C8912E;
  --star:        #0E1120;
  --sky:         #F5F6FB;
  --lift:        0 6px 18px rgba(14,17,32,.10);

  /* surfaces — a card is a sheet of glass sitting above the ground */
  --card:        rgba(255,255,255,.72);
  --card-hover:  rgba(255,255,255,.94);
  --card-edge:   rgba(14,17,32,.10);
  --card-edge-hi:rgba(14,17,32,.18);
  --card-top:    rgba(255,255,255,.9);   /* 1px catch-light along the top */
  --glass:       rgba(255,255,255,.66);
  --wash:        linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));

  --shadow-1: 0 1px 2px rgba(14,17,32,.05), 0 2px 8px rgba(14,17,32,.045);
  --shadow-2: 0 2px 4px rgba(14,17,32,.05), 0 12px 28px rgba(14,17,32,.09);
  --shadow-3: 0 3px 6px rgba(14,17,32,.05), 0 24px 56px rgba(14,17,32,.14);
  --glow:     0 0 0 1px rgba(107,74,245,.22), 0 14px 40px rgba(107,74,245,.16);
  /* the primary button's sheen must move AWAY from the label colour:
     white label -> darken downward; dark label -> lighten upward */
  --btn-a:    var(--brand-solid);
  --btn-b:    color-mix(in srgb, var(--brand-solid) 90%, #000);

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:  "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:  "Cascadia Mono",Consolas,"SF Mono",Menlo,"DejaVu Sans Mono",monospace; /* reserved for code/data, not UI */

  --f-display: clamp(3rem, 8vw, 6.4rem);
  --f-lede:    clamp(1.05rem, 1.6vw, 1.2rem);
  --f-h2:      clamp(1.7rem, 3.1vw, 2.45rem);
  --f-body:    1.0325rem;
  --f-label:   .755rem;

  --band-y: clamp(58px, 8vw, 108px);
  --rail:   168px;

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 999px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.32,.72,0,1);
  --head-h:    62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #090B12;
    --panel:       #111522;
    --ink:         #F8F9FC;
    --ink-2:       #A5AEC7;
    --ink-3:       #757E9C;   /* 4.62:1 even on the raised card surface */
    --rule:        rgba(165,174,199,.16);
    --rule-strong: rgba(165,174,199,.32);
    --brand:         #9C82FF;
    --brand-graphic: #7C5CFF;
    --brand-solid:   #7C5CFF;
    --brand-soft:    rgba(124,92,255,.14);
    --on-brand:      #090B12;
    --eco:           #4EA8FF;
    --eco-graphic:   #4EA8FF;
    --warn:          #E0B15C;
    --warn-graphic:  #E0B15C;
    --star:          #C9D2E8;
    --sky:           #090B12;
    --lift:        0 8px 26px rgba(0,0,0,.5);

    /* on the dark ground the sheet is light lifted off the surface,
       not a lighter paint — so it reads as glass, not as a grey box */
    --card:        rgba(255,255,255,.032);
    --card-hover:  rgba(255,255,255,.058);
    --card-edge:   rgba(165,174,199,.14);
    --card-edge-hi:rgba(165,174,199,.30);
    --card-top:    rgba(255,255,255,.10);
    --glass:       rgba(17,21,34,.62);
    --wash:        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));

    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.28);
    --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.42);
    --shadow-3: 0 4px 10px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.58);
    --glow:     0 0 0 1px rgba(124,92,255,.34), 0 18px 48px rgba(124,92,255,.20);
    --btn-a:    color-mix(in srgb, var(--brand-solid) 86%, #fff);
    --btn-b:    var(--brand-solid);
  }
}

:root[data-theme="light"] {
  --ground:#F5F6FB; --panel:#FFFFFF;
  --ink:#0E1120; --ink-2:#4B5470; --ink-3:#666E8D;
  --rule:rgba(14,17,32,.13); --rule-strong:rgba(14,17,32,.26);
  --brand:#5B3FE0; --brand-graphic:#7C5CFF; --brand-solid:#6B4AF5;
  --brand-soft:rgba(124,92,255,.09); --on-brand:#FFFFFF;
  --eco:#2A6FBF; --eco-graphic:#4EA8FF;
  --warn:#8A6212; --warn-graphic:#C8912E;
  --star:#0E1120; --sky:#F5F6FB; --lift:0 6px 18px rgba(14,17,32,.10);
  --card:rgba(255,255,255,.72); --card-hover:rgba(255,255,255,.94);
  --card-edge:rgba(14,17,32,.10); --card-edge-hi:rgba(14,17,32,.18);
  --card-top:rgba(255,255,255,.9); --glass:rgba(255,255,255,.66);
  --wash:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  --shadow-1:0 1px 2px rgba(14,17,32,.05), 0 2px 8px rgba(14,17,32,.045);
  --shadow-2:0 2px 4px rgba(14,17,32,.05), 0 12px 28px rgba(14,17,32,.09);
  --shadow-3:0 3px 6px rgba(14,17,32,.05), 0 24px 56px rgba(14,17,32,.14);
  --glow:0 0 0 1px rgba(107,74,245,.22), 0 14px 40px rgba(107,74,245,.16);
  --btn-a:var(--brand-solid); --btn-b:color-mix(in srgb, var(--brand-solid) 90%, #000);
}
:root[data-theme="dark"] {
  --ground:#090B12; --panel:#111522;
  --ink:#F8F9FC; --ink-2:#A5AEC7; --ink-3:#757E9C;
  --rule:rgba(165,174,199,.16); --rule-strong:rgba(165,174,199,.32);
  --brand:#9C82FF; --brand-graphic:#7C5CFF; --brand-solid:#7C5CFF;
  --brand-soft:rgba(124,92,255,.14); --on-brand:#090B12;
  --eco:#4EA8FF; --eco-graphic:#4EA8FF;
  --warn:#E0B15C; --warn-graphic:#E0B15C;
  --star:#C9D2E8; --sky:#090B12; --lift:0 8px 26px rgba(0,0,0,.5);
  --card:rgba(255,255,255,.032); --card-hover:rgba(255,255,255,.058);
  --card-edge:rgba(165,174,199,.14); --card-edge-hi:rgba(165,174,199,.30);
  --card-top:rgba(255,255,255,.10); --glass:rgba(17,21,34,.62);
  --wash:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.28);
  --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.42);
  --shadow-3:0 4px 10px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.58);
  --glow:0 0 0 1px rgba(124,92,255,.34), 0 18px 48px rgba(124,92,255,.20);
  --btn-a:color-mix(in srgb, var(--brand-solid) 86%, #fff); --btn-b:var(--brand-solid);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--f-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: var(--brand-soft); }

:focus-visible { outline: 2px solid var(--brand-graphic); outline-offset: 3px; }

/* off-screen until tabbed to — the first stop for a keyboard or screen
   reader, so the nav does not have to be walked on every page */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 50;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  background: var(--brand-solid);
  color: var(--on-brand);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: top .2s var(--ease);
}

.skip-link:focus { top: 12px; }

.wrap { width: min(1140px, 91vw); margin-inline: auto; }

/* the sticky bar must not land on top of whatever you jumped to */
:target, section[id], main[id] { scroll-margin-top: calc(var(--head-h) + 20px); }

/* ── type roles ────────────────────────────────────────────── */

/* Eyebrows, buttons, links and status all read in the body sans at
   normal case. Mono with wide tracking was doing too much work and
   made ordinary words like "In development" feel like machine output. */

.label {
  font-family: var(--sans);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--f-display);
  line-height: .98;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin: 0;
}

h2.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--f-h2);
  line-height: 1.14;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0;
}

p { text-wrap: pretty; }

/* ── masthead ──────────────────────────────────────────────── */

/* Translucent by default, and it firms up once the page moves under
   it — the rule and the shadow only earn their place when there is
   something scrolled behind the bar. */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--ground) 62%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead { background: color-mix(in srgb, var(--ground) 96%, transparent); }
}

.masthead.is-scrolled {
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--ground) 60%, transparent), var(--shadow-1);
}

/* the hairline gradient that keeps the bar from looking pasted on */
.masthead::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--brand-graphic) 42%, transparent) 32%,
    color-mix(in srgb, var(--brand-graphic) 42%, transparent) 68%, transparent);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

.masthead.is-scrolled::after { opacity: .5; }

/* Fixed height on purpose. A sticky header is still in normal flow, so
   condensing it on scroll shortens the document and yanks everything
   below up by the difference — measurably 6px, right at the threshold
   where the eye is already tracking movement. The bar changes state
   through colour, rule and shadow instead, which costs no layout. */
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--head-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.32rem;
  letter-spacing: .07em;
  line-height: 1;
}

.wordmark svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: var(--brand-graphic);
  transition: transform .5s var(--ease), filter .35s var(--ease);
}

.masthead .wordmark:hover svg {
  transform: rotate(90deg) scale(1.12);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--brand-graphic) 60%, transparent));
}

.masthead .wordmark span { transition: letter-spacing .4s var(--ease); }
.masthead .wordmark:hover span { letter-spacing: .095em; }

/* the intro animates `rotate`/`scale`, not `transform` — a `forwards`
   fill on `transform` would outrank the hover rule below it forever */
.js .masthead .wordmark { opacity: 0; animation: fade-in .9s var(--ease) .15s forwards; }
.js .masthead .wordmark svg { rotate: -45deg; scale: .6; animation: mark-in 1.1s var(--ease) .2s forwards; }

@keyframes fade-in { to { opacity: 1; } }
@keyframes mark-in { to { rotate: 0deg; scale: 1; } }

/* One pill slides between the links instead of each link drawing its
   own underline. It follows the pointer and falls back to whatever is
   current when the pointer leaves. */

.masthead-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.masthead-nav a {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-3);
  padding: 7px 13px;
  border-radius: var(--r-pill);
  transition: color .22s var(--ease);
}

.masthead-nav a:hover,
.masthead-nav a.is-active,
.masthead-nav a[aria-current="page"] { color: var(--ink); }

.nav-ink {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  height: 32px;
  width: 1px;
  margin-top: -16px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow: inset 0 0 0 1px var(--card-edge);
  opacity: 0;
  transform: translate3d(0,0,0) scaleX(1);
  transform-origin: left center;
  pointer-events: none;
  transition: transform .42s var(--ease-soft), width .42s var(--ease-soft),
              opacity .28s var(--ease);
}

.nav-ink.is-on { opacity: 1; }

/* the accent dot under whatever section you are actually in */
.nav-ink::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--brand-graphic);
  opacity: 0;
  transform: scale(.2);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.nav-ink.is-anchored::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-ink { transition: opacity .2s linear; }
}

/* three links plus a wordmark is more than a phone bar holds */
@media (max-width: 660px) {
  .masthead-nav { gap: 2px; }
  .masthead-nav a { padding: 7px 10px; font-size: .885rem; }
}

@media (max-width: 480px) {
  .masthead-nav a.is-optional { display: none; }
}

/* no JS, no pill — keep the old affordance so the nav still reads */
html:not(.js) .masthead-nav a:hover,
html:not(.js) .masthead-nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 0 var(--brand-graphic);
}

/* ── buttons and links ─────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --mx/--my are written by the magnetic script; --lift-y is the hover
   rise. They are composed in one transform so neither can clobber the
   other, and the button still works with scripting off. */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: .945rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  background: transparent;
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift-y, 0px)), 0);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease,
              transform .45s var(--ease-soft), box-shadow .3s ease;
}

/* the layer is only worth promoting while a pointer is actually
   driving it — a permanent will-change keeps the memory forever */
.btn.is-magnetic { transition-duration: .2s, .2s, .2s, .12s, .3s; will-change: transform; }

.btn:hover { border-color: var(--brand-graphic); background: var(--brand-soft); --lift-y: -2px; }
.btn:active { --lift-y: 0px; transition-duration: .08s; }

.btn .arrow { font-size: .95rem; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  border-color: transparent;
  color: var(--on-brand);
  /* Dark-on-violet sits at 4.52:1 on flat --brand-solid — over AA with
     almost nothing to spare, so the gradient is only ever allowed to
     move away from the label. See --btn-a/--btn-b. */
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b) 70%);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.24);
}

/* light sweeps across on hover — one pass, no loop */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 34%,
              rgba(255,255,255,.26) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-soft);
}

.btn-primary:hover {
  color: var(--on-brand);
  box-shadow: var(--glow), var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.3);
}

.btn-primary:hover::after { transform: translateX(120%); }

/* the quiet second action — glass, not an outline */
.btn-ghost {
  border-color: var(--card-edge);
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.btn-ghost:hover {
  border-color: var(--card-edge-hi);
  background: var(--card-hover);
  box-shadow: var(--shadow-2);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: .945rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease;
}

.link-more span { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.link-more:hover { border-bottom-color: var(--brand); }
.link-more:hover span { transform: translateX(3px); }

/* ── status ────────────────────────────────────────────────── */
/* semantic, and deliberately separate from the brand accents */

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-3);
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.status-alpha { color: var(--brand); }
.status-alpha::before { background: var(--brand-graphic); }

.status-dev { color: var(--warn); }
.status-dev::before { background: var(--warn-graphic); }

.status-production { color: var(--eco); }
.status-production::before { background: var(--eco-graphic); }

.status-planned::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ── bands ─────────────────────────────────────────────────── */

.band { border-top: 1px solid var(--rule); padding-block: var(--band-y); }

.band-grid {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 60px);
  align-items: start;
}

.band-grid > .label { padding-top: .48em; }

@media (max-width: 880px) {
  .band-grid { grid-template-columns: 1fr; gap: 18px; }
  .band-grid > .label { padding-top: 0; }
}

/* gap, not sibling margins — a later `.prose { margin: 0 }` has equal
   specificity and would silently cancel a `> * + *` rule */
.band-body { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }

.prose { max-width: 62ch; color: var(--ink-2); margin: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

.prose a, .entry-copy a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  line-height: 1.24;
  letter-spacing: -.016em;
  color: var(--ink);
  max-width: 24ch;
  margin: 0;
  text-wrap: balance;
}

/* ── product marks ─────────────────────────────────────────── */

.mark {
  width: 26px;
  height: 26px;
  display: block;
  flex: none;
  fill: none;
  stroke: var(--eco-graphic);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── footer ────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--rule); padding-block: 40px 52px; }

/* the rule belongs to the footer, not to the paragraph — hung off the
   note it stopped dead at 72ch and read like a stray underline */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}

.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }

.footer-links a {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .18s ease;
}

.footer-links a:hover { color: var(--ink); }

.footer-note {
  margin: 26px 0 0;
  font-size: .85rem;
  line-height: 1.62;
  color: var(--ink-3);
  max-width: 72ch;
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE
   ═══════════════════════════════════════════════════════════ */

/* ── hero ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(780px, calc(100vh - var(--head-h)));
  padding-bottom: 40px;
}

@supports (height: 100svh) {
  .hero { min-height: min(780px, calc(100svh - var(--head-h))); }
}

/* the field stays; it is faded at the edges so it reads as depth
   behind the page rather than as a picture on it */
#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
  opacity: .9;
  -webkit-mask-image: radial-gradient(120% 96% at 62% 44%, #000 24%, transparent 78%);
          mask-image: radial-gradient(120% 96% at 62% 44%, #000 24%, transparent 78%);
}

/* one soft violet bloom under the copy, and a floor fade into the
   next section so the hero ends without a hard rule */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  inset: -20% -10% auto -30%;
  height: 90%;
  background: radial-gradient(52% 58% at 30% 42%,
    color-mix(in srgb, var(--brand-graphic) 13%, transparent), transparent 70%);
  filter: blur(6px);
}

.hero::after {
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, var(--ground));
}

.hero-inner { padding-block: clamp(56px, 8vw, 104px); }

/* the eyebrow, promoted to a real object you can click */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 6px 6px 6px 13px;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-pill);
  background: var(--card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease), color .3s var(--ease);
}

.pill:hover {
  border-color: color-mix(in srgb, var(--brand-graphic) 42%, transparent);
  background: var(--card-hover);
  box-shadow: var(--shadow-2);
  color: var(--ink);
}

.pill-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-graphic);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-graphic) 55%, transparent);
  animation: beacon 3.4s var(--ease) infinite;
}

@keyframes beacon {
  0%, 62%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-graphic) 50%, transparent); }
  30%           { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-graphic) 0%, transparent); }
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
  font-size: .8rem;
  white-space: nowrap;
}

.pill-tag span { transition: transform .3s var(--ease); }
.pill:hover .pill-tag span { transform: translateX(3px); }

.hero .display { margin-bottom: 26px; max-width: 12ch; }

/* the second clause of the headline sits back, so the eye lands on
   the first — hierarchy inside a single sentence */
.display .soft {
  display: block;
  color: var(--ink-3);
}

.hero-lede {
  font-size: var(--f-lede);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 40ch;
  margin: 0 0 36px;
}

/* three numbers the ecosystem page already backs up */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.hero-facts li {
  padding: 2px 30px 2px 0;
  margin-right: 30px;
  border-right: 1px solid var(--rule);
}

.hero-facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.hero-facts b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hero-facts span {
  display: block;
  margin-top: 2px;
  font-size: .855rem;
  color: var(--ink-3);
}

/* dividers only work while the row is one row — once it wraps they
   leave a rule dangling in mid-air, so the small screen drops them */
@media (max-width: 560px) {
  .hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    margin-top: 38px;
  }
  .hero-facts li { border: 0; padding: 0; margin: 0; }
  .hero-facts b { font-size: 1.5rem; }
}

/* the pill has to stay one line; the tag is the part that can go */
@media (max-width: 520px) {
  .pill { padding: 6px 13px; font-size: .8rem; }
  .pill-tag { display: none; }
  .pill::after {
    content: "→";
    color: var(--brand);
    transition: transform .3s var(--ease);
  }
  .pill:hover::after { transform: translateX(3px); }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: .8;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}

.scroll-cue:hover { color: var(--ink-2); opacity: 1; }

.scroll-cue i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, transparent, var(--rule-strong));
  overflow: hidden;
}

.scroll-cue i::after {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background: var(--brand-graphic);
  animation: cue 2.6s var(--ease-soft) infinite;
}

@keyframes cue {
  0%        { transform: translateY(-14px); opacity: 0; }
  35%, 65%  { opacity: 1; }
  100%      { transform: translateY(34px); opacity: 0; }
}

@media (max-width: 900px) { .scroll-cue { display: none; } }
@media (max-width: 720px) { .hero { min-height: 0; padding-bottom: 0; } }

/* ── 404 ───────────────────────────────────────────────────── */
/* Same furniture as the hero, minus the field — a dead end should
   look like the site, not like a server default. */

.notfound {
  position: relative;
  isolation: isolate;
  overflow: hidden;   /* the bloom below bleeds past the right edge */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(620px, calc(100vh - var(--head-h)));
  padding-block: clamp(64px, 10vw, 120px);
}

@supports (height: 100svh) {
  .notfound { min-height: min(620px, calc(100svh - var(--head-h))); }
}

.notfound::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -10% auto -30%;
  height: 90%;
  background: radial-gradient(48% 56% at 32% 44%,
    color-mix(in srgb, var(--brand-graphic) 12%, transparent), transparent 70%);
  pointer-events: none;
}

.notfound .label { margin-bottom: 24px; }
.notfound .display { margin-bottom: 26px; max-width: 12ch; }
.notfound .hero-lede { margin-bottom: 36px; max-width: 44ch; }

@media (max-width: 720px) { .notfound { min-height: 0; } }

/* ── section heads ─────────────────────────────────────────── */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.section-head .label { margin-bottom: 14px; }
.section-head .section-title { max-width: 18ch; }
.section-head p.prose { margin-top: 14px; max-width: 46ch; }
.section-head .link-more { padding-bottom: 6px; }

/* ── product cards ─────────────────────────────────────────── */

.featured { padding-block: clamp(20px, 3vw, 34px) var(--band-y); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.card-lead { grid-column: 1 / -1; }

@media (max-width: 940px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-md);
  background: var(--card);
  background-image: var(--wash);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  overflow: hidden;
  transform: translate3d(0,0,0);
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease),
              border-color .4s var(--ease), background-color .4s var(--ease);
}

.card > * { position: relative; z-index: 1; }

/* pointer-follow wash — the card lights where you are pointing */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0%),
    color-mix(in srgb, var(--brand-graphic) 17%, transparent), transparent 64%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

/* catch-light along the top edge, brightest in the middle */
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-top) 40%, var(--card-top) 60%, transparent);
  opacity: .8;
  pointer-events: none;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--card-edge-hi);
  background-color: var(--card-hover);
  box-shadow: var(--shadow-3);
}

.card:hover::before { opacity: 1; }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 11px;
  border: 1px solid var(--card-edge);
  background: color-mix(in srgb, var(--eco-graphic) 9%, transparent);
  box-shadow: inset 0 1px 0 var(--card-top);
  transition: transform .5s var(--ease-soft), background-color .4s var(--ease),
              border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.card:hover .card-icon {
  transform: translateY(-2px) scale(1.05);
  background: color-mix(in srgb, var(--eco-graphic) 16%, transparent);
  border-color: color-mix(in srgb, var(--eco-graphic) 34%, transparent);
  box-shadow: inset 0 1px 0 var(--card-top),
              0 6px 18px color-mix(in srgb, var(--eco-graphic) 22%, transparent);
}

.card-icon .mark { width: 22px; height: 22px; }

.card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -.014em;
  margin: 0 0 7px;
  color: var(--ink);
}

.card p { margin: 0; color: var(--ink-2); font-size: .945rem; line-height: 1.55; }

.card-body { flex: 1 1 auto; }

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.card-go {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--card-edge);
  color: var(--ink-3);
  font-size: .9rem;
  line-height: 1;
  transition: transform .4s var(--ease-soft), color .3s var(--ease),
              border-color .3s var(--ease), background-color .3s var(--ease);
}

.card:hover .card-go {
  transform: translateX(3px);
  color: var(--on-brand);
  border-color: transparent;
  background: var(--brand-solid);
}

/* the lead card carries the extra weight: bigger type, a plate */
.card-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: stretch;
  gap: clamp(24px, 4vw, 52px);
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-lg);
}

.card-lead .card-main { display: flex; flex-direction: column; gap: 18px; }

.card-lead h3 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  letter-spacing: -.022em;
  margin: 0 0 10px;
}

.card-lead .card-body p { font-size: var(--f-lede); line-height: 1.55; max-width: 40ch; }

.card-lead .card-foot { margin-top: auto; }

@media (max-width: 860px) {
  .card-lead { grid-template-columns: 1fr; }
  .card-lead .card-plate { order: -1; }
}

/* an abstract plate, not a fake screenshot */
.card-plate {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-md);
  background:
    radial-gradient(70% 80% at 50% 108%, color-mix(in srgb, var(--eco-graphic) 20%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-graphic) 8%, transparent), transparent 60%);
  box-shadow: inset 0 1px 0 var(--card-top);
}

/* faint grid, so the plate has a surface */
.card-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 46%, #000, transparent 76%);
          mask-image: radial-gradient(80% 70% at 50% 46%, #000, transparent 76%);
  opacity: .7;
}

.card-plate .mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  stroke-width: .7;
  opacity: .55;
  transition: transform .9s var(--ease-soft), opacity .5s var(--ease);
}

.card-lead:hover .card-plate .mark {
  transform: translate(-50%, -50%) rotate(8deg) scale(1.05);
  opacity: .8;
}

/* rotating sheen inside the plate */
.card-plate::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--brand-graphic) 16%, transparent) 40deg,
    transparent 120deg, transparent 360deg);
  animation: sweep 18s linear infinite;
  opacity: .55;
  pointer-events: none;
}

@keyframes sweep { to { transform: rotate(360deg); } }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }

/* No fill. `--ink` is near-white in the dark theme, so a tint of it
   lifted the card underneath the chip and dropped this text to 4.28:1.
   The border alone reads as a chip and the text clears AA on both
   themes (4.65 dark / 4.86 light). */
.tags li {
  padding: 4px 10px;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-pill);
  font-size: .82rem;
  color: var(--ink-3);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.card:hover .tags li { color: var(--ink-2); border-color: var(--card-edge-hi); }

/* ── the beliefs ───────────────────────────────────────────── */

.creed { padding-block: var(--band-y); border-top: 1px solid var(--rule); }

.creed-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

@media (max-width: 760px) { .creed-grid { grid-template-columns: 1fr; } }

.tenet {
  position: relative;
  overflow: hidden;
  padding: 24px 26px 26px;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-md);
  background: var(--card);
  background-image: var(--wash);
  box-shadow: var(--shadow-1);
  transition: transform .5s var(--ease-soft), box-shadow .45s var(--ease),
              border-color .4s var(--ease), background-color .4s var(--ease);
}

.tenet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-graphic), transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s var(--ease-soft);
}

.tenet:hover {
  transform: translateY(-3px);
  border-color: var(--card-edge-hi);
  background-color: var(--card-hover);
  box-shadow: var(--shadow-2);
}

.tenet:hover::before { transform: scaleY(1); }

.tenet-num {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--brand);
  margin-bottom: 14px;
  opacity: .75;
  transition: opacity .4s var(--ease);
}

.tenet:hover .tenet-num { opacity: 1; }

.tenet b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.18rem;
  letter-spacing: -.012em;
  color: var(--ink);
  margin-bottom: 6px;
}

.tenet span { display: block; color: var(--ink-2); font-size: .945rem; line-height: 1.55; }

/* the section head already owns the space beneath it */
.creed .section-head .statement { margin: 0; max-width: 20ch; }

/* ── closing invitation ────────────────────────────────────── */

.cta { padding-block: 0 clamp(56px, 7vw, 96px); }

.cta-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding: clamp(32px, 4.4vw, 56px);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-lg);
  background: var(--card);
  background-image: var(--wash);
  box-shadow: var(--shadow-2);
}

.cta-panel::before {
  content: "";
  position: absolute;
  inset: -60% -10% auto -10%;
  height: 150%;
  background: radial-gradient(46% 50% at 22% 40%,
    color-mix(in srgb, var(--brand-graphic) 16%, transparent), transparent 72%);
  pointer-events: none;
}

.cta-panel > * { position: relative; }

.cta-copy .section-title { margin-bottom: 10px; max-width: 16ch; }
.cta-copy p { margin: 0; color: var(--ink-2); max-width: 42ch; }

/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM PAGE
   ═══════════════════════════════════════════════════════════ */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(72px, 11vw, 148px);
}

.page-hero .label { margin-bottom: 22px; }

.page-hero .display { font-size: clamp(2.5rem, 6vw, 4.6rem); max-width: 14ch; margin-bottom: 26px; }

.page-hero .statement { max-width: 30ch; color: var(--ink-2); }

.entry { border-top: 1px solid var(--rule); padding-block: clamp(56px, 8vw, 104px); }

.entry-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }

.entry-head .mark { width: 30px; height: 30px; }

.entry-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.024em;
  margin: 0;
  color: var(--ink);
}

.entry-lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--ink-2);
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: 34ch;
  text-wrap: balance;
}

/* picture on the left, copy on the right */
.entry-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

@media (max-width: 900px) { .entry-body { grid-template-columns: 1fr; } }

.entry-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.entry-copy p { margin: 0; color: var(--ink-2); }

/* the one line the product would put on a poster */
.pull {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
  border-left: 2px solid var(--brand-graphic);
  padding: 2px 0 2px 18px;
  text-wrap: balance;
}

/* subsections inside one product */

.entry-sub {
  margin-top: clamp(38px, 5vw, 64px);
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.caps { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }

@media (max-width: 760px) { .caps { grid-template-columns: 1fr; } }

.cap {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 4px clamp(12px, 2vw, 22px);
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
}

.cap dt { font-weight: 600; font-size: .95rem; color: var(--ink); letter-spacing: -.005em; }
.cap dd { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.5; }

@media (max-width: 560px) { .cap { grid-template-columns: 1fr; } }

/* things you can just ask for */

.prompts { margin: 0; padding: 0; list-style: none; }

.prompts li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-style: italic;
  color: var(--ink);
}

.prompts li:last-child { border-bottom: 1px solid var(--rule); }

.prompts li::before {
  content: "›";
  font-family: var(--sans);
  font-style: normal;
  color: var(--brand);
  flex: none;
}

/* what it plugs into */

.connections { display: flex; flex-wrap: wrap; gap: 12px; }

.connection {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 11px 15px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: .93rem;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease,
              transform .2s cubic-bezier(.22,.61,.36,1);
}

.connection b { color: var(--ink); font-weight: 600; }
.connection .mark { width: 18px; height: 18px; }

.connection:hover {
  border-color: var(--brand-graphic);
  background: var(--brand-soft);
  color: var(--ink);
  transform: translateY(-2px);
}

/* status and the way out */

.entry-foot {
  margin-top: clamp(34px, 4.5vw, 56px);
  border-top: 1px solid var(--rule-strong);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.entry-status { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.plate {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

@media (max-width: 700px) { .plate { aspect-ratio: 4 / 3; } }

.plate canvas { display: block; width: 100%; height: 100%; }

/* holding the space until a real screenshot exists */
.plate.is-empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: var(--rule-strong);
  background: transparent;
}

.plate.is-empty span {
  color: var(--ink-3);
  font-size: .92rem;
  letter-spacing: .01em;
}

/* the lighter tier */

.also-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }

@media (max-width: 820px) { .also-list { grid-template-columns: 1fr; } }

.also-item { border-top: 1px solid var(--rule-strong); padding-top: 16px; }

.also-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.18rem;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  color: var(--ink);
}

.also-item p { margin: 0 0 10px; color: var(--ink-2); font-size: .95rem; }

/* ── entrance motion ───────────────────────────────────────── */
/* nothing is hidden unless scripting is available to bring it back */

/* Entrances ride the `translate` property, never `transform`.
   `.reveal.seen > *` outranks `.card:hover` on specificity, so a
   settled `transform: none` here would quietly kill every hover lift
   underneath it. Keeping the two on separate properties means they
   compose instead of competing. */

.js .rise { opacity: 0; translate: 0 16px; }
.js .reveal { opacity: 0; translate: 0 20px; }

.js .lit .rise,
.js .reveal.seen {
  opacity: 1;
  translate: none;
  transition: opacity .8s var(--ease), translate .9s var(--ease-soft);
}

.js .lit .rise:nth-child(1) { transition-delay: .06s; }
.js .lit .rise:nth-child(2) { transition-delay: .14s; }
.js .lit .rise:nth-child(3) { transition-delay: .24s; }
.js .lit .rise:nth-child(4) { transition-delay: .34s; }
.js .lit .rise:nth-child(5) { transition-delay: .44s; }
.js .lit .rise:nth-child(6) { transition-delay: .54s; }

/* the hero's own furniture arrives after the copy has settled */
.js .hero .scroll-cue { opacity: 0; animation: fade-in 1s var(--ease) 1.5s forwards; }

/* children of a revealed block come in one after another — the delay
   is on the child, so the parent can stay a plain .reveal */
.js .stagger > * {
  opacity: 0;
  translate: 0 22px;
}

.js .reveal.seen.stagger > * {
  opacity: 1;
  translate: none;
  transition: opacity .75s var(--ease), translate .85s var(--ease-soft);
}

.js .reveal.seen.stagger > :nth-child(1) { transition-delay: .04s; }
.js .reveal.seen.stagger > :nth-child(2) { transition-delay: .12s; }
.js .reveal.seen.stagger > :nth-child(3) { transition-delay: .20s; }
.js .reveal.seen.stagger > :nth-child(4) { transition-delay: .28s; }
.js .reveal.seen.stagger > :nth-child(5) { transition-delay: .36s; }
.js .reveal.seen.stagger > :nth-child(6) { transition-delay: .44s; }

.js .entry .plate { opacity: 0; translate: 0 24px; }
.js .entry.seen .plate {
  opacity: 1;
  translate: none;
  transition: opacity 1s var(--ease) .1s, translate 1s var(--ease-soft) .1s;
}

@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .reveal, .js .lit .rise, .js .reveal.seen,
  .js .stagger > *, .js .reveal.seen.stagger > *,
  .js .entry .plate, .js .entry.seen .plate,
  .js .hero .scroll-cue {
    opacity: 1;
    translate: none;
    transform: none;
    transition: none;
    animation: none;
  }
  .js .masthead .wordmark { opacity: 1; animation: none; }
  .js .masthead .wordmark svg { rotate: 0deg; scale: 1; transform: none; animation: none; }

  /* movement goes; colour, shadow and the pointer wash stay, so the
     page is still legibly interactive */
  .btn, .btn:hover, .card:hover, .tenet:hover,
  .card:hover .card-icon, .card:hover .card-go,
  .masthead .wordmark:hover svg { transform: none; }
  .card-plate::after, .pill-dot, .scroll-cue i::after { animation: none; }
  .tenet::before { transform: scaleY(1); }

  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}