/* Orbit arcs and inverted text bands. Colour tokens come from content.css. */

/* ---------- Arcs ---------- */
.rings {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  --line: 1.1;
  --lh: 11;
}
.rings svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Arcs that invert whatever they sit on: ink on paper, light on a dark photo. */
.rings.inv { mix-blend-mode: difference; color: #fff; }

.rings .rc {
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--line) * var(--u, 0.4) * 1px);
  stroke-linecap: butt;
  stroke-dasharray: var(--da);
  opacity: var(--op, 1);
}
.rings:not(.on) .rc { stroke-dasharray: 0 360 0 0; }
.rings.on .rc { animation: ring-draw 2.6s cubic-bezier(0.25, 0.6, 0.2, 1) var(--delay, 0s) backwards; }
@keyframes ring-draw {
  from { stroke-dasharray: 0 360 0 0; }
  to   { stroke-dasharray: var(--da); }
}

.rings .rg {
  transform: rotate(var(--r0, 0deg));
  animation: ring-spin var(--dur, 120s) linear infinite;
  animation-direction: var(--dir, normal);
}
.rings:not(.vis) .rg { animation-play-state: paused; }
@keyframes ring-spin {
  from { transform: rotate(var(--r0, 0deg)); }
  to   { transform: rotate(calc(var(--r0, 0deg) + 360deg)); }
}

/* The dot rides the tip of an arc, like a planet at the start of a transit. */
.rings .rd { fill: currentColor; opacity: 0; transition: opacity 1.2s ease calc(var(--delay, 0s) + 2s); }
.rings.on .rd { opacity: 1; }

.rings .rl {
  fill: currentColor;
  font-family: 'Chillax', system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(var(--lh) * var(--u, 0.4) * 1px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 1.6s ease calc(var(--delay, 0s) + 0.4s);
}
.rings.on .rl { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .rings .rg { animation: none; }
  .rings.on .rc { animation: none; }
  .rings .rd, .rings .rl { transition: none; }
}

/* ---------- Hero ---------- */
/* Lives inside the frame so the arcs stop at the sky's edge. The wrapper has the
   hero's own size, offset by the frame's border, so coordinates match the planets'. */
.hero-rings {
  position: absolute;
  left: calc(-1 * var(--m));
  top: calc(-1 * var(--m));
  width: 100vw;
  height: 100vh;
  height: 100svh;
  z-index: 1;
  pointer-events: none;
}
.hero-rings .rings { transform: translate(-50%, -50%); --line: 1.15; --lh: 12; }
.rh0 { width: calc(var(--sw1) * 0.92); left: 50vw; top: calc(var(--py) - 5vh); }
.rh1 { width: calc(var(--pd) * 2.9); left: calc(50vw - var(--px)); top: var(--py); }
.rh2 { width: calc(var(--pd) * 0.975 * 2.9); left: calc(50vw + var(--px)); top: var(--py); }

/* ---------- Content ---------- */
.intro { position: relative; }
.intro > h2, .intro > p { position: relative; z-index: 1; }
.rings-intro { width: min(46vw, 680px); right: -12vw; top: -78%; --line: 1; }

.rings-foot { width: min(44vw, 640px); left: -12vw; top: 50%; transform: translateY(-50%); --line: 1; }
.site-foot { position: relative; }
.site-foot > * { position: relative; z-index: 1; }

/* Candidate planets: arcs around the drawing, drifting with it */
.orb { position: absolute; width: 34%; max-width: 300px; aspect-ratio: 1; pointer-events: none; }
.orb .world-planet { inset: 0; width: 100%; max-width: none; }
.orb .rings { left: 50%; top: 50%; width: 270%; transform: translate(-50%, -50%); --line: 1.2; --lh: 11; }

/* Pan-STARRS fields: a pulse around the proposed host, which sits at the centre */
.sky { position: relative; }
.rings-sky { left: 0; top: 0; width: 100%; --line: 1.2; --lh: 11; }

/* Question boxes: arcs peek in from a corner */
.ask { position: relative; overflow: hidden; }
.ask > * { position: relative; z-index: 1; }
.rings-ask { width: 78%; max-width: 420px; right: -22%; top: -62%; --line: 1; }

/* Video frames: arcs and bands are cropped to the frame */
.vid-box { position: relative; overflow: hidden; background: var(--navy); }
.vid-box .vid { position: absolute; inset: 0; width: 100%; height: 100%; }

.vid-ink .rings-vid { width: 92%; right: -34%; top: -30%; --line: 1.1; }
.vid-bubble .rings-vid { width: 58%; left: 50%; top: 50%; transform: translate(-50%, -50%); --line: 1.1; }

/* ---------- Bands ---------- */
/* White text in difference mode: it inverts the picture under it, and turns to ink
   on paper. The wipe-in runs when it first scrolls into view. */
.band {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
  white-space: nowrap;
  line-height: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s cubic-bezier(0.6, 0, 0.2, 1);
}
.band.on { clip-path: inset(0 0 0 0); }
.band-track {
  display: flex;
  width: max-content;
  animation: band-slide 80s linear infinite;
  will-change: transform;
}
.band:not(.vis) .band-track { animation-play-state: paused; }
.band-run { display: flex; flex: none; align-items: center; }
@keyframes band-slide { to { transform: translateX(-50%); } }
.b-o { display: inline-block; flex: none; width: 1.1em; height: 1px; }

.band--origin { font-family: 'Origin', system-ui, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }
.band--thin   { font-family: 'Nohemi', system-ui, sans-serif; font-weight: 100; letter-spacing: -0.02em; }
.band--chill  { font-family: 'Chillax', system-ui, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; }

@media (prefers-reduced-motion: reduce) {
  .band { clip-path: none; transition: none; }
  .band-track { animation: none; }
}

/* Divider: the band runs the full width and crosses from paper onto the bubbles. */
.divider-wrap { position: relative; width: 64vw; margin: 9vh 0 0 auto; aspect-ratio: 1320 / 300; }
.divider-wrap .divider { margin: 0; width: 100%; height: 100%; }

/* World photos */
.world .band { top: 50%; transform: translateY(-50%); font-size: clamp(44px, 9.4vw, 170px); padding: 0.08em 0 0.04em; }
.cand-a .world .band { font-size: clamp(52px, 11vw, 200px); }

/* Method video and status video */
.vid-ink .band { top: 8%; font-size: clamp(14px, 1.7vw, 28px); padding: 0.7em 0; }
.vid-bubble .band { top: 50%; transform: translateY(-50%); font-size: clamp(40px, 8vw, 140px); padding: 0.08em 0 0.04em; }

/* Closing band on paper */
.band--foot { position: relative; left: auto; right: auto; margin: 10vh calc(-1 * var(--bleed)) 0; font-size: clamp(80px, 17vw, 300px); padding: 0.06em 0 0.12em; }

@media (max-width: 899px) {
  /* The page rises over the hero; keep the divider below the first screen. */
  .divider-wrap { margin-top: calc(100vh - (var(--py) + var(--pd) * 0.62) + 4vh); }
  .orb { right: 4%; bottom: -10%; width: 30%; }
  .orb .rings { width: 300%; }
  .rings-intro { width: 90vw; right: -30vw; top: -14%; }
  .rings-foot { width: 90vw; left: -30vw; }
  .divider-wrap { width: 86vw; }
  .vid-ink .band { top: 6%; font-size: 14px; }
  .world .band, .cand-a .world .band { font-size: clamp(40px, 13vw, 90px); }
}