/* Silver filament atmosphere (canvas, atmosphere.js) — tuned for the 2026-10-14 revision:
 * the strands frame the hero and the orbit plate, then fade to a faint texture below. */
:root {
  --color-silver-thread: #aeb5bd;
  --color-silver-crystal: #e8edf1;
  --color-silver-light: #ffffff;
  --color-silver-shadow: #515a63;
  --color-silver-haze: oklch(72% .012 260 / .06);
  --color-atmosphere-clear: oklch(15.1% .003 260 / 0);
  --color-veil-soft: oklch(15.1% .003 260 / .1);
  --color-veil-mid: oklch(15.1% .003 260 / .55);
  --color-veil-strong: oklch(15.1% .003 260 / .86);
}

body { isolation: isolate; }

.atmosphere {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  overflow: clip;
  background: radial-gradient(ellipse at 74% 42%, var(--color-silver-haze), var(--color-atmosphere-clear) 66%);
}

.atmosphere canvas { display: block; width: 100%; height: 100%; opacity: .62; transition: opacity 600ms ease; }

/* A calm patch behind the headline; the strands stay visible around the orbit plate. */
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 42% at 26% 46%, var(--color-veil-strong), var(--color-veil-mid) 58%, var(--color-atmosphere-clear) 100%),
    linear-gradient(0deg, var(--color-veil-mid), var(--color-atmosphere-clear) 32%, var(--color-veil-soft) 86%, var(--color-veil-strong));
  transition: opacity 600ms ease;
}

.atmosphere[data-scene="quiet"] canvas { opacity: .22; }

.motion-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--color-muted);
  border: 1px solid var(--color-rule-strong);
  border-radius: 50%;
  background: var(--color-paper);
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:active { transform: scale(.94); }
.motion-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@media (hover: hover) { .motion-toggle:hover { color: var(--color-ink); border-color: var(--color-silver-dim); } }
.motion-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.3; }
.motion-play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-play { display: block; }

@media (max-width: 760px) {
  .atmosphere::after {
    background: radial-gradient(ellipse 95% 38% at 48% 24%, var(--color-veil-strong), var(--color-veil-mid) 65%, var(--color-atmosphere-clear) 100%);
  }
  .atmosphere canvas { opacity: .7; }
  .atmosphere[data-scene="quiet"] canvas { opacity: .16; }
  .motion-toggle { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}