/* ============================================================================
   SkyYoke — animated feature explainers + scroll reveal.
   Each .xpl is a two-pane card: an animated "stage" (left) that steps through
   the feature, and a synced caption list (right). The card chrome is light;
   the stage itself stays a dark instrument screen, like a cockpit display
   sitting on paper. Uses the design tokens from skyyoke.css (load that first).
   ========================================================================== */

/* ---------------- scroll reveal ---------------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform}
.rv-in{opacity:1;transform:none}

/* ---------------- explainer frame ---------------- */
.xpl{display:grid;grid-template-columns:1.06fr .94fr;margin:34px 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
.xpl-stage{position:relative;aspect-ratio:16/10;min-height:236px;overflow:hidden;
  /* stage-local palette: a dark cockpit display inside a light card */
  --st-ink:#f2f6fb; --st-mut:#8fa0b8; --st-dim:#5d6c84; --st-line:rgba(255,255,255,.14); --st-blue:#3eb4ff;
  --st-amber:#ffb84d; --st-green:#37f59a; --st-red:#ff5a6e; --st-violet:#8b8cff;
  background:radial-gradient(130% 130% at 72% 6%,#101a2e,#070b13)}
.xpl-tag{position:absolute;top:12px;left:13px;z-index:5;font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;
  color:var(--st-blue);padding:5px 9px;border-radius:999px;background:rgba(62,180,255,.10);border:1px solid rgba(62,180,255,.30)}
.xpl-steps{list-style:none;counter-reset:xs;margin:0;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.xpl-steps>li{position:relative;padding:10px 12px 10px 46px;border-radius:12px;color:var(--muted);font-size:13.5px;line-height:1.45;
  border:1px solid transparent;transition:background .35s var(--ease),border-color .35s,color .35s;cursor:pointer}
.xpl-steps>li::before{counter-increment:xs;content:counter(xs);position:absolute;left:12px;top:13px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:600 12px/1 "IBM Plex Mono",monospace;color:var(--muted-2);
  background:var(--bg-2);border:1px solid var(--border);transition:all .35s var(--ease)}
.xpl-steps>li b{display:block;color:var(--text);font:600 14px/1.3 "Inter",sans-serif;letter-spacing:-.01em;margin-bottom:2px}
.xpl-steps>li.is-active{color:var(--ink-soft);background:rgba(0,153,255,.06);border-color:rgba(0,153,255,.22)}
.xpl-steps>li.is-active::before{color:#fff;background:var(--cyan);border-color:var(--cyan)}
.xpl-static .xpl-steps>li{cursor:default}

/* generic per-step label switcher used inside several stages */
.xpl-say{position:absolute;inset:0;pointer-events:none}
.xpl-say>*{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  opacity:0;transform:translateY(7px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.xpl[data-step="0"] .xpl-say>[data-k="0"],
.xpl[data-step="1"] .xpl-say>[data-k="1"],
.xpl[data-step="2"] .xpl-say>[data-k="2"],
.xpl[data-step="3"] .xpl-say>[data-k="3"],
.xpl[data-step="4"] .xpl-say>[data-k="4"],
.xpl[data-step="5"] .xpl-say>[data-k="5"]{opacity:1;transform:none}

@media(max-width:760px){
  .xpl{grid-template-columns:1fr}
  .xpl-stage{border-right:0;border-bottom:1px solid var(--border)}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .xpl *{animation:none!important;transition:none!important}
}

/* ============================================================================
   1 — CONNECT
   ========================================================================== */
.cn-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(62,180,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(62,180,255,.06) 1px,transparent 1px);background-size:26px 26px}
.cn-pad,.cn-phone{position:absolute;top:50%;transform:translateY(-50%);border-radius:12px;background:linear-gradient(160deg,#1a2742,#0a1120);border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px -12px #000}
.cn-pad{left:8%;width:33%;height:56%}
.cn-phone{right:10%;width:15%;height:46%;border-radius:9px}
.cn-pad::after,.cn-phone::after{content:"";position:absolute;inset:6px;border-radius:7px;background:radial-gradient(circle at 50% 36%,rgba(62,180,255,.20),transparent 72%);border:1px solid rgba(62,180,255,.16)}
.cn-beam{position:absolute;top:50%;left:42%;width:20%;height:2px;transform:translateY(-50%);transform-origin:left;background:linear-gradient(90deg,var(--st-blue),rgba(62,180,255,.1));opacity:0;transition:opacity .5s}
.cn-wifi{position:absolute;top:34%;left:48%;width:42px;height:42px}
.cn-wifi i{position:absolute;inset:0;margin:auto;width:6px;height:6px;border:2px solid var(--st-blue);border-radius:50%;opacity:0;animation:cnwifi 2.1s ease-out infinite}
.cn-wifi i:nth-child(2){animation-delay:.5s}.cn-wifi i:nth-child(3){animation-delay:1s}
@keyframes cnwifi{0%{width:6px;height:6px;opacity:.85}100%{width:48px;height:48px;opacity:0}}
.cn-say{top:auto;bottom:14px;height:30px;font:600 14px/1 "IBM Plex Mono",monospace;letter-spacing:.10em;color:var(--st-blue)}
.cn-say>[data-k="3"]{color:var(--st-green)}
.cn-check{position:absolute;right:14%;top:24%;width:26px;height:26px;border-radius:50%;border:2px solid var(--st-green);opacity:0;transform:scale(.4);transition:all .4s var(--ease)}
.cn-check::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid var(--st-green);border-width:0 2px 2px 0;transform:rotate(42deg)}
.xpl[data-anim="connect"][data-step="1"] .cn-beam,.xpl[data-anim="connect"][data-step="2"] .cn-beam,.xpl[data-anim="connect"][data-step="3"] .cn-beam{opacity:1}
.xpl[data-anim="connect"][data-step="3"] .cn-check{opacity:1;transform:scale(1)}
.xpl[data-anim="connect"][data-step="3"] .cn-phone{border-color:rgba(55,245,154,.6)}

/* ============================================================================
   2 — MOTION YOKE
   ========================================================================== */
.yk-adi{position:absolute;left:9%;top:50%;transform:translateY(-50%);width:44%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.20);box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.yk-horizon{position:absolute;inset:-34%;transition:transform .9s var(--ease);background:linear-gradient(180deg,#1f6dd8 0 50%,#7d5526 50% 100%)}
.yk-horizon::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.85);transform:translateY(-1px)}
.yk-wings{position:absolute;left:50%;top:50%;width:46%;height:3px;transform:translate(-50%,-50%);background:var(--st-amber);border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.3)}
.yk-wings::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);background:var(--st-amber)}
.yk-phone{position:absolute;right:8%;top:50%;width:15%;height:48%;transform:translateY(-50%);transition:transform .9s var(--ease);border-radius:9px;background:linear-gradient(160deg,#1a2742,#0a1120);border:1px solid rgba(255,255,255,.18)}
.yk-phone::after{content:"";position:absolute;inset:5px;border-radius:6px;background:radial-gradient(circle at 50% 40%,rgba(62,180,255,.22),transparent 70%);border:1px solid rgba(62,180,255,.18)}
.yk-say{top:auto;bottom:12px;height:26px;font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.10em;color:var(--st-blue)}
.xpl[data-anim="yoke"][data-step="1"] .yk-horizon{transform:rotate(20deg)}
.xpl[data-anim="yoke"][data-step="1"] .yk-phone{transform:translateY(-50%) rotate(-20deg)}
.xpl[data-anim="yoke"][data-step="2"] .yk-horizon{transform:rotate(-20deg)}
.xpl[data-anim="yoke"][data-step="2"] .yk-phone{transform:translateY(-50%) rotate(20deg)}
.xpl[data-anim="yoke"][data-step="3"] .yk-horizon{transform:translateY(20%)}
.xpl[data-anim="yoke"][data-step="3"] .yk-phone{transform:translateY(-42%) rotate(0)}

/* ============================================================================
   3 — SMART THROTTLE
   ========================================================================== */
.th-track{position:absolute;left:18%;top:14%;bottom:16%;width:30px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--st-line);overflow:hidden}
.th-fill{position:absolute;left:0;right:0;bottom:0;height:60%;transition:height .8s var(--ease),background .5s;background:linear-gradient(180deg,var(--st-blue),#1b7fe0)}
.th-knob{position:absolute;left:-7px;right:-7px;height:18px;bottom:58%;transition:bottom .8s var(--ease),background .5s;border-radius:6px;background:#dfe9f7;border:1px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.5)}
.th-zones{position:absolute;left:calc(18% + 42px);top:14%;bottom:16%;display:flex;flex-direction:column;justify-content:space-between;font:600 9px/1 "IBM Plex Mono",monospace;color:var(--st-dim)}
.th-state{position:absolute;right:8%;top:50%;transform:translateY(-50%);width:38%;height:74px}
.th-say{font:800 22px/1 "Inter",sans-serif;letter-spacing:.02em;color:var(--st-blue)}
.th-say>[data-k="1"]{color:var(--st-mut)}
.th-say>[data-k="2"]{color:var(--st-red)}
.th-say>[data-k="3"]{color:var(--st-amber)}
.th-say>[data-k="4"]{color:var(--st-red)}
.th-badge{position:absolute;right:6%;bottom:14%;white-space:nowrap;font:600 9px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--st-mut);
  padding:4px 7px;border-radius:6px;border:1px solid var(--st-line);background:rgba(0,0,0,.3)}
.xpl[data-anim="throttle"][data-step="0"] .th-fill{height:80%}.xpl[data-anim="throttle"][data-step="0"] .th-knob{bottom:78%}
.xpl[data-anim="throttle"][data-step="1"] .th-fill{height:48%}.xpl[data-anim="throttle"][data-step="1"] .th-knob{bottom:46%}
.xpl[data-anim="throttle"][data-step="2"] .th-fill{height:20%;background:linear-gradient(180deg,#ff7a8a,var(--st-red))}.xpl[data-anim="throttle"][data-step="2"] .th-knob{bottom:18%}
.xpl[data-anim="throttle"][data-step="3"] .th-fill{height:16%;background:linear-gradient(180deg,#ffd089,var(--st-amber))}.xpl[data-anim="throttle"][data-step="3"] .th-knob{bottom:14%}
.xpl[data-anim="throttle"][data-step="4"] .th-fill{height:48%;background:linear-gradient(180deg,#ff7a8a,var(--st-red))}.xpl[data-anim="throttle"][data-step="4"] .th-knob{bottom:46%;animation:thblock .5s ease-in-out infinite}
@keyframes thblock{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.xpl[data-anim="throttle"][data-step="0"] .th-badge::after,.xpl[data-anim="throttle"][data-step="1"] .th-badge::after{content:"IN FLIGHT"}
.xpl[data-anim="throttle"][data-step="2"] .th-badge::after,.xpl[data-anim="throttle"][data-step="3"] .th-badge::after{content:"ON GROUND"}
.xpl[data-anim="throttle"][data-step="4"] .th-badge::after{content:"AIRBORNE";color:var(--st-red)}

/* ============================================================================
   4 — AIRBUS DETENTS
   ========================================================================== */
.dt-track{position:absolute;left:30%;top:15%;bottom:15%;width:34px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--st-line)}
.dt-gate{position:absolute;left:50px;white-space:nowrap;transform:translateY(-50%);font:600 12px/1 "IBM Plex Mono",monospace;color:var(--st-dim);transition:color .35s,text-shadow .35s}
.dt-gate::before{content:"";position:absolute;left:-50px;top:50%;width:42px;height:2px;transform:translateY(-50%);background:rgba(255,255,255,.16)}
.dt-gate[data-g="0"]{top:4%}.dt-gate[data-g="1"]{top:27%}.dt-gate[data-g="2"]{top:50%}.dt-gate[data-g="3"]{top:73%}.dt-gate[data-g="4"]{top:96%}
.dt-knob{position:absolute;left:-9px;right:-9px;height:22px;top:4%;transform:translateY(-50%);border-radius:6px;background:linear-gradient(180deg,#fff,#c5d2e6);box-shadow:0 5px 12px rgba(0,0,0,.55);transition:top .55s cubic-bezier(.5,1.6,.5,1)}
.dt-pulse{position:absolute;left:50%;top:4%;width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--st-blue);opacity:.9;transition:top .55s cubic-bezier(.5,1.6,.5,1);animation:dtp 1.3s ease-out infinite}
@keyframes dtp{0%{transform:translate(-50%,-50%) scale(.5);opacity:.9}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
.xpl[data-anim="detents"][data-step="1"] .dt-knob,.xpl[data-anim="detents"][data-step="1"] .dt-pulse{top:27%}
.xpl[data-anim="detents"][data-step="2"] .dt-knob,.xpl[data-anim="detents"][data-step="2"] .dt-pulse{top:50%}
.xpl[data-anim="detents"][data-step="3"] .dt-knob,.xpl[data-anim="detents"][data-step="3"] .dt-pulse{top:73%}
.xpl[data-anim="detents"][data-step="4"] .dt-knob,.xpl[data-anim="detents"][data-step="4"] .dt-pulse{top:96%}
.xpl[data-anim="detents"][data-step="0"] .dt-gate[data-g="0"],
.xpl[data-anim="detents"][data-step="1"] .dt-gate[data-g="1"],
.xpl[data-anim="detents"][data-step="2"] .dt-gate[data-g="2"],
.xpl[data-anim="detents"][data-step="3"] .dt-gate[data-g="3"],
.xpl[data-anim="detents"][data-step="4"] .dt-gate[data-g="4"]{color:var(--st-blue);text-shadow:0 0 16px rgba(62,180,255,.6)}

/* ============================================================================
   5 — AUTOPILOT
   ========================================================================== */
.ap-row{position:absolute;left:7%;right:7%;top:24%;display:flex;gap:8px}
.ap-cell{flex:1;border-radius:11px;padding:12px 8px;background:rgba(255,255,255,.05);border:1px solid var(--st-line);text-align:center;transition:all .4s var(--ease)}
.ap-lbl{display:block;font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;color:var(--st-mut)}
.ap-val{display:block;font:700 22px/1.2 "IBM Plex Mono",monospace;color:var(--st-ink);margin-top:6px}
.ap-dot{display:block;width:7px;height:7px;border-radius:50%;margin:8px auto 0;background:rgba(255,255,255,.16);transition:all .35s}
.ap-master{position:absolute;left:7%;right:7%;bottom:16%;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.10em;color:var(--st-mut);background:rgba(255,255,255,.05);border:1px solid var(--st-line);transition:all .4s}
.ap-say>[data-k="3"]{color:#021810}
.xpl[data-anim="autopilot"][data-step="0"] .ap-cell[data-c="alt"],
.xpl[data-anim="autopilot"][data-step="1"] .ap-cell[data-c="hdg"],
.xpl[data-anim="autopilot"][data-step="2"] .ap-cell[data-c="spd"]{background:rgba(62,180,255,.12);border-color:var(--st-blue);transform:translateY(-4px)}
.xpl[data-anim="autopilot"][data-step="0"] .ap-cell[data-c="alt"] .ap-dot,
.xpl[data-anim="autopilot"][data-step="1"] .ap-cell[data-c="hdg"] .ap-dot,
.xpl[data-anim="autopilot"][data-step="2"] .ap-cell[data-c="spd"] .ap-dot{background:var(--st-blue);box-shadow:0 0 12px var(--st-blue)}
.xpl[data-anim="autopilot"][data-step="3"] .ap-cell .ap-dot{background:var(--st-green);box-shadow:0 0 12px var(--st-green)}
.xpl[data-anim="autopilot"][data-step="3"] .ap-master{background:linear-gradient(135deg,var(--st-green),#27c97e);color:#021810;border-color:transparent}

/* ============================================================================
   6 — TCAS
   ========================================================================== */
.tc-scope{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(62,180,255,.05),transparent 70%);border:1px solid rgba(62,180,255,.18)}
.tc-ring{position:absolute;inset:24%;border-radius:50%;border:1px solid rgba(62,180,255,.16)}
.tc-ring2{inset:48%}
.tc-sweep{position:absolute;left:50%;top:50%;width:50%;height:2px;transform-origin:left;background:linear-gradient(90deg,rgba(62,180,255,.7),transparent);animation:tcsweep 3.4s linear infinite}
@keyframes tcsweep{to{transform:rotate(360deg)}}
.tc-own{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-50%,-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid var(--st-blue)}
.tc-contact{position:absolute;left:50%;top:14%;width:13px;height:13px;transform:translate(-50%,-50%) rotate(45deg);background:transparent;border:2px solid #fff;transition:all .7s var(--ease)}
.tc-say{top:auto;bottom:10px;height:28px;font:800 15px/1 "Inter",sans-serif;letter-spacing:.04em;color:#fff}
.tc-say>[data-k="2"]{color:var(--st-amber)}.tc-say>[data-k="3"]{color:var(--st-red)}.tc-say>[data-k="4"]{color:var(--st-green)}
.xpl[data-anim="tcas"][data-step="0"] .tc-contact{top:12%;border-color:#fff;background:transparent;border-radius:0}
.xpl[data-anim="tcas"][data-step="1"] .tc-contact{top:28%;border-color:#fff;background:#fff;border-radius:0}
.xpl[data-anim="tcas"][data-step="2"] .tc-contact{top:38%;border-color:var(--st-amber);background:transparent;border-radius:50%;transform:translate(-50%,-50%) rotate(0)}
.xpl[data-anim="tcas"][data-step="3"] .tc-contact{top:44%;border-color:var(--st-red);background:rgba(255,90,110,.25);border-radius:2px;transform:translate(-50%,-50%) rotate(0);box-shadow:0 0 16px rgba(255,90,110,.6)}
.xpl[data-anim="tcas"][data-step="4"] .tc-contact{top:20%;left:66%;border-color:var(--st-green);background:transparent;border-radius:50%}

/* ============================================================================
   7 — AI VOICE COPILOT
   ========================================================================== */
.vc-mic{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--st-violet),var(--st-blue));box-shadow:0 0 0 0 rgba(139,140,255,.5)}
.vc-mic::after{content:"";position:absolute;left:50%;top:42%;width:11px;height:18px;border-radius:6px;transform:translate(-50%,-50%);background:#fff}
.vc-mic::before{content:"";position:absolute;left:50%;bottom:7px;width:18px;height:9px;border:2px solid #fff;border-top:0;border-radius:0 0 10px 10px;transform:translateX(-50%)}
.vc-wave{position:absolute;left:50%;top:54%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;height:40px}
.vc-wave i{width:4px;border-radius:3px;background:linear-gradient(180deg,var(--st-violet),var(--st-blue));height:8px}
.vc-line{position:absolute;left:8%;right:8%;bottom:12px;height:34px}
.vc-say{font:600 13px/1.3 "IBM Plex Mono",monospace;color:var(--st-violet)}
.vc-say>[data-k="1"]{color:#cfe6ff}.vc-say>[data-k="3"]{color:var(--st-green)}
.xpl[data-anim="voice"][data-step="0"] .vc-mic,.xpl[data-anim="voice"][data-step="1"] .vc-mic{animation:vcpulse 1.4s ease-out infinite}
@keyframes vcpulse{0%{box-shadow:0 0 0 0 rgba(139,140,255,.55)}100%{box-shadow:0 0 0 22px rgba(139,140,255,0)}}
.xpl[data-anim="voice"][data-step="1"] .vc-wave i{animation:vcwave 1s ease-in-out infinite}
.vc-wave i:nth-child(1){animation-delay:0s}.vc-wave i:nth-child(2){animation-delay:.08s}.vc-wave i:nth-child(3){animation-delay:.16s}
.vc-wave i:nth-child(4){animation-delay:.24s}.vc-wave i:nth-child(5){animation-delay:.12s}.vc-wave i:nth-child(6){animation-delay:.2s}.vc-wave i:nth-child(7){animation-delay:.04s}
@keyframes vcwave{0%,100%{height:8px}50%{height:34px}}
.xpl[data-anim="voice"][data-step="3"] .vc-mic{background:linear-gradient(135deg,var(--st-green),#27c97e)}

/* ============================================================================
   8 — V-SPEEDS / TAKEOFF CALLOUTS
   ========================================================================== */
.vs-rwy{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,#0c1426,#0a0f1c);border-top:1px solid var(--st-line)}
.vs-rwy::before{content:"";position:absolute;left:50%;top:14px;bottom:0;width:8px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 16px,transparent 16px 40px);animation:vsrwy .5s linear infinite}
@keyframes vsrwy{to{background-position-y:40px}}
.vs-plane{position:absolute;left:50%;bottom:36%;width:34px;height:13px;transform:translateX(-50%);transition:transform .7s var(--ease)}
.vs-plane::before{content:"";position:absolute;inset:0;background:var(--st-ink);clip-path:polygon(0 40%,70% 40%,88% 0,96% 0,82% 42%,100% 50%,82% 58%,96% 100%,88% 100%,70% 60%,0 60%);border-radius:2px}
.vs-spd{position:absolute;left:9%;top:18%;font:800 30px/1 "IBM Plex Mono",monospace;color:var(--st-blue);width:96px;height:34px}
.vs-spd small{font:600 11px/1 "IBM Plex Mono",monospace;color:var(--st-mut)}
.vs-num{position:relative;display:inline-block;width:62px;height:34px;vertical-align:middle}
.vs-call{position:absolute;right:8%;top:30%;width:40%;height:50px}
.vs-say{font:900 30px/1 "Inter",sans-serif;letter-spacing:.02em;color:var(--st-amber)}
.vs-say>[data-k="0"]{font-size:15px;color:var(--st-mut);font-weight:700}
.xpl[data-anim="vspeeds"][data-step="2"] .vs-plane{transform:translateX(-50%) translateY(-16px) rotate(-12deg)}
.xpl[data-anim="vspeeds"][data-step="3"] .vs-plane{transform:translateX(-50%) translateY(-40px) rotate(-12deg)}

/* ============================================================================
   9 — VIOLATION AVOIDANCE
   ========================================================================== */
.va-band{position:absolute;left:6%;right:6%;top:54%;height:2px;background:repeating-linear-gradient(90deg,var(--st-red) 0 10px,transparent 10px 18px)}
.va-band::after{content:"10,000 ft";position:absolute;right:0;top:5px;font:600 9px/1 "IBM Plex Mono",monospace;color:var(--st-red)}
.va-sky{position:absolute;left:6%;right:6%;top:54%;bottom:18%;background:rgba(255,90,110,.05);border-radius:6px}
.va-plane{position:absolute;left:16%;top:18%;width:30px;height:12px;transition:top .8s var(--ease)}
.va-plane::before{content:"";position:absolute;inset:0;background:var(--st-blue);clip-path:polygon(0 42%,70% 42%,90% 0,97% 0,82% 44%,100% 50%,82% 56%,97% 100%,90% 100%,70% 58%,0 58%)}
.va-spd{position:absolute;right:8%;top:20%;font:800 26px/1 "IBM Plex Mono",monospace;width:96px;height:30px;text-align:right}
.va-spd small{font:600 10px/1 "IBM Plex Mono",monospace;color:var(--st-mut)}
.va-num{position:relative;display:inline-block;width:70px;height:30px}
.va-num>[data-k="0"],.va-num>[data-k="1"]{color:var(--st-red);justify-content:flex-end}
.va-num>[data-k="2"],.va-num>[data-k="3"]{color:var(--st-green);justify-content:flex-end}
.va-phase{position:absolute;left:8%;bottom:12px;height:24px;width:60%}
.va-say{justify-content:flex-start!important}
.va-say>*{justify-content:flex-start;font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:var(--st-dim)}
.va-say>[data-k="1"]{color:var(--st-amber)}.va-say>[data-k="2"]{color:var(--st-red)}.va-say>[data-k="3"]{color:var(--st-green)}
.xpl[data-anim="vas"][data-step="0"] .va-plane{top:14%}
.xpl[data-anim="vas"][data-step="1"] .va-plane{top:34%}
.xpl[data-anim="vas"][data-step="2"] .va-plane{top:48%}
.xpl[data-anim="vas"][data-step="3"] .va-plane{top:50%}

/* ============================================================================
   10 — LIVE MAP
   ========================================================================== */
.mp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(55,245,154,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(55,245,154,.06) 1px,transparent 1px);background-size:30px 30px;opacity:.7}
.mp-land{position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 70%,rgba(55,245,154,.10),transparent 60%),radial-gradient(50% 45% at 80% 30%,rgba(62,180,255,.08),transparent 60%)}
.mp-path{position:absolute;left:16%;top:70%;width:64%;height:44%;border-top:2px dashed rgba(255,255,255,.35);border-radius:50%;transform:rotate(-8deg)}
.mp-ap{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid var(--st-green);background:rgba(55,245,154,.2)}
.mp-dep{left:15%;top:68%}.mp-arr{right:14%;top:30%}
.mp-plane{position:absolute;left:16%;top:69%;width:26px;height:11px;transition:all .9s var(--ease)}
.mp-plane::before{content:"";position:absolute;inset:0;background:var(--st-ink);clip-path:polygon(0 42%,70% 42%,90% 0,97% 0,82% 44%,100% 50%,82% 56%,97% 100%,90% 100%,70% 58%,0 58%);transform:rotate(-32deg)}
.mp-read{position:absolute;left:8%;bottom:10px;height:26px;width:70%}
.mp-say{justify-content:flex-start!important}
.mp-say>*{justify-content:flex-start;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--st-green)}
.xpl[data-anim="map"][data-step="0"] .mp-plane{left:16%;top:69%}
.xpl[data-anim="map"][data-step="1"] .mp-plane{left:40%;top:40%}
.xpl[data-anim="map"][data-step="2"] .mp-plane{left:60%;top:30%}
.xpl[data-anim="map"][data-step="3"] .mp-plane{left:80%;top:28%}

/* ---- dark mode ---- */
@media (prefers-color-scheme: dark){
  .xpl-steps>li.is-active{background:rgba(0,153,255,.12);border-color:rgba(0,153,255,.30)}
}