/* SOL, LUNA, TERRA (W18, 4 Oct 2026): the hero orb's per-body halo, its caption and its tap target. Wiring: moon.js.
   Load after site.css. Halos are compositor-only opacity changes; data-body on .moon picks one. */
.hero>.moon .og{position:absolute;inset:-28%;pointer-events:none}
.hero>.moon .og i{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity 2.4s ease}
.hero>.moon .og-sol{background:radial-gradient(circle closest-side,rgba(255,150,60,0) 52%,rgba(255,138,48,.4) 57.5%,rgba(255,110,30,.16) 67%,rgba(255,90,20,.05) 82%,rgba(255,90,20,0) 100%)}
.hero>.moon .og-terra{background:radial-gradient(circle closest-side,rgba(110,170,255,0) 57.6%,rgba(140,190,255,.5) 59.1%,rgba(90,150,255,.2) 60.6%,rgba(70,130,255,.06) 64%,rgba(70,130,255,0) 70%)}
.hero>.moon[data-body="sol"] .og-sol,.hero>.moon[data-body="terra"] .og-terra{opacity:1}
.hero>.moon[data-body="sol"] .og-sol{animation:og-breathe 9s ease-in-out infinite}
@keyframes og-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* the name of the body, in the hero's mono kicker */
.hero>.moon .orb-cap{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font:500 10.5px/1 var(--ms-mono,ui-monospace,monospace);letter-spacing:.32em;text-transform:uppercase;color:var(--ms-ink2,rgba(242,239,232,.72));
  text-shadow:0 1px 10px #000,0 0 2px #000;transition:opacity .42s ease}
.hero>.moon .orb-cap b{color:#e3c878;font-weight:500}
.hero>.moon .orb-cap i{font-style:normal;opacity:.5;margin-left:1.1em;font-size:9px;letter-spacing:.22em}
.hero>.moon .orb-cap.sw{opacity:0}
.hero>.moon .orb-hit{position:absolute;inset:8%;border-radius:50%;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* no WebGL: the plain videos crossfade, screen-blended off their black as before */
.hero>.moon:not(.keyed) .mvid{transition:opacity 2.4s ease}
.hero>.moon:not(.keyed) .mvid:not(.on){opacity:0}
@media (prefers-reduced-motion:reduce){.hero>.moon .og i,.hero>.moon .orb-cap,.hero>.moon:not(.keyed) .mvid{transition:none}.hero>.moon .og-sol{animation:none!important}}
/* the headline's lines are full-width blocks that sat over the orb and ate its taps: size them to their words */
.hero h1.ms-h1{pointer-events:none}.hero h1.ms-h1 .l{width:fit-content;pointer-events:auto}
/* phone: the orb sits behind the headline, so the caption goes beside it, name over credit */
@media (max-width:959px){.hero>.moon .orb-cap{left:calc(100% + 4px);top:50%;transform:translateY(-50%);line-height:1.5}
  .hero>.moon .orb-cap i{display:block;margin:0}}