/* ============================================================
   Atmosphere: cover glow, embers, warmth, chapter cards, motion strength
   (js/atmosphere.js). Layers sit behind the text (z-index -1, under the page's
   own stacking) or, for warmth, over everything without taking a single tap.
   ============================================================ */

/* ---------- cover glow ---------- */
:root { --ag: .10; }
:root[data-theme="sepia"] { --ag: .12; }
:root[data-theme="dark"] { --ag: .15; }
:root[data-theme="oled"] { --ag: .11; }
:root[data-theme="hearth"] { --ag: .17; }
:root[data-theme="parchment"] { --ag: .12; }
:root[data-theme="mars"] { --ag: .16; }
:root[data-theme="ash"] { --ag: .14; }

.atmos-glow {
  --c1: 178, 38, 46; --c2: 205, 150, 70; --c3: 120, 40, 30;
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none; contain: strict;
  opacity: 0; transition: opacity 1.2s ease;
}
.atmos-glow.on { opacity: 1; }
.atmos-glow i {
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  opacity: .62; transform: scale(.96);
  animation: atmos-breathe 11s ease-in-out infinite;
  animation-play-state: paused; /* still while paused: no frames at all */
}
/* centred off-screen, so the light gathers at the edges and the text column stays clear */
.atmos-glow .ag1 { width: 72vmax; left: -40vmax; top: -34vmax; background: radial-gradient(closest-side, rgba(var(--c1), var(--ag)), transparent); }
.atmos-glow .ag2 { width: 64vmax; right: -38vmax; top: 22vh; background: radial-gradient(closest-side, rgba(var(--c2), calc(var(--ag) * .8)), transparent); animation-duration: 14s; animation-delay: -5s; }
.atmos-glow .ag3 { width: 66vmax; left: -22vmax; bottom: -46vmax; background: radial-gradient(closest-side, rgba(var(--c3), calc(var(--ag) * .9)), transparent); animation-duration: 17s; animation-delay: -9s; }
html.atmos-live .atmos-glow i { animation-play-state: running; }
@keyframes atmos-breathe {
  0%, 100% { opacity: .62; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes atmos-breathe-calm {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}
/* phones: the column is the whole screen, so the light keeps to the corners */
@media (max-width: 720px) {
  .atmos-glow.on { opacity: .8; }
  .atmos-glow .ag1 { width: 90vmax; left: -62vmax; top: -58vmax; }
  .atmos-glow .ag2 { width: 80vmax; right: -60vmax; top: 30vh; }
  .atmos-glow .ag3 { width: 86vmax; left: -36vmax; bottom: -66vmax; }
}

/* ---------- embers / dust ---------- */
.atmos-embers {
  position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity .8s ease;
}
.atmos-embers.on { opacity: 1; }

/* ---------- warmth: a night light over everything, taps go straight through ---------- */
.atmos-warm {
  position: fixed; inset: -2px; z-index: 2147483000; pointer-events: none;
  /* multiply: white turns candle-amber, black stays black (Black theme stays true black) */
  background: rgb(255, 150, 52);
  mix-blend-mode: multiply;
  opacity: 0; transition: opacity .7s ease;
}

/* ---------- chapter title card ---------- */
.atmos-card {
  --c1: 178, 38, 46;
  position: fixed; z-index: 26; left: 0; right: 0; margin: 0 auto;
  /* over the top bar's title (the chrome, never the line being read): the title blooms into a card */
  top: calc(env(safe-area-inset-top) + 7px);
  width: max-content; max-width: min(calc(100vw - 24px), 440px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 11px 30px 12px;
  text-align: center; pointer-events: none;
  color: var(--ink);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--line) 75%, transparent),
    0 18px 50px -20px rgba(var(--shade), .5),
    0 10px 44px -14px rgba(var(--c1), .32);
}
.ac-kick { font: 600 11px/1.2 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ac-title {
  font: 400 25px/1.15 var(--serif); font-variation-settings: "opsz" 48;
  letter-spacing: -0.012em; text-wrap: balance;
}
.ac-pov { color: var(--ink-2); }
.ac-rule {
  width: 44px; height: 1px; margin-top: 6px;
  background: linear-gradient(90deg, transparent, var(--crimson), var(--gold), transparent);
}
.atmos-card.is-part .ac-title { font-size: 29px; font-style: italic; }
@media (max-width: 720px) {
  .atmos-card { top: calc(env(safe-area-inset-top) + 5px); padding: 10px 26px 11px; }
  .ac-title { font-size: 23px; }
  .atmos-card.is-part .ac-title { font-size: 26px; }
}

/* ---------- the Atmosphere section of the Aa panel ---------- */
.atmos-panel { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.atmos-h { margin: 0; font: 500 16px/1.2 var(--serif); font-variation-settings: "opsz" 24; color: var(--ink); }
.atmos-lbl { display: flex; justify-content: space-between; align-items: baseline; }
.atmos-val { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.atmos-range { width: 100%; margin: 0; accent-color: var(--gold); }
.atmos-note { margin: -6px 0 0; font-size: 12px; color: var(--ink-3); }
.type-sheet .atmos-panel { gap: 18px; padding-top: 18px; }
.type-sheet .atmos-h { font-size: 18px; }
.type-sheet .atmos-range { height: 44px; }

/* ============================================================
   Better motion
   ============================================================ */

/* library -> book: the shelf sinks back as the page rises into place; and back again.
   (The cover still flies between them as the shared element.) */
html[data-nav="in"]:not(.theme-vt)::view-transition-old(root) { animation: 220ms cubic-bezier(.4, 0, 1, 1) both atmos-vt-sink; }
html[data-nav="in"]:not(.theme-vt)::view-transition-new(root) { animation: 440ms cubic-bezier(.16, 1, .3, 1) 50ms both atmos-vt-rise; }
html[data-nav="out"]:not(.theme-vt)::view-transition-old(root) { animation: 220ms cubic-bezier(.4, 0, 1, 1) both atmos-vt-drop; }
html[data-nav="out"]:not(.theme-vt)::view-transition-new(root) { animation: 440ms cubic-bezier(.16, 1, .3, 1) 40ms both atmos-vt-lift; }
@keyframes atmos-vt-sink { to { opacity: 0; transform: scale(.985); } }
@keyframes atmos-vt-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes atmos-vt-drop { to { opacity: 0; transform: translateY(10px); } }
@keyframes atmos-vt-lift { from { opacity: 0; transform: scale(1.012); } }

/* sheets leave quickly and cleanly: the spring that brings them in used to be cut off
   part-way by the close (hidden at 260 ms / 420 ms), so they vanished mid-flight */
.drawer:not(.in) { transition: transform .24s cubic-bezier(.4, 0, 1, 1); }
.scrim:not(.in) { transition: opacity .24s ease; }
.np:not(.in) .np-sheet { transition: transform .34s cubic-bezier(.4, 0, 1, 1); }
.np:not(.in) .np-scrim { transition: opacity .3s ease; }

/* ============================================================
   Motion: Gentle (smaller, shorter, no overshoot: the springs swap in motion.js)
   ============================================================ */
:root[data-motion="gentle"] .atmos-glow i { animation-name: atmos-breathe-calm; transform: none; }
:root[data-motion="gentle"] .tile.rise { animation-name: atmos-fade-in; animation-duration: .4s; }
@keyframes atmos-fade-in { from { opacity: 0; } }
:root[data-motion="gentle"] .tile .art,
:root[data-motion="gentle"] .tile:hover .art { transform: none; }
:root[data-motion="gentle"] .tile:not(.is-waiting):hover .art { transform: translateY(-2px); }
:root[data-motion="gentle"] .sec + .sec::before { transform: none; transition: opacity .6s ease; }
:root[data-motion="gentle"] body.spot-on .pages { transform: scale(.985); }
:root[data-motion="gentle"] .spot-glow i { animation-duration: 90s; }
:root[data-motion="gentle"] .su { transform: none; }
:root[data-motion="gentle"] .toast { transform: translateY(6px); }
:root[data-motion="gentle"] .toast.in { transform: none; }
:root[data-motion="gentle"] .pop { transform: scale(.97); }
:root[data-motion="gentle"] .pop.in { transform: none; }
:root[data-motion="gentle"]:not(.theme-vt)::view-transition-group(book-cover) { animation-duration: 380ms; }
html[data-motion="gentle"][data-nav]:not(.theme-vt)::view-transition-new(root) { animation: 300ms ease both atmos-fade-in; }
html[data-motion="gentle"][data-nav]:not(.theme-vt)::view-transition-old(root) { animation: 200ms ease both atmos-fade-out; }
@keyframes atmos-fade-out { to { opacity: 0; } }

/* ============================================================
   Motion: Still: the same as the system's reduced-motion setting
   ============================================================ */
:root[data-motion="still"] *, :root[data-motion="still"] *::before, :root[data-motion="still"] *::after {
  transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important;
}
:root[data-motion="still"] .atmos-glow i, :root[data-motion="still"] .spot-glow i, :root[data-motion="still"] .tile.rise { animation: none; }
:root[data-motion="still"] .sw.now { animation: none; --fill: 100%; }
:root[data-motion="still"] .build-status::before, :root[data-motion="still"] .sync-dot { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .atmos-glow i { animation: none; }
}

/* the Aa popover has grown: keep it inside the window, scrolling if it must */
.pop-type { max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; }