/* Fly-through scroll (W11, v4 W13). Everything here applies only while fly.js has switched the page on (html.fly-on).
   Without it (reduced motion, ?fly=off, no JS) the stations are ordinary blocks and the space layers are hidden. */

.fly{position:relative}
.fly-snap-pt,.fly-objs{display:none}
.fly-space,.fly-field,.fly-flash{display:none}

/* ---------- the stations ---------- */
html.fly-on .fly-stage{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  perspective:1000px;perspective-origin:50% 46%;                 /* one camera: the rooms' vanishing point */
  display:flex;align-items:center;overflow:hidden}
html.fly-on .fly-panel{position:relative;width:100%;flex:none;will-change:transform,opacity;opacity:0}
html.fly-on .fly-held .fly-panel{pointer-events:auto;will-change:auto}
/* a scroll box inside a panel in flight is drawn flat and full size by Chrome: it scrolls only while held */
html.fly-on .fly:not(.fly-held) .fly-scroller{overflow:clip!important}   /* only the held station takes clicks; re-rastered flat, so text is sharp */

/* ---------- the space: rooms that stream toward you ---------- */
html.fly-on :is(.room,.roomlit){display:none}                 /* our rooms replace theme.js's static one */
html.fly-on .fly-space{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,transparent 3%,rgba(0,0,0,.4) 20%,#000 62%);
          mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,transparent 3%,rgba(0,0,0,.4) 20%,#000 62%)}
html.fly-on .spot .fly-space{position:absolute;z-index:auto;  /* the lit copy, only under the mouse light */
  -webkit-mask-image:radial-gradient(230px circle at var(--sx,-999px) var(--sy,-999px),#000,transparent 85%);
          mask-image:radial-gradient(230px circle at var(--sx,-999px) var(--sy,-999px),#000,transparent 85%)}
.fly-room{position:absolute;inset:0;opacity:0}
.fly-rails,.fly-rings{position:absolute;left:-25vw;top:-29vh;width:150vw;height:150vh;transform-origin:50% 50%;will-change:transform}
.fly-room svg{width:100%;height:100%;display:block}
.fly-room svg{stroke:rgba(125,149,255,.075)}
html.gray .fly-room svg{stroke:rgba(125,149,255,.1)}
html.light .fly-room svg{stroke:rgba(40,60,140,.075)}
.fly-tunnel .fly-rings svg{stroke-width:1.4}
.spot .fly-room svg{stroke:rgba(125,149,255,.6)}
html.light .spot .fly-room svg{stroke:rgba(51,85,224,.35)}

/* ---------- objects flying past ---------- */
html.fly-on .fly-field{display:block;position:fixed;inset:0;pointer-events:none;overflow:hidden;
  perspective:1000px;perspective-origin:50% 46%}
.fly-back{z-index:1}                                            /* behind the sections */
.fly-front{z-index:5}                                           /* passing the camera, in front of everything */
.fo{position:absolute;left:50%;top:46%;opacity:0;will-change:transform,opacity;transform-style:preserve-3d;white-space:nowrap}

/* glass chips: the work the system does, streaming past */
.fo-chip{display:flex;align-items:center;gap:12px;padding:14px 20px 14px 14px;border-radius:16px;
  font:600 17px/1.2 Barlow,system-ui,sans-serif;color:#EAF0FF;
  background:linear-gradient(180deg,rgba(28,36,66,.92),rgba(16,22,44,.92));
  border:1px solid rgba(125,149,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -12px rgba(0,0,0,.6),0 0 40px -8px rgba(51,85,224,.45)}
.fo-chip small{display:block;font:500 13px/1.3 Barlow,system-ui,sans-serif;color:rgba(234,240,255,.62);margin-top:2px}
.fo-chip i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;font-style:normal;font-size:18px;
  background:linear-gradient(180deg,#4A6BFF,#2E4FD6);color:#fff;box-shadow:0 6px 16px -4px rgba(51,85,224,.7)}
.fo-chip i.ok{background:linear-gradient(180deg,#2BC77A,#16A35C);box-shadow:0 6px 16px -4px rgba(22,163,92,.6)}
.fo-chip i.star{background:linear-gradient(180deg,#F5B83D,#E79B0B);box-shadow:0 6px 16px -4px rgba(231,155,11,.6)}
html.light .fo-chip{color:#141A2E;background:linear-gradient(180deg,#FFFFFF,#F2F5FB);border-color:rgba(16,24,40,.08);
  box-shadow:0 0 0 1px rgba(16,24,40,.04),0 2px 4px rgba(16,24,40,.06),0 22px 44px -14px rgba(16,24,40,.32)}
html.light .fo-chip small{color:#5B6478}

/* the gate: a ring the jet flies through when the room changes (Sam 2026-10-15: never a cross-fade between rooms).
   fly.js shows the next room inside the ring and the old one outside it, so the room transforms as you pass through. */
.fly-gate{position:absolute;left:50%;top:46%;width:118vmin;height:118vmin;margin:-59vmin 0 0 -59vmin;border-radius:50%;opacity:0;
  will-change:transform,opacity;border:3px solid rgba(125,149,255,.95);
  box-shadow:0 0 0 10px rgba(51,85,224,.14),0 0 60px 6px rgba(51,85,224,.55),inset 0 0 60px 6px rgba(51,85,224,.45)}
.fly-gate::before{content:"";position:absolute;inset:5%;border-radius:50%;border:2px dashed rgba(125,149,255,.7)}
.fly-gate::after{content:"";position:absolute;inset:-7%;border-radius:50%;border:1px solid rgba(125,149,255,.35)}
html.light .fly-gate{border-color:rgba(51,85,224,.85)}

/* the portal flash: the moment the camera passes through an element into the next room */
html.fly-on .fly-flash{display:block;position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 46%,#fff 0,rgba(214,226,255,.95) 18%,rgba(91,124,255,.85) 45%,rgba(20,30,80,.0) 80%)}
html.dark .fly-flash,html.gray .fly-flash{background:radial-gradient(circle at 50% 46%,#fff 0,rgba(160,184,255,.95) 16%,rgba(51,85,224,.85) 42%,rgba(5,8,20,.9) 85%)}

/* ---------- scroll snap: a light flick lands a station at its hold ---------- */
html.fly-snap{scroll-snap-type:y proximity}
html.fly-snap .fly-snap-pt{display:block;position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}

/* ---------- the laser dot (Sam 2026-10-15): a small logo-blue dot with a thin navy ring, mouse only, while flying.
   A faint white halo keeps it visible on navy panels; it grows a little over things you can click. CSS only: free per frame. ---------- */
@media (hover:hover) and (pointer:fine){
  html.fly-on,html.fly-on body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='4.6' fill='%23ffffff' fill-opacity='.55'/%3E%3Ccircle cx='14' cy='14' r='3.5' fill='%233355E0' stroke='%230B1230' stroke-width='1.1'/%3E%3C/svg%3E") 14 14,default}
  html.fly-on :is(a,button,summary,label,select,[role=button],[role=tab],.rp-cat,.dm-card,.dm-tab){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='9' fill='%233355E0' fill-opacity='.18'/%3E%3Ccircle cx='14' cy='14' r='6.3' fill='%23ffffff' fill-opacity='.55'/%3E%3Ccircle cx='14' cy='14' r='5' fill='%233355E0' stroke='%230B1230' stroke-width='1.1'/%3E%3C/svg%3E") 14 14,pointer}
  html.fly-on :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,[contenteditable]){cursor:text}
}

@media (prefers-reduced-motion:reduce){
  html.fly-on .fly-stage{position:static;display:block;perspective:none}
  html.fly-on .fly-panel{transform:none!important;opacity:1!important}
  html.fly-on :is(.fly-space,.fly-field,.fly-flash){display:none}
}

/* ---------- the race (W15): HUD, toasts, rival jets, the finish gate ---------- */
.fly-hud,.fly-toast{display:none}
html.fly-on .fly-hud{display:flex;position:fixed;left:50%;top:84px;z-index:7;pointer-events:none;align-items:center;gap:16px;
  padding:6px 8px 6px 16px;border-radius:14px;transform:translateX(-50%);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s;
  background:linear-gradient(180deg,rgba(14,20,40,.86),rgba(8,12,28,.86));color:#EAF0FF;font:600 13px/1 Barlow,system-ui,sans-serif;
  box-shadow:inset 0 0 0 1px rgba(125,149,255,.35),0 14px 34px -14px rgba(5,10,30,.7),0 0 30px -10px rgba(51,85,224,.6)}
html.fly-on .fly-hud.gone{opacity:0!important;visibility:hidden}
html.fly-on:not(.fly-moving) .fly-hud{transform:translateX(-50%) translateY(-10px) scale(.8);opacity:.75}
.fly-hud>div{display:flex;align-items:center;gap:9px}
.fly-hud>*{white-space:nowrap;flex:none}
.fly-hud .hud-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(234,240,255,.62)}
.fly-hud b{font:700 19px/1 "Barlow Condensed",Barlow,sans-serif;letter-spacing:.02em;min-width:46px}
.fly-hud .hud-bar{position:relative;width:150px;height:8px;border-radius:9px;background:rgba(125,149,255,.18);overflow:hidden}
.fly-hud .hud-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);border-radius:9px;
  background:linear-gradient(90deg,#3355E0,#5E8BFF 60%,#7CF0B5)}
.fly-hud.full .hud-pct{color:#7CF0B5}
.fly-hud .hud-p{color:#fff}
.fly-hud .hud-skip{pointer-events:auto;padding:6px 12px;border-radius:9px;font:700 12px/1 Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(51,85,224,.5);box-shadow:inset 0 0 0 1px rgba(125,149,255,.6);text-decoration:none}
.fly-hud .hud-skip:hover{background:#3355E0}
.fly-hud .hud-bars{display:flex;gap:3px;align-items:flex-end;height:16px}
.fly-hud .hud-bars i{width:4px;border-radius:2px;background:rgba(125,149,255,.22)}
.fly-hud .hud-bars i:nth-child(1){height:5px}.fly-hud .hud-bars i:nth-child(2){height:6px}.fly-hud .hud-bars i:nth-child(3){height:8px}.fly-hud .hud-bars i:nth-child(4){height:9px}
.fly-hud .hud-bars i:nth-child(5){height:11px}.fly-hud .hud-bars i:nth-child(6){height:12px}.fly-hud .hud-bars i:nth-child(7){height:14px}.fly-hud .hud-bars i:nth-child(8){height:16px}
.fly-hud .hud-bars[data-n="1"] i:nth-child(-n+1),.fly-hud .hud-bars[data-n="2"] i:nth-child(-n+2),.fly-hud .hud-bars[data-n="3"] i:nth-child(-n+3),
.fly-hud .hud-bars[data-n="4"] i:nth-child(-n+4),.fly-hud .hud-bars[data-n="5"] i:nth-child(-n+5),.fly-hud .hud-bars[data-n="6"] i:nth-child(-n+6),
.fly-hud .hud-bars[data-n="7"] i:nth-child(-n+7),.fly-hud .hud-bars[data-n="8"] i{background:#7CF0B5}
html.fly-on .fly-toast{display:block;position:fixed;left:50%;top:144px;z-index:7;pointer-events:none;opacity:0;transform:translate(-50%,-8px);
  padding:10px 18px;border-radius:12px;text-align:center;background:linear-gradient(180deg,#16A35C,#0F7F47);color:#fff;
  box-shadow:0 18px 40px -14px rgba(22,163,92,.7)}
.fly-toast small{display:block;font:700 11px/1.2 Barlow,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.fly-toast b{display:block;font:700 20px/1.2 "Barlow Condensed",Barlow,sans-serif;letter-spacing:.02em}
.fly-toast.on{animation:flyToast 2.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes flyToast{0%{opacity:0;transform:translate(-50%,-8px) scale(.9)}10%,80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px)}}

/* the finish gate: checkered */
.fly-gate[data-style=finish]{border:12px dashed #fff;box-shadow:0 0 0 4px #141A2E,inset 0 0 0 4px #141A2E,0 0 60px 10px rgba(124,240,181,.35)}
.fly-gate[data-style=finish]::before{border-color:rgba(124,240,181,.8)}

@media (max-width:859px){
  html.fly-on .fly-hud{top:70px;gap:12px;padding:7px 12px}
  .fly-hud .hud-speed{display:none}.fly-hud .hud-bar{width:80px}.fly-hud b{font-size:18px;min-width:38px}
  html.fly-on .fly-toast{top:118px}
  html.fly-on:not(.fly-moving) .fly-hud{opacity:0}   /* phones: the HUD shows only in flight, never over a held section */
}
@media (prefers-reduced-motion:reduce){html.fly-on :is(.fly-hud,.fly-toast){display:none}}

/* space for the warp (v5.1, Sam 2026-10-15: "through a portal into space with stars, into hyperspace, then pops back") */
.fly-void{display:none}
html.fly-on .fly-void{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 46%,#101a44 0%,#060a1c 45%,#02030a 100%)}
.fly-stars svg{stroke:none}
.fly-stars .fly-rings circle{fill:#fff}
.fly-stars .fly-rails svg{stroke:rgba(180,200,255,.85);stroke-width:1.4;opacity:var(--warp,0)}
html.light .fly-stars .fly-rails svg{stroke:rgba(180,200,255,.85)}