/* ============================================================================
   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%}

/* ============================================================================
   11 — SHARED: FMA STRIP + CLIMB TILE  (open climb / managed climb)
   Faithful to the app: Airbus FMA columns (green active modes, cyan/magenta
   armed) + an Autopilot value tile (white idle → blue OPEN → magenta MANAGED).
   ========================================================================== */
.oc,.mc{--st-mag:#ff94ff;--st-teal:#2fd8c8;--st-cyan:#00e5ff}
.fma{position:absolute;left:7%;right:7%;top:13%;display:flex;gap:7px;height:42px}
.fma-cell{flex:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.035);border:1px solid var(--st-line);position:relative;overflow:hidden}
.fma-cap{font:600 7px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:var(--st-dim);margin-bottom:5px}
.fma-txt{position:relative;width:100%;height:14px}
.fma-txt .xpl-say>*{font:700 12px/1 "IBM Plex Mono",monospace;letter-spacing:.02em}
.fma-green .xpl-say>*{color:var(--st-green)}
.fma-arm .xpl-say>*{color:var(--st-cyan)}
.fma-arm .xpl-say>[data-k="3"]{color:var(--st-green)}
.mc .fma-arm .xpl-say>[data-k="1"],.mc .fma-arm .xpl-say>[data-k="2"]{color:var(--st-mag)}
.fma-box{position:absolute;inset:0;border:1.5px solid #fff;border-radius:8px;opacity:0}
.xpl[data-anim="openclb"][data-step="1"] .fma-v .fma-box,
.xpl[data-anim="openclb"][data-step="3"] .fma-v .fma-box,
.xpl[data-anim="mgdclb"][data-step="1"] .fma-v .fma-box,
.xpl[data-anim="mgdclb"][data-step="2"] .fma-v .fma-box{opacity:1;animation:fmabox 1.1s ease-out}
@keyframes fmabox{0%{opacity:1}100%{opacity:.25}}

/* the Autopilot value tile */
.clbtile{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);width:46%;min-width:158px;
  border-radius:12px;padding:12px 10px 14px;background:rgba(255,255,255,.05);border:1.5px solid var(--st-line);
  text-align:center;transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s}
.clb-top{display:flex;align-items:center;justify-content:center;gap:7px}
.clb-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);transition:all .4s}
.clb-lbl{font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--st-mut)}
.clb-chip{font:800 8px/1 "Inter",sans-serif;letter-spacing:.06em;padding:3px 7px;border-radius:20px;opacity:0;transition:opacity .4s;
  color:var(--st-mag);background:rgba(255,148,255,.16)}
.clb-val{font:800 27px/1.1 "IBM Plex Mono",monospace;color:var(--st-ink);margin-top:7px;transition:color .4s}
.clb-unit{font:600 10px/1 "IBM Plex Mono",monospace;color:var(--st-mut);margin-left:3px}
/* managed detection ring (SVG stroke sweep on the hold) */
.clb-ring{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.clb-ring svg{width:100%;height:100%;display:block}
.clb-sweep{fill:none;stroke:var(--st-mag);stroke-width:3;stroke-linecap:round}

/* OPEN CLIMB — tap = pull → blue tile */
.xpl[data-anim="openclb"][data-step="1"] .clbtile,
.xpl[data-anim="openclb"][data-step="2"] .clbtile,
.xpl[data-anim="openclb"][data-step="3"] .clbtile{background:rgba(62,180,255,.12);border-color:var(--st-blue);transform:translateX(-50%) translateY(-3px)}
.xpl[data-anim="openclb"][data-step="1"] .clb-dot,
.xpl[data-anim="openclb"][data-step="2"] .clb-dot,
.xpl[data-anim="openclb"][data-step="3"] .clb-dot{background:var(--st-blue);box-shadow:0 0 11px var(--st-blue)}
.xpl[data-anim="openclb"][data-step="1"] .clb-val,
.xpl[data-anim="openclb"][data-step="2"] .clb-val,
.xpl[data-anim="openclb"][data-step="3"] .clb-val{color:var(--st-blue)}

/* MANAGED CLIMB — hold = push → magenta ring, then magenta dot + MANAGED chip */
.xpl[data-anim="mgdclb"][data-step="0"] .clb-ring{opacity:1}
.xpl[data-anim="mgdclb"][data-step="0"] .clb-sweep{animation:clbsweep 1.5s var(--ease) forwards}
@keyframes clbsweep{0%{stroke-dasharray:0 400}100%{stroke-dasharray:400 400}}
.xpl[data-anim="mgdclb"][data-step="1"] .clbtile,
.xpl[data-anim="mgdclb"][data-step="2"] .clbtile,
.xpl[data-anim="mgdclb"][data-step="3"] .clbtile{background:rgba(255,148,255,.10);border-color:var(--st-mag)}
.xpl[data-anim="mgdclb"][data-step="1"] .clb-dot,
.xpl[data-anim="mgdclb"][data-step="2"] .clb-dot,
.xpl[data-anim="mgdclb"][data-step="3"] .clb-dot{background:var(--st-mag);box-shadow:0 0 11px var(--st-mag)}
.xpl[data-anim="mgdclb"][data-step="1"] .clb-chip,
.xpl[data-anim="mgdclb"][data-step="2"] .clb-chip,
.xpl[data-anim="mgdclb"][data-step="3"] .clb-chip{opacity:1}

/* ============================================================================
   12 — AUTO-TAXI  (map long-press → blue centreline route)
   ========================================================================== */
.tx{--st-teal:#2fd8c8}
.tx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px}
.tx-tw{position:absolute;height:3px;border-radius:2px;background:rgba(250,204,26,.9);box-shadow:0 0 8px rgba(250,204,26,.4)}
.tx-tw1{left:10%;bottom:22%;width:52%;transform:rotate(-4deg)}
.tx-tw2{left:44%;bottom:22%;width:3px;height:44%;transform:rotate(0)}
.tx-tw3{left:44%;top:30%;width:40%;transform:rotate(6deg)}
.tx-rwy{position:absolute;left:20%;top:26%;width:16px;height:52%;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.5);border-radius:2px;transform:rotate(24deg);transform-origin:center}
.tx-rwy::after{content:"";position:absolute;left:50%;top:8%;bottom:8%;width:2px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,rgba(255,255,255,.6) 0 10px,transparent 10px 20px)}
.tx-route{position:absolute;inset:0;pointer-events:none}
.tx-route path{fill:none;stroke:var(--st-blue);stroke-width:4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(62,180,255,.55));stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1s var(--ease),stroke .4s}
.xpl[data-anim="taxi"][data-step="1"] .tx-route path,
.xpl[data-anim="taxi"][data-step="2"] .tx-route path,
.xpl[data-anim="taxi"][data-step="3"] .tx-route path{stroke-dashoffset:0}
.xpl[data-anim="taxi"][data-step="2"] .tx-route path{stroke:var(--st-amber);filter:drop-shadow(0 0 6px rgba(255,184,77,.55))}
.tx-dest{position:absolute;right:13%;top:24%;width:15px;height:15px;border-radius:50%;transform:translate(50%,-50%);opacity:0;transition:opacity .4s;
  background:conic-gradient(#fff 0 25%,#0a1120 0 50%,#fff 0 75%,#0a1120 0);border:2px solid var(--st-blue);box-shadow:0 0 0 2px rgba(62,180,255,.3)}
.xpl[data-anim="taxi"][data-step="1"] .tx-dest,.xpl[data-anim="taxi"][data-step="2"] .tx-dest,.xpl[data-anim="taxi"][data-step="3"] .tx-dest{opacity:1}
.tx-plane{position:absolute;left:12%;bottom:20%;width:24px;height:10px;transition:all .9s var(--ease);z-index:3}
.tx-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%)}
.xpl[data-anim="taxi"][data-step="1"] .tx-plane{left:14%;bottom:21%}
.xpl[data-anim="taxi"][data-step="2"] .tx-plane{left:44%;bottom:34%}
.xpl[data-anim="taxi"][data-step="3"] .tx-plane{left:82%;top:26%;bottom:auto}
.tx-hand{position:absolute;left:26%;bottom:24%;width:22px;height:22px;opacity:0;transition:opacity .3s}
.tx-hand::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--st-blue);animation:txtap 1.3s ease-out infinite}
.tx-hand::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:var(--st-blue)}
@keyframes txtap{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.xpl[data-anim="taxi"][data-step="0"] .tx-hand{opacity:1}
.tx-status{position:absolute;left:7%;right:7%;bottom:12px;height:26px}
.tx-say>*{justify-content:flex-start;font:700 11px/1.2 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--st-mut)}
.tx-say>[data-k="1"]{color:var(--st-blue)}
.tx-say>[data-k="2"]{color:var(--st-amber)}
.tx-say>[data-k="3"]{color:var(--st-green)}

/* ============================================================================
   13 — AUTO THRUST / A/THR  (Airbus detented lever + teal autothrust tag)
   ========================================================================== */
.at{--st-teal:#2fd8c8}
.at-track{position:absolute;left:15%;top:12%;bottom:12%;width:44px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--st-line);overflow:hidden}
.at-rev{position:absolute;left:0;right:0;bottom:0;height:20%;background:rgba(255,90,110,.14)}
.at-fill{position:absolute;left:0;right:0;bottom:20%;height:16%;background:linear-gradient(180deg,var(--st-blue),#19cc99);box-shadow:0 0 16px rgba(62,180,255,.4);transition:height .8s var(--ease),bottom .8s var(--ease)}
.at-idle{position:absolute;left:0;right:0;bottom:20%;height:1px;background:rgba(255,255,255,.35)}
.at-knob{position:absolute;left:-6px;right:-6px;height:16px;bottom:36%;border-radius:6px;background:linear-gradient(180deg,#fff,#c5d2e6);box-shadow:0 5px 12px rgba(0,0,0,.55);transition:bottom .8s cubic-bezier(.5,1.5,.5,1)}
.at-gate{position:absolute;left:calc(15% + 56px);white-space:nowrap;transform:translateY(-50%);font:600 9px/1 "IBM Plex Mono",monospace;color:var(--st-dim);transition:color .35s,text-shadow .35s}
.at-gate::before{content:"";position:absolute;left:-14px;top:50%;width:10px;height:1.5px;transform:translateY(-50%);background:rgba(255,255,255,.4)}
.at-gate[data-g="toga"]{top:14%;color:rgba(255,255,255,.85)}
.at-gate[data-g="flx"]{top:27%;color:rgba(255,255,255,.85)}
.at-gate[data-g="clb"]{top:41%;color:rgba(255,255,255,.85)}
.at-gate[data-g="idle"]{top:64%;color:rgba(255,255,255,.45)}
.at-gate[data-g="rev"]{top:80%;color:rgba(255,90,110,.85)}
.at-gate[data-g="revf"]{top:94%;color:rgba(255,90,110,.85)}
/* knob + fill positions per step (bottom-anchored %) */
.xpl[data-anim="athr"][data-step="0"] .at-knob{bottom:57%}.xpl[data-anim="athr"][data-step="0"] .at-fill{height:37%}
.xpl[data-anim="athr"][data-step="1"] .at-knob{bottom:57%}.xpl[data-anim="athr"][data-step="1"] .at-fill{height:37%}
.xpl[data-anim="athr"][data-step="2"] .at-knob{bottom:60%}.xpl[data-anim="athr"][data-step="2"] .at-fill{height:40%;background:linear-gradient(180deg,var(--st-green),#19cc99)}
.xpl[data-anim="athr"][data-step="3"] .at-knob{bottom:50%}.xpl[data-anim="athr"][data-step="3"] .at-fill{height:30%;background:linear-gradient(180deg,var(--st-green),#19cc99)}
.xpl[data-anim="athr"][data-step="4"] .at-knob{bottom:57%}.xpl[data-anim="athr"][data-step="4"] .at-fill{height:37%}
/* active-detent glow */
.xpl[data-anim="athr"][data-step="0"] .at-gate[data-g="clb"],
.xpl[data-anim="athr"][data-step="1"] .at-gate[data-g="clb"],
.xpl[data-anim="athr"][data-step="4"] .at-gate[data-g="clb"]{color:var(--st-blue);text-shadow:0 0 14px rgba(62,180,255,.6)}
/* teal A/THR tag pinned over the lever */
.at-tag{position:absolute;left:15%;top:50%;transform:translate(-6px,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 12px;border-radius:11px;background:rgba(47,216,200,.28);border:1px solid rgba(47,216,200,.9);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);opacity:0;transition:opacity .4s,transform .4s;z-index:4}
.at-tag b{font:800 13px/1 "Inter",sans-serif;color:#fff;letter-spacing:.02em}
.at-tag small{font:700 6.5px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.8);text-transform:uppercase}
.xpl[data-anim="athr"][data-step="1"] .at-tag,
.xpl[data-anim="athr"][data-step="2"] .at-tag,
.xpl[data-anim="athr"][data-step="3"] .at-tag{opacity:1;transform:translate(28px,-50%)}
.at-read{position:absolute;right:8%;top:22%;text-align:right;width:40%}
.at-num{position:relative;display:inline-block;width:90px;height:36px;vertical-align:middle}
.at-num .xpl-say>*{justify-content:flex-end;font:800 34px/1 "IBM Plex Mono",monospace;color:var(--st-ink)}
.at-read small{display:block;margin-top:6px;font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:var(--st-mut)}
.at-status{position:absolute;right:8%;bottom:16%;width:40%;height:26px}
.at-say>*{justify-content:flex-end;text-align:right;font:800 14px/1.1 "Inter",sans-serif;letter-spacing:.02em}
.at-say>[data-k="0"]{color:var(--st-mut)}
.at-say>[data-k="1"]{color:var(--st-teal)}
.at-say>[data-k="2"],.at-say>[data-k="3"]{color:var(--st-green)}
.at-say>[data-k="4"]{color:var(--st-teal)}
/* disconnect banner on the final step */
.at-banner{position:absolute;left:50%;top:9%;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border-radius:12px;
  background:linear-gradient(135deg,var(--st-teal),#1f9f95);color:#00201d;font:800 11px/1 "Inter",sans-serif;letter-spacing:.04em;
  opacity:0;transition:opacity .35s;z-index:5}
.xpl[data-anim="athr"][data-step="4"] .at-banner{opacity:1;animation:atflash .5s ease-in-out 2}
@keyframes atflash{0%,100%{opacity:1}50%{opacity:.5}}

/* ---- 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)}
}