/* 51 North — graphics and motion. Loaded after site.css (see src/layouts/Base.astro).
   The inlined diagrams, the newer graphics (tally, drive strip, lake section) and the three motion
   tiers from brand/BRAND_STYLE_GUIDE.md ("Motion"). The global prefers-reduced-motion: reduce
   switch stays at the end of site.css and still wins (!important). Use token names only. */

/* ---------- Inlined diagrams (src/components/InlineSvg.astro) ---------- */
/* The SVG files' own <style> is dropped when inlined; these are its font classes. */
.svg-inline .d { font-family: var(--font-data); }
.svg-inline .h { font-family: var(--font-display); }
.svg-inline .b { font-family: var(--font-body); }
.svg-inline .u { text-transform: uppercase; letter-spacing: 0.18em; }
.graphic__frame > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Plan legend: rows become buttons (site.js) that isolate one layer of the plan. */
.legend__hint { margin-bottom: var(--space-4); }
.legend__hint[hidden] { display: none; }
.legend li.legend__row { display: block; padding: 0; }
.legend__btn {
  display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); align-items: center;
  width: 100%; min-height: 44px; padding: var(--space-3) var(--space-2); margin: 0;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.legend__btn:hover { background: var(--bone); }
.legend__btn[aria-pressed="true"] { background: var(--bone); box-shadow: inset 3px 0 0 var(--spruce); font-weight: 600; }
.fig-plan [data-layer] { transition: opacity var(--dur-fast) var(--ease-out); }
.fig-plan .is-dim { opacity: 0.14; }

/* Amenity icons are inlined so they can draw. */
.amen-icon { display: block; width: 24px; height: 24px; margin-top: 3px; color: var(--ink); }
.amen-icon svg { width: 24px; height: 24px; }

/* Seasons: "Now" chips and today's line (site.js, initSeasonsToday). */
.season-today { font-family: var(--font-data); font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--wheat-ink); }
.season-today[hidden], .season-now[hidden] { display: none; }
.season-now {
  display: inline-block; margin-left: var(--space-2); padding: 1px 8px; vertical-align: 2px;
  font-family: var(--font-label); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--bone); background: var(--spruce); border-radius: var(--radius-sm);
}

/* Approval route (Progress): statuses come from MILESTONES in site.js. */
.js .fig-route[data-progress] [data-layer="route"] { stroke: var(--muted); stroke-dasharray: 2 6; }
.js .fig-route[data-progress] [data-layer="route-done"] { opacity: 1; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.fig-route [data-status="done"] > circle:first-of-type { fill: var(--spruce); }
.fig-route [data-status="done"] > path:not([data-part]),
.fig-route [data-status="in-progress"] > path:not([data-part]) { opacity: 0; }
.fig-route [data-status="done"] [data-part="check"],
.fig-route [data-status="in-progress"] [data-part="half"] { opacity: 1; }
.fig-route [data-status="in-progress"] > circle:first-of-type { stroke: var(--wheat-ink); }
.fig-route [data-status="not-started"] > circle:first-of-type { stroke: var(--muted); stroke-dasharray: 3 3; }
.fig-route [data-status="not-started"] > path:not([data-part]) { stroke: var(--muted); }

/* Tally sheet (The Lake · Birds): src/components/BirdTally.astro */
.tally { display: grid; gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--ink); }
.tally__num { margin-top: var(--space-3); font-family: var(--font-data); font-weight: 700; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 1; letter-spacing: -0.01em; color: var(--spruce); font-variant-numeric: tabular-nums; }
.tally__what { margin-top: var(--space-2); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; }
.tally__unit { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); font-family: var(--font-data); font-size: var(--text-sm); letter-spacing: 0.04em; }
.tally__unit-mark { flex: none; width: 1.5px; height: 22px; background: var(--spruce); }
.tally__rows { display: grid; gap: var(--space-6); align-content: start; }
.tally__label { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.tally__row--swans .tally__label { color: var(--water-ink); }
.tally__gates { display: flex; flex-wrap: wrap; gap: 14px 10px; margin-top: var(--space-3); }
.tally__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--muted); }
.tally figcaption { margin: 0; }
.gate { position: relative; flex: none; width: 30px; height: 36px; }
.gate > span { position: absolute; bottom: 2px; width: 1.5px; height: 32px; background: var(--spruce); }
.gate > span:nth-child(1) { left: 3px; }
.gate > span:nth-child(2) { left: 10px; }
.gate > span:nth-child(3) { left: 17px; }
.gate > span:nth-child(4) { left: 24px; }
.gate > .gate__x { left: 1px; top: 33px; bottom: auto; width: 40.4px; height: 1.5px; transform-origin: 0 50%; transform: rotate(-48deg); }
.tally__row--swans .gate > span { background: var(--water-ink); }
.gate--range > span { background: none !important; width: 0; border-left: 1.5px dashed var(--water-ink); }
.gate--range > .gate__x { height: 0; border-left: 0; border-top: 1.5px dashed var(--water-ink); }
@media (min-width: 900px) {
  .tally { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-8); }
  .tally figcaption { grid-column: 1 / -1; }
}

/* Drive strip (The Site · Getting here): src/components/DriveStrip.astro */
.drive-strip { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--ink); }
.drive-strip__track { position: relative; height: 132px; margin-inline: 8px; }
.drive-strip__paved { position: absolute; left: 0; top: 63px; width: var(--gravel); height: 3px; background: var(--spruce); }
.drive-strip__gravel { position: absolute; left: var(--gravel); right: 0; top: 63px; border-top: 3px dashed var(--spruce); }
.drive-strip__stop { position: absolute; left: var(--x); top: 0; display: grid; justify-items: center; gap: 2px; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.drive-strip__stop::after {
  content: ""; position: absolute; top: 58px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px;
  box-sizing: border-box; border: 2px solid var(--spruce); border-radius: 50%; background: var(--bone-2);
}
.drive-strip__stop--start { transform: none; justify-items: start; text-align: left; }
.drive-strip__stop--start::after { left: 0; background: var(--spruce); }
.drive-strip__stop--end { transform: translateX(-100%); justify-items: end; text-align: right; }
.drive-strip__stop--end::after { left: auto; right: -6.5px; margin-left: 0; border-radius: 0; background: var(--bone); }
.drive-strip__name { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); }
.drive-strip__meta { font-family: var(--font-data); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--muted); }
.drive-strip__tick { position: absolute; left: var(--x); top: 70px; width: 1px; height: 6px; background: var(--muted); }
.drive-strip__tick > span { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font-family: var(--font-data); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.drive-strip__tick--start > span { left: 0; transform: none; }
.drive-strip__gravel-label {
  position: absolute; left: var(--gravel); right: 0; top: 104px; padding-top: var(--space-1); border-top: 1px solid var(--wheat-ink);
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--wheat-ink); text-align: center; white-space: nowrap;
}
.drive-strip figcaption { margin-top: var(--space-3); max-width: var(--measure); }
@media (max-width: 699.98px) {
  /* Too narrow for labels on the line: keep the line, the stops and the end ticks, and let the caption carry the words. */
  .drive-strip__track { height: 104px; }
  .drive-strip__stop--mid .drive-strip__meta { display: none; }
  .drive-strip__stop--mid { top: 78px; }
  .drive-strip__stop--mid::after { top: -20px; }
  .drive-strip__tick, .drive-strip__gravel-label { display: none; }
}

/* Lake section (The Lake · Wind & water): src/components/LakeSection.astro */
.lake-section { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--ink); }
.lake-section__svg { display: block; width: 100%; height: auto; overflow: visible; }
.lake-section__key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-5); border-top: 1px solid var(--ink); }
.lake-section__key div { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.lake-section__key dt { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--wheat-ink); }
.lake-section__key dd { margin: var(--space-1) 0 0; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.lake-section figcaption { margin-top: var(--space-3); font-size: var(--text-xs); line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) {
  .lake-section__key { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lake-section__key div { padding-left: var(--space-4); border-left: 1px solid var(--line); border-bottom: 0; }
  .lake-section__key div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 759.98px) { .lake-section__lbl { display: none; } }

/* Progress: monthly photo slider (shown only with two or more months of photos). */
.month-scrub { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-2) var(--space-4); max-width: 520px; margin-bottom: var(--space-5); }
.month-scrub[hidden], [data-month-set][hidden] { display: none; }
.month-scrub__value { font-family: var(--font-display); font-size: var(--text-xl); }
.month-scrub input { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; accent-color: var(--spruce); }
.month-scrub__ends { grid-column: 1 / -1; display: flex; justify-content: space-between; font-family: var(--font-data); font-size: var(--text-xs); color: var(--muted); }

/* Founders: the dated stamp on the success message. */
.stamp--draw { position: relative; margin-top: var(--space-4); border-color: transparent; }
.stamp--preview { color: var(--amber-ink); }
.stamp__edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stamp__edge rect { fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ==========================================================================
   Motion (brand/BRAND_STYLE_GUIDE.md, "Motion"): three tiers.
     Tier 1 · State   150–300 ms  hover, focus, open, isolate a layer, change month.
     Tier 2 · Record  0.6–1.4 s   once per element, the first time it scrolls into view.
     Tier 3 · Fix     up to 2.4 s one per page: the parallel (Home), the lake section (The Lake).
   How it works: the finished drawing is the default CSS. Start states exist only under .js with
   prefers-reduced-motion: no-preference. Everything inside a [data-reveal] element is paused until
   site.js marks it .is-drawn (IntersectionObserver), and .is-settled removes the animations once
   they finish. No JS, no IntersectionObserver or reduced motion: the finished drawing at once.
   One ease everywhere (--ease-out). No loops, bounce, glow or blur. Never move the logo, the
   latitude-rule ticks or a photograph.
   ========================================================================== */
@keyframes fx-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
@keyframes fx-fade { from { opacity: 0; } }
@keyframes fx-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fx-stamp { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes fx-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fx-diag { from { transform: rotate(-48deg) scaleX(0); } to { transform: rotate(-48deg) scaleX(1); } }
@keyframes fx-deepen { from { transform: scaleY(0.01); } to { transform: scaleY(1); } }
@keyframes fx-route { from { stroke-dashoffset: 1; } }
@keyframes fx-sweep { from { transform: rotate(0deg); opacity: 0; } 12% { opacity: 1; } }
@keyframes fx-develop { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  /* Hold every start state until the element is in view. */
  .js [data-reveal]:not(.is-drawn), .js [data-reveal]:not(.is-drawn) * { animation-play-state: paused !important; }

  /* Tier 1: a line draws under the nav link you point at (desktop nav). */
  @media (min-width: 900px) {
    .site-nav a:not(.btn) { position: relative; border-bottom: 0; }
    .site-nav a:not(.btn)::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--spruce);
      transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease-out);
    }
    .site-nav a:not(.btn):hover::after, .site-nav a:not(.btn):focus-visible::after { transform: scaleX(1); }
    .site-nav a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); height: 2px; background: var(--wheat); }
  }

  /* Tier 1: FAQ answers open and close instead of jumping (browsers with ::details-content). */
  :root { interpolate-size: allow-keywords; } /* must be on the root to reach ::details-content */
  .faq details::details-content {
    height: 0; overflow: clip;
    transition: height var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }

  /* Tier 1: pages cross-fade; the header holds still. Browsers without View Transitions just navigate. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

  /* Tier 2: a loaded photo reveals upward once (never zooms or pans). Month-slider sets use a fade instead. */
  .js .photo-slot.is-loaded > img { animation: fx-develop 600ms var(--ease-out) 100ms both paused; }
  .js .photo-slot.is-loaded.is-drawn > img { animation-play-state: running; }
  .js [data-month-set] .photo-slot > img { animation: none; }
  .js [data-month-set] { animation: fx-fade var(--dur-base) var(--ease-out) both; }

  /* Tier 3 · Home: the parallel, drawn (surveyor's order: lake, line, point, measure). */
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="grid"] { animation: fx-fade 300ms var(--ease-out) both; }
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="lake-outline"] { animation: fx-draw 900ms var(--ease-out) both; }
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="lake-fill"] { animation: fx-fade 400ms var(--ease-out) 600ms both; }
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="lake-label"] { animation: fx-fade 300ms var(--ease-out) 900ms both; }
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="parallel"] { animation: fx-wipe 700ms var(--ease-out) 800ms both; }
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="gate"] > * { transform-box: fill-box; transform-origin: center; animation: fx-stamp 250ms var(--ease-out) 1500ms both; }
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="gate-label"] { animation: fx-fade 300ms var(--ease-out) 1600ms both; }
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="dim-line"] { animation: fx-draw 600ms var(--ease-out) 1700ms both; }
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="dim-ends"] { animation: fx-fade 200ms var(--ease-out) 2100ms both; }
  .js [data-reveal]:not(.is-settled) .fig-parallel [data-layer="dim-label"] { animation: fx-fade 200ms var(--ease-out) 2200ms both; }

  /* Tier 2 · Site and Home: the plan lays down in legend order, water first. */
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer] { animation: fx-fade 350ms var(--ease-out) both; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="park"] { animation-delay: 80ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="pathway"] { animation-delay: 160ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="setback"] { animation-delay: 240ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="phase1"] { animation-delay: 320ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="later"] { animation-delay: 400ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="commons"] { animation-delay: 480ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="trails"] { animation-delay: 560ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="boardwalk"] { animation-delay: 640ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="paddle"] { animation-delay: 720ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="wid"] { animation-delay: 800ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="parallel"] { animation-delay: 880ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="entrance"] { animation-delay: 960ms; }
  .js [data-reveal]:not(.is-settled) .fig-plan [data-layer="parcel"] { animation-delay: 1040ms; }

  /* Tier 2 · Lake: the seasons wheel draws its rings, then the hand sweeps to today. */
  .js [data-reveal]:not(.is-settled) .fig-wheel [data-layer="arc"] { animation: fx-draw 700ms var(--ease-out) both; }
  .js [data-reveal]:not(.is-settled) .fig-wheel [data-arc="fall"][data-layer="arc"] { animation-delay: 120ms; }
  .js [data-reveal]:not(.is-settled) .fig-wheel [data-arc="camp"][data-layer="arc"] { animation-delay: 240ms; }
  .js [data-reveal]:not(.is-settled) .fig-wheel [data-arc="fish"][data-layer="arc"] { animation-delay: 360ms; }
  .js [data-reveal]:not(.is-settled) .fig-wheel [data-arc="ice"][data-layer="arc"] { animation-delay: 480ms; }
  .js [data-reveal]:not(.is-settled) .fig-wheel [data-arc="dark"][data-layer="arc"] { animation-delay: 600ms; }
  .js [data-reveal]:not(.is-settled) .fig-wheel [data-layer="arc-label"] { animation: fx-fade 300ms var(--ease-out) 900ms both; }
  .js [data-reveal]:not(.is-settled) .fig-wheel[data-today] [data-layer="hand"] { animation: fx-sweep 800ms var(--ease-out) 1050ms both; }

  /* Tier 2 · Progress: stations stamp in order, then the route draws as far as the real status. */
  .js [data-reveal]:not(.is-settled) .fig-route [data-layer="station"] > * { transform-box: fill-box; transform-origin: center; animation: fx-stamp 250ms var(--ease-out) both; }
  .js [data-reveal]:not(.is-settled) .fig-route [data-milestone="county-pre-app"] > * { animation-delay: 70ms; }
  .js [data-reveal]:not(.is-settled) .fig-route [data-milestone="wid"] > * { animation-delay: 140ms; }
  .js [data-reveal]:not(.is-settled) .fig-route [data-milestone="env-heritage"] > * { animation-delay: 210ms; }
  .js [data-reveal]:not(.is-settled) .fig-route [data-milestone="concept-plan"] > * { animation-delay: 280ms; }
  .js [data-reveal]:not(.is-settled) .fig-route [data-milestone="studies"] > * { animation-delay: 350ms; }
  .js [data-reveal]:not(.is-settled) .fig-route [data-milestone="redesignation"] > * { animation-delay: 420ms; }
  .js [data-reveal]:not(.is-settled) .fig-route [data-milestone="servicing"] > * { animation-delay: 490ms; }
  .js [data-reveal]:not(.is-settled) .fig-route [data-milestone="phase-1"] > * { animation-delay: 560ms; }
  .js [data-reveal]:not(.is-settled) .fig-route[data-progress] [data-layer="route-done"] { animation: fx-route 800ms var(--ease-out) 100ms both; }

  /* Tier 2 · Home: the nine-step mini track fills left to right. */
  .js .mini-track[data-reveal]:not(.is-settled) li { animation: fx-fade 250ms var(--ease-out) both; }
  .js .mini-track[data-reveal]:not(.is-settled) li:nth-child(2) { animation-delay: 50ms; }
  .js .mini-track[data-reveal]:not(.is-settled) li:nth-child(3) { animation-delay: 100ms; }
  .js .mini-track[data-reveal]:not(.is-settled) li:nth-child(4) { animation-delay: 150ms; }
  .js .mini-track[data-reveal]:not(.is-settled) li:nth-child(5) { animation-delay: 200ms; }
  .js .mini-track[data-reveal]:not(.is-settled) li:nth-child(6) { animation-delay: 250ms; }
  .js .mini-track[data-reveal]:not(.is-settled) li:nth-child(7) { animation-delay: 300ms; }
  .js .mini-track[data-reveal]:not(.is-settled) li:nth-child(8) { animation-delay: 350ms; }
  .js .mini-track[data-reveal]:not(.is-settled) li:nth-child(9) { animation-delay: 400ms; }

  /* Tier 2 · Lake: the tally draws gate by gate while the number counts up (site.js). */
  .js .tally:not(.is-settled) .gate > span { transform-origin: 50% 100%; animation: fx-grow-y 180ms var(--ease-out) both; animation-delay: calc(var(--i) * 30ms + 100ms); }
  .js .tally:not(.is-settled) .gate > span:nth-child(2) { animation-delay: calc(var(--i) * 30ms + 125ms); }
  .js .tally:not(.is-settled) .gate > span:nth-child(3) { animation-delay: calc(var(--i) * 30ms + 150ms); }
  .js .tally:not(.is-settled) .gate > span:nth-child(4) { animation-delay: calc(var(--i) * 30ms + 175ms); }
  .js .tally:not(.is-settled) .gate > .gate__x { transform-origin: 0 50%; animation: fx-diag 200ms var(--ease-out) both; animation-delay: calc(var(--i) * 30ms + 220ms); }

  /* Tier 2 · Site: amenity icons draw as their row arrives. */
  .js [data-reveal]:not(.is-settled) .amen-icon [pathLength] { animation: fx-draw 450ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .js [data-reveal]:not(.is-settled) .amen-icon [pathLength]:nth-child(2) { animation-delay: calc(var(--i, 0) * 60ms + 40ms); }
  .js [data-reveal]:not(.is-settled) .amen-icon [pathLength]:nth-child(3) { animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
  .js [data-reveal]:not(.is-settled) .amen-icon [pathLength]:nth-child(n+4) { animation-delay: calc(var(--i, 0) * 60ms + 120ms); }

  /* Tier 2 · Site: the drive strip runs west to east; the drive-time bars grow. */
  .js .drive-strip:not(.is-settled) .drive-strip__paved { transform-origin: left center; animation: fx-grow-x 900ms var(--ease-out) both; }
  .js .drive-strip:not(.is-settled) .drive-strip__gravel { animation: fx-wipe 400ms var(--ease-out) 800ms both; }
  .js .drive-strip:not(.is-settled) .drive-strip__stop { animation: fx-fade 300ms var(--ease-out) both; }
  .js .drive-strip:not(.is-settled) .drive-strip__stop--mid { animation-delay: 600ms; }
  .js .drive-strip:not(.is-settled) .drive-strip__stop--end, .js .drive-strip:not(.is-settled) .drive-strip__gravel-label { animation: fx-fade 300ms var(--ease-out) 1100ms both; }
  .js .drive-table[data-reveal]:not(.is-settled) .bar { transform-origin: left center; animation: fx-grow-x 600ms var(--ease-out) both; animation-delay: calc(var(--row, 0) * 60ms + 150ms); }

  /* Tier 3 · Lake: the lake in section. True scale first, then depth stretched ×100. */
  .js .lake-section:not(.is-settled) [data-part="true-line"] { animation: fx-draw 500ms var(--ease-out) both; }
  .js .lake-section:not(.is-settled) [data-part="true-ends"] { animation: fx-fade 200ms var(--ease-out) 300ms both; }
  .js .lake-section:not(.is-settled) [data-part="surface"] { animation: fx-draw 400ms var(--ease-out) 500ms both; }
  .js .lake-section:not(.is-settled) [data-part="section-labels"] { animation: fx-fade 300ms var(--ease-out) 600ms both; }
  .js .lake-section:not(.is-settled) [data-part="water"] { transform-box: fill-box; transform-origin: 50% 0; animation: fx-deepen 1000ms var(--ease-out) 600ms both; }
  .js .lake-section:not(.is-settled) [data-part="avg"] { animation: fx-wipe 500ms var(--ease-out) 1600ms both; }
  .js .lake-section:not(.is-settled) [data-part="marks"] { animation: fx-fade 300ms var(--ease-out) 1900ms both; }

  /* Tier 2 · Founders: the stamp draws around the success message when it appears. */
  .js .form-success:not([hidden]) .stamp__edge rect { animation: fx-draw 500ms var(--ease-out) 150ms both; }
  .js .form-success:not([hidden]) .stamp--draw > span { animation: fx-fade 300ms var(--ease-out) 500ms both; }
}

/* The seasons hand shows only once site.js has placed it at today's date. */
.fig-wheel[data-today] [data-layer="hand"] { opacity: 1; transform-box: view-box; transform-origin: 450px 440px; transform: rotate(var(--today, 0deg)); }