/* Motion, futures and the space atlases.
   Rule of thumb: an animation's *starting* state lives inside
   `prefers-reduced-motion: no-preference`, so reduced-motion users always see
   finished, static content. */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --night: #1B1D2E;
  --night-2: #2A2440;
  --starlight: rgba(251, 246, 236, .78);
  --starlight-dim: rgba(251, 246, 236, .5);
}

/* ---------------------------------------------------------------- Reveal */
@media (prefers-reduced-motion: no-preference) {
  .rv:not(.is-in) { opacity: 0; translate: 0 18px; }
  .rv {
    transition: opacity .6s var(--ease-out) var(--d, 0ms), translate .75s var(--spring) var(--d, 0ms),
      transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .wb-era.rv:not(.is-in) { translate: 40px 0; }
}

/* ---------------------------------------------------------------- View transitions */
@media (prefers-reduced-motion: no-preference) {
  .masthead { view-transition-name: masthead; }
  .app-nav { view-transition-name: app-nav; }
  ::view-transition-old(root) { animation: vt-out .22s ease-in both; }
  ::view-transition-new(root) { animation: vt-in .5s var(--ease-out) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px) scale(.995); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------------------------------------------------------------- Certainty for futures */
.nasha-status-card--planned { background: var(--color-brass); color: var(--color-canvas-alt); }
.nasha-status-card--forecast { background: #34406A; color: var(--color-canvas-alt); }
.nasha-status-card--speculative { background: transparent; color: var(--color-rose); box-shadow: inset 0 0 0 1px var(--color-rose); }
.ev__cert {
  display: inline-block; padding: 1px 6px; margin-right: 4px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px;
  background: var(--color-ink); color: var(--color-canvas-alt);
}
.ev--planned .ev__cert { background: var(--color-brass); }
.ev--forecast .ev__cert { background: #34406A; }
.ev--speculative .ev__cert { background: var(--color-rose); }
.ev.ev--future, .chron-card--future { border-style: dashed; }
.ev.ev--speculative { background: color-mix(in srgb, var(--color-surface) 88%, #E8A4A0); }
.chron-card--future { background: color-mix(in srgb, var(--color-surface) 92%, #C9C3E6); }

/* ---------------------------------------------------------------- Wallbook: the future */
.wb-band.wb-band--future {
  background:
    radial-gradient(circle, var(--starlight) 0 1px, transparent 1.6px) 0 0 / 97px 83px,
    radial-gradient(circle, var(--starlight-dim) 0 .8px, transparent 1.3px) 41px 29px / 61px 57px,
    radial-gradient(circle, rgba(232, 164, 160, .6) 0 1px, transparent 1.8px) 13px 61px / 173px 149px,
    linear-gradient(180deg, var(--night-2), var(--night));
}
.wb-era--future .wb-era__name { color: var(--color-canvas-alt); }
.wb-era--future .wb-era__tag { color: var(--color-ink-on-dark-muted); }
.wb-era--future .nasha-eyebrow { color: var(--color-peach); }
.wb-era--future .wb-era__scale { color: var(--color-peach); }
.wb-tick--future { border-color: var(--starlight-dim); }
.wb-tick--future span { color: var(--color-peach); }
.wb-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--color-rose); z-index: 4; pointer-events: none; }
.wb-now::before {
  content: ""; position: absolute; top: 98px; left: -7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-rose); box-shadow: 0 0 0 0 rgba(232, 164, 160, .7);
}
.wb-now__tag {
  position: absolute; top: 112px; left: 8px; white-space: nowrap; padding: 3px 9px; border-radius: 999px;
  background: var(--color-rose); color: var(--color-canvas-alt); font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: .1em; text-transform: uppercase;
}
.wb-now__tag--ahead { top: 136px; background: none; padding-left: 2px; color: var(--color-peach); }
@media (prefers-reduced-motion: no-preference) {
  .wb-now::before { animation: beacon 2.2s var(--ease-out) infinite; }
}
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(232, 164, 160, .75); } 100% { box-shadow: 0 0 0 22px rgba(232, 164, 160, 0); } }

/* Chapter HUD (under the wall) */
.wb-hud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 28px; transition: opacity .3s; }
.wb-hud.is-idle { opacity: .35; }
.wb-hud__ch { color: var(--color-brass); }
.wb-hud__name { font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600; font-size: 1.25rem; color: var(--color-ink-strong); }
.wb-hud__year { color: var(--color-ink-soft); }
.wb-hud__flag { padding: 1px 8px; border-radius: 999px; color: var(--color-rose); box-shadow: inset 0 0 0 1px var(--color-rose); }
@media (prefers-reduced-motion: no-preference) {
  .wb-hud.is-swap .wb-hud__name, .wb-hud.is-swap .wb-hud__ch { animation: hud-in .55s var(--ease-out) both; }
  .wb-hud.is-swap .wb-hud__ch { animation-delay: 60ms; }
}
@keyframes hud-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

/* ---------------------------------------------------------------- Chronicle: the future */
.chron-now { margin: 0; padding: var(--space-5) var(--gutter-page) var(--space-3); text-align: center; background: linear-gradient(180deg, var(--color-canvas), var(--night-2)); }
.chron-now span {
  display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--color-rose); color: var(--color-canvas-alt);
  font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: .12em; text-transform: uppercase;
}
.chron-now p { margin: 10px auto 0; max-width: 32ch; color: var(--color-ink-on-dark-muted); font-size: var(--text-small); }
@media (prefers-reduced-motion: no-preference) { .chron-now span { animation: beacon 2.2s var(--ease-out) infinite; } }
.chron-era.chron-era--future, .chron-era.chron-era--future:nth-of-type(even) {
  background:
    radial-gradient(circle, var(--starlight-dim) 0 1px, transparent 1.6px) 0 0 / 83px 97px,
    linear-gradient(180deg, var(--night-2), var(--night));
}
.chron-era--future h2 { color: var(--color-canvas-alt); }
.chron-era--future .tag, .chron-era--future > .mono { color: var(--color-ink-on-dark-muted); }
.chron-era--future .nasha-eyebrow { color: var(--color-peach); }
.chron-item--future::before { background: var(--night); box-shadow: 0 0 0 2px var(--c); }

/* Mobile hero: the frame gently turns */
@media (prefers-reduced-motion: no-preference) {
  .hero__art ellipse { transform-box: view-box; transform-origin: 150px 118px; animation: tilt 14s ease-in-out infinite alternate; }
  .hero__art circle { animation: twinkle 3.2s ease-in-out infinite alternate; }
  .hero__art circle:nth-of-type(2n) { animation-delay: -1.4s; }
}
@keyframes tilt { to { transform: rotate(-9deg) scale(1.04); } }
@keyframes twinkle { to { opacity: .35; } }

/* ---------------------------------------------------------------- Sheet */
.sheet { transition: transform .5s var(--ease-out), opacity .2s; }
@media (min-width: 900px) { .sheet { transition: transform .55s var(--ease-out), opacity .25s; } }
@media (prefers-reduced-motion: no-preference) {
  .sheet__content--next { animation: from-right .5s var(--ease-out) both; }
  .sheet__content--prev { animation: from-left .5s var(--ease-out) both; }
  .sheet__content--in > * { animation: rise .55s var(--ease-out) both; }
  .sheet__content--in > :nth-child(2) { animation-delay: 40ms; }
  .sheet__content--in > :nth-child(3) { animation-delay: 80ms; }
  .sheet__content--in > :nth-child(4) { animation-delay: 120ms; }
  .sheet__content--in > :nth-child(5) { animation-delay: 160ms; }
  .sheet__content--in > :nth-child(n+6) { animation-delay: 200ms; }
  .sheet .medallion { animation: medal-in .7s var(--spring) both; }
}
@keyframes from-right { from { opacity: 0; transform: translateX(36px); } }
@keyframes from-left { from { opacity: 0; transform: translateX(-36px); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes medal-in { from { opacity: 0; transform: scale(.6) rotate(-25deg); } }

.tourbar { position: relative; overflow: hidden; flex-wrap: wrap; }
.tourbar__actions { display: inline-flex; gap: 2px; }
.tourbar__progress { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 100%); background: var(--color-peach); border-radius: 0 3px 3px 0; }
.tourbar__timer { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--color-rose); transform-origin: left; transform: scaleX(1); }
.tourbar.is-auto .nasha-btn[data-act="auto"] { color: var(--color-peach); }
@media (prefers-reduced-motion: no-preference) {
  .tourbar__progress { animation: grow-progress .8s var(--ease-out) both; }
  .tourbar__timer { animation: tour-timer var(--auto) linear both; }
}
@keyframes grow-progress { from { width: calc(var(--pp) * 100%); } }
@keyframes tour-timer { from { transform: scaleX(0); } }

/* ---------------------------------------------------------------- Tours page */
.page--wide { max-width: 1160px; }
.tour-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.tour-card { transition: transform .35s var(--spring), box-shadow .3s var(--ease); }
.tour-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-stamp); }
.tour-card__strip { display: flex; align-items: center; margin: 6px 0 2px; overflow: hidden; }
.tour-card__strip i { flex: 1 1 8px; min-width: 4px; height: 0; border-top: 1px dashed var(--color-border); }
.medallion--sm { width: 28px; height: 28px; flex: none; }
.medallion--sm .ico { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .tour-card:hover .medallion--sm { animation: hop .5s var(--spring); }
  .tour-card:hover .medallion--sm:nth-of-type(2) { animation-delay: 40ms; }
  .tour-card:hover .medallion--sm:nth-of-type(3) { animation-delay: 80ms; }
  .tour-card:hover .medallion--sm:nth-of-type(4) { animation-delay: 120ms; }
  .tour-card:hover .medallion--sm:nth-of-type(5) { animation-delay: 160ms; }
  .tour-card:hover .medallion--sm:nth-of-type(n+6) { animation-delay: 200ms; }
}
@keyframes hop { 40% { transform: translateY(-6px); } }

/* ---------------------------------------------------------------- Quiz */
@media (prefers-reduced-motion: no-preference) {
  .quiz__opt.is-right { animation: pop .55s var(--spring); }
  .quiz__opt.is-wrong { animation: shake .45s ease; }
  .quiz__opt .reveal { animation: rise .5s var(--ease-out) both; }
}
@keyframes pop { 40% { transform: scale(1.04); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------------------------------------------------------------- About */
.stat-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* ---------------------------------------------------------------- Atlas: modes */
.atlas-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 var(--gutter-page) var(--space-2); }
.atlas-top .filterbar { flex: 1 1 0; min-width: 0; }
.atlas-top .filterbar .chips { padding-left: 0; }
.seg button[aria-selected="true"] { background: var(--color-ink); color: var(--color-canvas-alt); }
.scrubber__jumps { display: flex; flex-wrap: wrap; gap: 6px; }
.scrubber__jumps .chip { min-height: 32px; font-size: var(--text-mono-xs); }
.atlas__list .is-offmap { opacity: .62; }
.atlas__map[data-mode="solar"], .atlas__map[data-mode="cosmos"] {
  background: radial-gradient(ellipse at 50% 45%, var(--night-2), var(--night) 70%);
  border-color: var(--night);
  overflow: hidden;
}
.atlas__map[data-mode="cosmos"] svg { max-height: min(78dvh, var(--map-h, 78dvh)); margin: 0 auto; }
.atlas__map svg { max-height: var(--map-h, none); margin: 0 auto; } /* fitted to the viewport by atlas.js on desktop */
.pin--new circle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .pin--new circle { animation: pin-pop .6s var(--spring) both; }
  .atlas__route { stroke-dasharray: .006 .004; animation: march 40s linear infinite; }
}
@keyframes pin-pop { from { transform: scale(0); } }
@keyframes march { to { stroke-dashoffset: -1; } }

/* Solar System */
.solar { --k: 1; font-family: var(--font-mono); }
.solar__stars circle { fill: var(--starlight-dim); }
.solar__orbits ellipse, .solar__orbits path { fill: none; stroke: rgba(251, 246, 236, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.solar__orbits .solar__helio { stroke: rgba(232, 164, 160, .5); stroke-dasharray: 3 5; }
.solar__orbits .solar__comet-orbit { stroke: rgba(106, 143, 176, .55); stroke-dasharray: 2 4; }
.solar__belt circle { fill: rgba(201, 191, 176, .38); }
.solar__belt--kuiper circle { fill: rgba(143, 199, 201, .26); }
.solar__ring-label { font-size: calc(10px * var(--k)); letter-spacing: .1em; text-transform: uppercase; fill: rgba(232, 164, 160, .8); }
.solar__voyager-trail { fill: none; stroke: var(--color-brass); stroke-width: 1.2; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: .8; }
.solar__swarm circle { fill: #FFE6A8; }
.solar__sun-glow { transform-box: fill-box; transform-origin: center; }
.body { cursor: default; }
.body__disc { fill: var(--bc); stroke: rgba(26, 18, 12, .5); stroke-width: .6; vector-effect: non-scaling-stroke; }
.body--star .body__disc { fill: #FFE6A8; stroke: none; }
.body--point .body__disc, .body--belt .body__disc { fill: none; stroke: var(--bc); stroke-width: 1.2; }
.body__label { font-size: calc(9.5px * var(--k)); letter-spacing: .08em; text-transform: uppercase; text-anchor: middle; fill: rgba(251, 246, 236, .62); pointer-events: none; }
.body--point .body__label, .body--belt .body__label, [data-body="moon"] .body__label, [data-body="europa"] .body__label, [data-body="titan"] .body__label, [data-body="ceres"] .body__label { opacity: 0; transition: opacity .3s; }
.body.is-active .body__label, .body.is-selected .body__label { opacity: 1; fill: #FFE6A8; }
.body__halo { fill: none; stroke: var(--color-brass); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .5s; }
.body.is-reached .body__halo { opacity: .85; }
.body.is-selected .body__halo { stroke: var(--color-rose); opacity: 1; stroke-width: 2; }
.body__rings { fill: none; stroke: rgba(215, 190, 133, .85); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.body__sats { fill: none; stroke: var(--color-peach); stroke-width: 1; stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; opacity: 0; }
.body.has-sats .body__sats { opacity: .9; }
.body__tail { stroke: rgba(170, 205, 235, .85); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pin--space circle { fill: var(--c); stroke: var(--color-canvas-alt); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pin--space.is-selected circle { stroke: var(--color-rose); stroke-width: 2.4; }
.pin--space:hover circle, .pin--space:focus-visible circle { transform: scale(1.5); transform-box: fill-box; transform-origin: center; }
.solar-zoom { position: absolute; top: 12px; left: 12px; background: rgba(27, 29, 46, .7); border-color: rgba(251, 246, 236, .25); }
.solar-zoom button { color: var(--color-ink-on-dark-muted); }
.solar-zoom button:hover { color: var(--color-canvas-alt); }
@media (prefers-reduced-motion: no-preference) {
  .solar__sun-glow { animation: breathe 4.5s ease-in-out infinite alternate; }
  .body.is-reached .body__halo { animation: halo 2.8s ease-in-out infinite; }
  .body.is-selected .body__halo { animation: halo 1.2s ease-in-out infinite; }
  .body.has-sats .body__sats { animation: sats 3s linear infinite; }
  .solar__swarm circle { animation: twinkle 1.6s ease-in-out infinite alternate; }
  .solar__swarm circle:nth-child(3n) { animation-delay: -.8s; }
  .pin--space circle { animation: pin-pop .6s var(--spring) both; transform-box: fill-box; transform-origin: center; }
}
@keyframes breathe { to { transform: scale(1.18); opacity: .8; } }
@keyframes halo { 50% { opacity: .35; } }
@keyframes sats { to { stroke-dashoffset: -16; } }

/* Cosmos */
.cosmos { font-family: var(--font-mono); }
.cosmos__stars circle { fill: var(--starlight-dim); }
.cosmos__edge { fill: none; stroke: rgba(232, 164, 160, .55); stroke-width: 2; stroke-dasharray: 2 6; }
.cosmos__ring circle { fill: none; stroke: rgba(251, 246, 236, .2); stroke-width: 1; }
.cosmos__ring text { font-size: 11px; letter-spacing: .06em; fill: var(--starlight); paint-order: stroke; stroke: var(--night); stroke-width: 3px; }
.cosmos__ring-name { text-transform: uppercase; }
.cosmos__ring-note { font-size: 9px; fill: var(--color-peach); }
.cosmos__radio-edge { fill: rgba(232, 164, 160, .07); stroke: var(--color-rose); stroke-width: 1.4; }
.cosmos__radio-wave { fill: none; stroke: var(--color-rose); stroke-width: 1; }
.cosmos__radio-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-anchor: middle; fill: var(--color-rose); paint-order: stroke; stroke: var(--night); stroke-width: 3px; }
.cosmos__earth circle { fill: #2F74C0; stroke: var(--color-canvas-alt); stroke-width: 1.5; }
.cosmos__earth text { font-size: 10px; text-anchor: middle; fill: var(--starlight); letter-spacing: .08em; text-transform: uppercase; }
.pin--cosmos circle { fill: var(--c); stroke: var(--color-canvas-alt); stroke-width: 1.4; transition: r .3s var(--spring); }
.pin--cosmos.is-later { opacity: .45; }
.pin--cosmos.is-active circle { stroke: #FFE6A8; }
.pin--cosmos.is-selected circle { stroke: var(--color-rose); stroke-width: 2.4; }
.pin--cosmos text { font-size: 10px; fill: var(--color-canvas-alt); paint-order: stroke; stroke: var(--night); stroke-width: 3px; }
.cosmos__note { margin: 6px 8px 2px; color: var(--color-ink-on-dark-muted); }
@media (prefers-reduced-motion: no-preference) {
  .cosmos__ring circle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.6s var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms); }
  .cosmos__ring text { animation: rise .6s var(--ease-out) both; animation-delay: calc(400ms + var(--i) * 90ms); }
  .cosmos__earth circle { animation: halo 2.4s ease-in-out infinite; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- Intro */
.intro { position: fixed; inset: 0; z-index: 100; background: #1A120C; display: grid; place-items: center; cursor: pointer; transition: opacity .6s ease; }
.intro.is-out { opacity: 0; pointer-events: none; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__line {
  position: relative; margin: 0; padding: 0 24px; max-width: 26ch; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 3.4vw, 2.4rem); line-height: 1.25; color: var(--color-canvas-alt);
  opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
  text-shadow: 0 2px 24px rgba(26, 18, 12, .9);
}
.intro__line.is-on { opacity: 1; transform: none; }
.intro__title { position: absolute; display: grid; gap: 8px; justify-items: center; text-align: center; opacity: 0; transform: scale(.94); transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out); }
.intro.is-title .intro__title { opacity: 1; transform: none; }
.intro.is-title .intro__line { opacity: 0; }
.intro__title .nasha-eyebrow { color: var(--color-peach); }
.intro__title b { font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .95; color: var(--color-canvas-alt); letter-spacing: var(--tracking-display-tight); }
.intro__title i { font-family: var(--font-display); font-size: var(--text-romantic); color: var(--color-blush); }
.intro__skip { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); border: 1px solid rgba(251, 246, 236, .3); background: transparent; color: var(--color-ink-on-dark-muted); border-radius: 999px; padding: 8px 14px; cursor: pointer; }

/* ---------------------------------------------------------------- Earth: deep-time coastlines & borders */
.atlas__land { transition: opacity .7s var(--ease-out), fill .7s var(--ease-out); }
.atlas__land.is-faded { opacity: .16; }
.atlas__paleo { fill: #D9C39A; stroke: #A88A5A; stroke-width: .7; vector-effect: non-scaling-stroke; }
.geo-layer { opacity: 0; transition: opacity .7s var(--ease-out); }
.geo-layer.is-in { opacity: 1; }
.geo-layer.is-out { opacity: 0; }
.polity { fill: var(--f); fill-opacity: .55; stroke: rgba(26, 18, 12, .45); stroke-width: .5; vector-effect: non-scaling-stroke; transition: fill-opacity .2s ease; }
.polity:hover { fill-opacity: .85; }
.polity--approx { stroke-dasharray: 2 2; fill-opacity: .4; }
.polity__label {
  font-family: var(--font-body, system-ui); font-size: 9px; font-weight: 600; text-anchor: middle; dominant-baseline: middle;
  fill: var(--color-ink); paint-order: stroke; stroke: rgba(251, 246, 236, .85); stroke-width: 2.5px; pointer-events: none;
}
[data-route] { transition: opacity .5s ease; }
[data-route].is-hidden { opacity: 0; }
.atlas__caption {
  position: absolute; left: 16px; bottom: 14px; max-width: calc(100% - 32px);
  padding: 6px 12px; border-radius: 999px; background: rgba(26, 18, 12, .82); color: var(--color-canvas-alt);
  font-family: var(--font-mono, ui-monospace); font-size: 12px; line-height: 1.3; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .atlas__caption:not([hidden]) { animation: rise .45s var(--ease-out) both; }
}
@media (max-width: 640px) { .polity__label { font-size: 7px; } .atlas__caption { font-size: 11px; } }
.atlas__caption b { font-weight: 600; }
.atlas__caption span::before { content: ' · '; opacity: .6; }
.atlas__map.is-deep .pin { opacity: .45; }
.atlas__map.is-deep .pin.is-selected, .atlas__map.is-deep .pin:hover { opacity: 1; }
/* Labels inherit the body group's stroke; draw it as a halo under the fill instead. */
.body__label, .solar__ring-label { paint-order: stroke; stroke: var(--night, #1A120C); stroke-width: 2.5px; stroke-linejoin: round; }
.chip[hidden] { display: none; }
@media (max-width: 640px) {
  .atlas__caption { position: static; display: block; margin: 8px 4px 2px; max-width: none; border-radius: var(--radius-md, 12px); }
}
.cosmos__earth text { paint-order: stroke; stroke: var(--night, #1A120C); stroke-width: 3px; fill: #FFE6A8; }

/* ---------------------------------------------------------------- Clickable territories */
.polity { cursor: pointer; }
[data-borders].has-pick .polity { fill-opacity: .28; }
[data-borders].has-pick .polity.is-picked { fill-opacity: .9; stroke: var(--color-ink); stroke-width: 1.6; }
.polity-card {
  position: absolute; z-index: 5; width: 260px; padding: 14px 16px 12px; border-radius: 16px;
  background: var(--color-canvas-alt); border: 1px solid var(--color-border); border-top: 6px solid var(--f);
  box-shadow: 0 18px 40px rgba(42, 31, 23, .18); display: grid; gap: 4px;
}
.polity-card h4 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; padding-right: 22px; }
.polity-card p { margin: 0; font-size: 13px; color: var(--color-ink-soft); }
.polity-card__prec { font-size: 10px !important; }
.polity-card__src { font-size: 9px !important; opacity: .7; margin-top: 4px !important; }
.polity-card ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.polity-card li button { width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--color-ink); }
.polity-card li button:hover { background: var(--color-surface-sunk); }
.polity-card li .mono { font-size: 10px; margin-right: 4px; }
.polity-card__x { position: absolute; right: 8px; top: 8px; border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--color-ink-soft); width: 28px; height: 28px; border-radius: 50%; }
.polity-card__x:hover { background: var(--color-surface-sunk); }
@media (prefers-reduced-motion: no-preference) {
  .polity-card { animation: pop-in .35s var(--spring, ease) both; transform-origin: top left; }
}
@keyframes pop-in { from { opacity: 0; transform: scale(.9) translateY(6px); } }

/* ---------------------------------------------------------------- Living Earth: continuous drift */
.atlas__map.is-deep .atlas__land { transition: none; }
.atlas__map.is-drifting .pin { opacity: 0 !important; transition: opacity .4s; }
.chip--drift { background: var(--color-ink); color: var(--color-canvas-alt); border-color: var(--color-ink); }
.chip--drift:hover { background: #3B2C21; }

/* ---------------------------------------------------------------- Micro-interactions (js/ui/micro.js) */
.nasha-btn, .chip, .icon-btn, .p10-btn, .faith-pick__btn, .seg button { transition: translate .25s var(--spring, ease), background .2s, border-color .2s, color .2s; }
.has-ripple { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18; transform: scale(0); animation: ripple .6s var(--ease-out, ease) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.spark { position: fixed; z-index: 60; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; pointer-events: none; background: #E3A23B; box-shadow: 0 0 6px #F3D9A4; animation: spark .7s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.tour-card, .quiz__opt, .sheet__art { transform-style: preserve-3d; transition: transform .35s var(--spring, ease), box-shadow .35s ease; }
.tour-card.is-tilting, .tour-card.is-tilting:hover, .quiz__opt.is-tilting, .quiz__opt.is-tilting:hover, .sheet__art.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(0); box-shadow: 0 18px 40px rgba(42, 31, 23, .14); }
.tour-card.is-tilting::after, .quiz__opt.is-tilting::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--sx) var(--sy), rgba(255, 255, 255, .35), transparent 60%);
}
.tour-card, .quiz__opt { position: relative; }

/* ---- Walkthrough (js/ui/walkthrough.js): a spotlight cut out of a dimmed page, and a coach card */
.ftue { position: fixed; inset: 0; z-index: 200; opacity: 0; transition: opacity .3s ease; }
.ftue.is-in { opacity: 1; }
.ftue--offer { display: grid; place-items: center; background: rgba(26, 18, 12, .55); backdrop-filter: blur(2px); }
.ftue__hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(26, 18, 12, .62), 0 0 0 2px var(--color-brass, #c8a44a), 0 0 30px 6px rgba(232, 183, 48, .35); transition: left .45s var(--spring, ease), top .45s var(--spring, ease), width .45s var(--spring, ease), height .45s var(--spring, ease); pointer-events: none; }
.ftue__card { position: fixed; width: min(380px, calc(100vw - 24px)); padding: 16px 18px; border-radius: 16px; background: var(--color-surface, #fffaf0); color: var(--color-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); transition: left .45s var(--spring, ease), top .45s var(--spring, ease); }
.ftue--offer .ftue__card { position: relative; width: min(520px, calc(100vw - 32px)); }
.ftue__card--center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.ftue__card h2 { margin: 4px 0 6px; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; color: var(--color-ink-strong); }
.ftue__card p { margin: 0 0 12px; color: var(--color-ink-soft); line-height: 1.5; }
.ftue__card.is-step h2, .ftue__card.is-step p { animation: ftue-in .35s ease-out; }
@keyframes ftue-in { from { opacity: 0; translate: 0 6px; } }
.ftue__dots { display: flex; gap: 5px; margin: 0 0 12px; }
.ftue__dots i { flex: 1; height: 3px; border-radius: 3px; background: var(--color-border); transition: background .3s; }
.ftue__dots i.is-on { background: var(--color-brass, #c8a44a); }
.ftue__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ftue__skip { margin-left: auto; border: 0; background: none; color: var(--color-ink-soft); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ftue__hole, .ftue__card { transition: none; } .ftue__card.is-step h2, .ftue__card.is-step p { animation: none; } }

/* ---- "Somewhere new" banner (js/ui/spotlight.js) */
.spot { position: fixed; z-index: 80; left: 0; right: 0; margin: 0 auto; width: fit-content; top: 14px; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 12px; max-width: min(760px, calc(100vw - 24px)); padding: 10px 12px 10px 16px; border-radius: 16px; background: var(--color-ink-strong, #1f1712); color: var(--color-canvas, #f4ecdf); box-shadow: 0 14px 40px rgba(0, 0, 0, .3); transform: translateY(-140%); transition: transform .5s var(--spring, ease); }
.spot.is-in { transform: none; }
.spot__pin { font-size: 20px; }
.spot__text { display: grid; flex: 1 1 auto; min-width: 180px; }
.spot .nasha-btn { white-space: nowrap; }
.spot__text b { font-family: var(--font-display); font-size: 1.1rem; }
.spot__text .mono { font-size: 11px; color: inherit; opacity: .75; }
.spot .nasha-eyebrow { color: var(--color-brass, #c8a44a); }
.spot .nasha-btn--secondary { background: transparent; color: inherit; border-color: rgba(244, 236, 223, .4); }
.spot .nasha-btn--quiet { color: inherit; }
.spot__x { color: inherit; background: transparent; }
@media (max-width: 700px) {
  .spot { left: 10px; right: 10px; width: auto; max-width: none; top: auto; bottom: 92px; flex-wrap: wrap; gap: 6px 8px; padding: 10px 40px 10px 12px; transform: translateY(170%); }
  .spot.is-in { transform: none; }
  .spot__pin { display: none; }
  .spot__text { flex: 1 1 100%; }
  .spot .nasha-btn { min-height: 36px; padding: 0 12px; }
  .spot__x { position: absolute; top: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .spot { transition: none; } }