/* One continuous Central Time sky, shared by the landing, Atlas, and legal pages.
   The transparent cloud scene floats in that sky without a containing frame. */
:root {
  --sky-top: #719ecb; --sky-mid: #adcfea; --sky-bottom: #e5f1fa;
  --paper: #f0f7ff; --wash: #dfeefa; --surface: #f8fbff; --panel: #e3eef9;
  --ink: #172b41; --body: #192f44; --line: #6284a4; --highlight: #162e45;
  --cloud-light: 1.12; --cloud-warmth: 0; --cloud-opacity: .96;
  --sun-x: 66%; --sun-y: 20%; --sun-color: #fff8d6;
  --star-opacity: 0; --sun-opacity: 1; --moon-opacity: 0;
}
:root[data-sky="sunrise"] {
  --sky-top: #8096b4; --sky-mid: #eeb2a3; --sky-bottom: #ffdda9;
  --paper: #f9ece3; --wash: #f1d0bd; --surface: #fff6ef; --panel: #f5ded0;
  --ink: #302330; --body: #302332; --line: #806e80; --highlight: #352330;
  --cloud-light: 1.07; --cloud-warmth: .3;
  --sun-x: 32%; --sun-y: 57%; --sun-color: #fff1bc;
}
:root[data-sky="sunset"] {
  --sky-top: #8797b1; --sky-mid: #d68f95; --sky-bottom: #f8bc8b;
  --paper: #f8e7e1; --wash: #edc4b6; --surface: #fff2ed; --panel: #f0d8d0;
  --ink: #332431; --body: #2d2538; --line: #856574; --highlight: #392030;
  --cloud-light: .97; --cloud-warmth: .48;
  --sun-x: 73%; --sun-y: 60%; --sun-color: #ffe0a1;
}
:root[data-sky="nighttime"] {
  color-scheme: dark;
  --sky-top: #0d1932; --sky-mid: #253f62; --sky-bottom: #344c6b;
  --paper: #101e35; --wash: #1c3653; --surface: #172942; --panel: #1c304b;
  --ink: #f0f4fb; --body: #e0e9f6; --line: #8197b1; --highlight: #b6d2f1;
  --cloud-light: .57; --cloud-warmth: 0; --cloud-opacity: .66;
  --star-opacity: .85; --sun-opacity: 0; --moon-opacity: 1;
}
body.living-sky { isolation: isolate; background: var(--sky-bottom); }
/* A fixed CSS sky maintains its depth on long pages without a full-page canvas. */
body.living-sky::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 58%, var(--sky-bottom)); }
.page-atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.page-atmosphere .cloud { opacity: .12; filter: brightness(var(--cloud-light)); }
.page-atmosphere .cloud-a { width: 850px; top: -210px; left: -300px; }
.page-atmosphere .cloud-b { width: 950px; top: 240px; right: -470px; left: auto; }
.living-sky .brand span, .living-sky .number { color: var(--body); }
.living-sky h1 em { color: var(--highlight); }
.living-sky .availability, .living-sky #status-state { background: color-mix(in srgb, var(--panel) 40%, transparent); }
.living-sky .render-status { background: color-mix(in srgb, var(--surface) 36%, transparent); }
.living-sky a:focus-visible, .sky-motion:focus-visible { outline: 3px solid var(--highlight); outline-offset: 5px; }
.living-sky .skip { background: var(--surface); }
.sky-window { min-width: 0; }
.sky-scene { background: transparent; border-radius: 0; isolation: isolate; }
.sky-scene[data-cloud-brush="ready"] { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.sky-scene[data-cloud-brush="ready"]:focus-visible { outline: 2px solid var(--highlight); outline-offset: 6px; border-radius: 20px; }

.sky-scene .cloud { position: absolute; height: auto; object-fit: contain; opacity: var(--cloud-opacity); filter: brightness(var(--cloud-light)) sepia(var(--cloud-warmth)); }
.cloud { position: absolute; display: block; height: auto; pointer-events: none; }
.sky-scene .cloud-a { width: 140%; max-width: none; left: -38%; top: 10%; }
.sky-scene .cloud-b { width: 130%; max-width: none; left: 16%; top: 30%; }
.sky-scene .cloud-c { width: 150%; max-width: none; left: -28%; top: 51%; }
.sky-scene .cloud-d { width: 90%; max-width: none; left: 12%; top: -10%; opacity: .3; }
.sky-scene figcaption { z-index: 1; margin: 0; color: var(--ink); text-shadow: none; }
.sky-sun, .sky-moon { position: absolute; width: 70px; aspect-ratio: 1; border-radius: 50%; }
.sky-sun { left: var(--sun-x); top: var(--sun-y); background: var(--sun-color); opacity: var(--sun-opacity); box-shadow: 0 0 60px 20px rgb(255 231 171 / .3); }
.sky-moon { left: 68%; top: 19%; opacity: var(--moon-opacity); background: radial-gradient(circle at 65% 31%, #d7e1ee 0 7%, transparent 8%), radial-gradient(circle at 29% 62%, #dce5ef 0 10%, transparent 11%), #f0f1dd; box-shadow: 0 0 42px rgb(226 237 255 / .12); width: 48px; }
.sky-stars { position: absolute; inset: 0; opacity: var(--star-opacity); background-image: radial-gradient(circle at 20% 24%, #e6eeff 0 1px, transparent 1.7px), radial-gradient(circle at 42% 13%, #e6eeff 0 1px, transparent 1.7px), radial-gradient(circle at 61% 35%, #e6eeff 0 1px, transparent 1.7px), radial-gradient(circle at 81% 40%, #e6eeff 0 1px, transparent 1.7px), radial-gradient(circle at 32% 45%, #e6eeff 0 1px, transparent 1.7px), radial-gradient(circle at 88% 17%, #e6eeff 0 1px, transparent 1.7px), radial-gradient(circle at 53% 27%, #e6eeff 0 .7px, transparent 1.4px); }
.sky-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--body); font-size: 12px; }
.sky-clock-label { margin: 0; display: flex; flex-wrap: wrap; column-gap: 10px; align-items: baseline; }
#sky-phase { color: var(--ink); }
#sky-clock { font-variant-numeric: tabular-nums; }
.sky-motion { font: inherit; color: var(--body); background: transparent; border: 1px solid var(--line); border-radius: 24px; padding: 8px 14px; min-height: 44px; flex-shrink: 0; cursor: pointer; touch-action: manipulation; }
.sky-motion[hidden] { display: none; }
.sky-motion:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) { .sky-motion:not(:disabled):hover { background: var(--panel); } }
@keyframes cloud-drift { from { transform: translate3d(-7%, 0, 0); } to { transform: translate3d(9%, -3%, 0); } }
@keyframes cloud-drift-back { from { transform: translate3d(8%, 0, 0); } to { transform: translate3d(-9%, 3%, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .living-sky .cloud { animation: cloud-drift 74s ease-in-out infinite alternate; }
  .living-sky .cloud-b { animation: cloud-drift-back 95s -35s ease-in-out infinite alternate; }
  .living-sky .cloud-c { animation-duration: 110s; animation-delay: -60s; }
  .living-sky .cloud-d { animation-duration: 125s; animation-delay: -45s; }
  :root:not([data-clouds-paused="false"]) .living-sky .cloud { animation-play-state: paused; }
}
@media (max-width: 640px) {
  .sky-controls { margin-top: 10px; }
  .sky-sun { width: 52px; }
  .sky-moon { width: 36px; }
  .page-atmosphere .cloud-a { width: 600px; top: -140px; left: -280px; }
}
@media (prefers-reduced-motion: reduce) { .living-sky .cloud { animation: none; } }

/* The raymarched scene shares the existing sun/moon and transparent sky. */
.cloud-sculpture { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sky-scene[data-cloud-renderer="webgl"] .cloud { visibility: hidden; animation: none; }

.sky-scene[data-cloud-renderer="webgl"] figcaption { z-index: 2; }

/* Feather the volume and fallback together, including the low cloud bank. */
.sky-cloud-layer, .cloud-sculpture { mask-image: radial-gradient(ellipse 70% 65% at 50% 38%, #000 48%, transparent 80%); }
.sky-cloud-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sky-scene[data-cloud-renderer="webgl"] .sky-cloud-layer { visibility: hidden; }
.living-sky #atlas-search { color: var(--ink); background: var(--surface); }
.living-sky .atlas-next, .living-sky .atlas-gallery img { background: var(--panel); }
.living-sky .atlas-main button[aria-pressed="true"] { color: #1b2130; }
.living-sky button:focus-visible, .living-sky input:focus-visible { outline-color: var(--highlight); }

/* Mist between pages: the old page blurs into vapor as the next condenses. */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
::view-transition-old(root) { animation: mist-out .45s ease-in both; }
::view-transition-new(root) { animation: mist-in .6s .1s ease-out both; }
@keyframes mist-out { to { opacity: 0; filter: blur(14px) brightness(1.15); transform: scale(1.015); } }
@keyframes mist-in { from { opacity: 0; filter: blur(14px) brightness(1.15); transform: scale(.99); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}