/* universe.css — the home page's map of the universe (public/js/universe.js, v3).
   The sky is a fixed canvas behind the page (universe-sky.js). The objects are
   figures inside the sections, so they scroll with the page on the compositor.
   The script sets only classes and custom properties (the CSP allows no style
   attributes): --u-l, --u-t, --u-d (place and size), --u-a (opacity), --u-rot,
   --u-spin, --u-par (drift), and the label's --u-cx, --u-cy and leader line. */

:root { --u-ink: color-mix(in srgb, var(--ink) 75%, transparent); --u-line: color-mix(in srgb, var(--ink) 35%, transparent); }
@media (prefers-color-scheme: dark) {
  :root { --u-ink: rgb(200 210 235 / 0.75); --u-line: rgb(200 210 235 / 0.35); }
}

/* The sky canvas is sized and turned by universe-sky.js (CSSOM only); its holder clips it
   and fades it on the text side, so the copy never sits on bright sky. */
.universe { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.7) 30%, #000 58%);
          mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.7) 30%, #000 58%); }
[dir="rtl"] .universe {
  -webkit-mask-image: linear-gradient(270deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.7) 30%, #000 58%);
          mask-image: linear-gradient(270deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.7) 30%, #000 58%); }

/* A frame per section, behind its content and under its tint, clipped to the section
   (the screen's edge cuts the objects that peek in; their images fade to soft circles). */
/* overflow: clip, not hidden: a hidden box is a scroll container, and view() would bind the drift
   to it (it never scrolls, so the objects would not drift). */
.u-frame { position: absolute; inset: 0; overflow: hidden; overflow: clip; z-index: -1; pointer-events: none; }
.u-off { display: none !important; }
/* A section with an object is its own stacking context, so the frame (z-index -1) paints above the
   section's tint instead of under it (a tinted section washed its object out to half strength). */
.section:has(> .u-frame) { isolation: isolate; }

.u-obj { position: absolute; left: var(--u-l); top: var(--u-t); width: var(--u-d); height: var(--u-d); margin: 0; }
.u-art { position: absolute; inset: 0; opacity: var(--u-a, 0.8); }
.u-img {
  display: block; width: 100%; height: 100%; rotate: var(--u-rot, 0deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, rgb(0 0 0 / 0.45) 79%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 58%, rgb(0 0 0 / 0.45) 79%, transparent 100%);
  opacity: 0; transition: opacity 0.8s ease;
}
.u-img.u-in { opacity: 1; }

/* Spinning objects turn on the compositor: three to six minutes a turn, either way. */
.u-spin .u-img { animation: u-spin var(--u-spin, 240s) linear infinite; }
.u-ccw .u-img { animation-direction: reverse; }
@keyframes u-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* A slight drift against the page, only where the browser runs scroll-driven animations. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .u-obj { animation: u-drift linear both; animation-timeline: view(); }
  }
}
@keyframes u-drift { from { translate: 0 calc(var(--u-par, 0px) * -1); } to { translate: 0 var(--u-par, 0px); } }

/* The atlas label: name and J2000 position below the object, on its inner side. */
.u-cap {
  position: absolute; left: var(--u-cx); top: var(--u-cy); margin: 0; white-space: nowrap;
  direction: ltr; unicode-bidi: isolate; text-shadow: none;
  font: 600 11px/15px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--u-ink);
}
.u-cap.u-end { translate: -100% 0; text-align: right; }
.u-cap span { display: block; }
.u-cap .u-pos { font-weight: 500; font-size: 10px; opacity: 0.67; }
.u-lead {
  position: absolute; left: var(--u-lx); top: var(--u-ly); width: var(--u-ll); height: 0;
  border-top: 0.8px solid var(--u-line); transform-origin: 0 0; rotate: var(--u-la, 0deg);
}

/* The procedural Earthrise (only when the photo is missing): the foot of #with-us. */
.u-limb { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--u-lh, 0px); }

/* The hero's Milky Way band and constellations, under the hero's content. */
.u-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* The hero copy sits on a soft veil of the page colour, so no sky shows behind it. */
.u-on .hero-copy { position: relative; }
.u-on .hero-copy::before {
  content: ""; position: absolute; inset: -30% -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--paper) 90%, transparent) 62%,
              color-mix(in srgb, var(--paper) 36%, transparent) 85%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .u-img, .u-obj { animation: none !important; }
  .u-img { transition: none; }
}
@media print { .u-frame, .u-hero { display: none; } }