/* orbit — roadmap timeline, mockup (10), MVP_PLAN §7.2 */

/* header telemetry */
.orbit-tele{display:flex;align-items:flex-start;gap:12px;text-align:left;color:rgba(255,255,255,.72)}
.orbit-tele__star{display:block;width:15px;height:19px;margin-top:-2px;color:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.7))}
.orbit-tele__star svg{width:100%;height:100%;stroke-width:1;transform:scaleX(.62)}

.orbit{position:absolute;inset:0}

/* ---- station: right side, behind the text, full content height, contained + anchored right ---- */
.orbit__station{position:absolute;left:36%;right:0;top:calc(max(20px,calc(var(--safe-t) + 8px)) + 26px);bottom:calc(var(--dock-space) - 30px);
  container-type:size;pointer-events:none}
.orbit__float{position:absolute;right:0;top:0;width:min(100cqw,calc(100cqh * 593 / 1300));aspect-ratio:593/1300;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 5%,#000 93%,transparent);mask-image:linear-gradient(180deg,transparent,#000 5%,#000 93%,transparent)}
.orbit__img{display:block;width:100%;height:100%;opacity:0;transition:opacity 1200ms var(--ease)}
.orbit__img.is-ready{opacity:1}
/* halo ring glow: measured on station.webp — ring centre (289, 562), radii 279 × 78 px of 593 × 1300 */
.orbit__halo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;mix-blend-mode:screen;opacity:.35}
.orbit.is-in .orbit__float{animation:orbit-float 9s ease-in-out infinite}
.orbit.is-in .orbit__halo{animation:orbit-halo 4.5s ease-in-out infinite}
@keyframes orbit-float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@keyframes orbit-halo{0%,100%{opacity:.18}50%{opacity:.62}}

/* ---- timeline ---- */
.orbit__scroll{height:100%;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);display:flex;flex-direction:column}
.orbit__track{--pt:max(6px,calc(var(--app-h) * .1 - 52px));--pb:max(14px,calc(var(--app-h) * .06 - 12px));
  position:relative;flex:1 0 auto;display:flex;flex-direction:column;padding:var(--pt) 0 var(--pb)}
.orbit__axis{position:absolute;left:0;width:1px;margin-left:-.5px;top:calc(var(--pt) + 2px);bottom:var(--pb);
  background:linear-gradient(0deg,rgba(247,176,100,.85),rgba(232,184,150,.6) 30%,rgba(209,192,239,.6) 70%,rgba(209,192,239,.75));
  box-shadow:0 0 6px rgba(247,176,100,.18);transform-origin:50% 100%}
/* 01 at the bottom, counting up (DECISIONS #14); markup stays 01 → 04 so screen readers read in order */
.orbit__list{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column-reverse;justify-content:space-between;gap:14px}

.ms{--c:var(--amber);--glow:rgba(247,176,100,.75);position:relative}
.ms--lav{--c:var(--lavender);--glow:rgba(190,170,255,.75)}
.ms__head{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:240px;padding:0 0 0 19px;text-align:left;color:var(--text);text-shadow:0 0 3px #000,0 0 10px #000}
.ms__node{position:absolute;left:-4.5px;top:6.5px;width:9px;height:9px;border-radius:50%;border:1px solid var(--c);background:#000;
  box-shadow:0 0 6px var(--glow),inset 0 0 2px var(--glow)}
.ms__node::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--c);opacity:0}
.ms__num{font:200 23px/1 var(--f-sans);letter-spacing:.05em;color:#ECECEE}
.ms__num i{font-style:normal;margin-left:.3em}
.ms__now{display:inline-block;margin-left:12px;padding:4px 8px 3px;vertical-align:5px;border:1px solid rgba(247,176,100,.55);border-radius:10px;
  font:400 9px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);text-shadow:none;box-shadow:0 0 8px rgba(247,176,100,.25)}
.ms__name{margin-top:6px;font:400 15.5px/1.25 var(--f-sans);letter-spacing:.18em;text-transform:uppercase}
.ms__thesis{margin-top:6px;max-width:225px;font:300 13.5px/1.36 var(--f-sans);color:var(--text-2)}
/* not-current milestones dim to .6 — the thesis keeps its own contrast so it stays readable */
.ms:not(.is-current) :is(.ms__node,.ms__num,.ms__name){opacity:.6}

.ms__progress{display:flex;flex-direction:column;gap:7px;margin-top:10px;padding-left:19px}
.ms__bar{position:relative;display:block;width:118px;height:1px;background:rgba(255,255,255,.16);overflow:hidden}
.ms__bar::before{content:"";position:absolute;inset:0;background:var(--amber);box-shadow:0 0 6px var(--amber);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.ms__progress-txt{font:400 9px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}

/* ---- entry: axis draws bottom → top in 1.2 s, milestones ignite 01 → 04 from the bottom (rocket ascent, DECISIONS #14) ---- */
.orbit.is-in .orbit__axis{animation:orbit-axis 1200ms var(--ease) both}
.orbit.is-in .ms{animation:orbit-ms 700ms var(--ease-out) both;animation-delay:calc(var(--i) * 340ms + 60ms)}
.orbit.is-in .ms.is-current .ms__node::after{animation:orbit-pulse 2.6s ease-out 1.5s infinite}
.orbit.is-in .ms.is-current .ms__node{animation:orbit-glow 2.6s ease-in-out 1.5s infinite}
.orbit.is-in .orbit__station{animation:orbit-fade 1600ms var(--ease) both}
/* the axis breathes with light and a wave runs up it (01 → 04); each node flashes as the wave passes */
.orbit__axis::before{content:"";position:absolute;inset:0 -2px;background:inherit;filter:blur(3px);opacity:.35}
.orbit__axis::after{content:"";position:absolute;left:-1.5px;width:4px;height:18%;bottom:0;border-radius:2px;opacity:0;
  background:linear-gradient(0deg,transparent,rgba(255,236,214,.95) 50%,transparent);box-shadow:0 0 12px rgba(247,176,100,.85)}
.orbit.is-in .orbit__axis::before{animation:orbit-breathe 2.5s ease-in-out 1.2s infinite}
.orbit.is-in .orbit__axis::after{animation:orbit-wave 4s linear 1.6s infinite}
.orbit.is-in .ms .ms__node{animation:orbit-flash 4s linear infinite;animation-delay:calc(1.9s + var(--i) * 1s)}
.orbit.is-in .ms.is-current .ms__node{animation:orbit-glow 2.6s ease-in-out 1.5s infinite,orbit-flash 4s linear 1.9s infinite}
@keyframes orbit-axis{from{transform:scaleY(0)}to{transform:none}}
@keyframes orbit-ms{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes orbit-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.8);opacity:0}}
@keyframes orbit-glow{0%,100%{box-shadow:0 0 6px var(--glow),inset 0 0 2px var(--glow)}50%{box-shadow:0 0 14px var(--glow),inset 0 0 4px var(--glow)}}
@keyframes orbit-fade{from{opacity:0}to{opacity:1}}
@keyframes orbit-breathe{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes orbit-wave{0%{bottom:-18%;opacity:0}8%{opacity:1}88%{opacity:1}100%{bottom:100%;opacity:0}}
@keyframes orbit-flash{0%,14%,100%{scale:1;filter:none}5%{scale:1.6;filter:brightness(1.8) drop-shadow(0 0 6px var(--c))}}

@media (prefers-reduced-motion:reduce){
  .orbit.is-in .orbit__float,.orbit.is-in .orbit__halo,.orbit.is-in .ms .ms__node,.orbit.is-in .ms.is-current .ms__node,.orbit.is-in .ms.is-current .ms__node::after,
  .orbit.is-in .orbit__axis::after{animation:none}
  .orbit.is-in .orbit__axis::before{animation:none;opacity:.6}
}