/* Cyber mode, the Classic | Cyber switch and the HUD (Telemetry, Controls, status bar) in both modes. */

/* ============================================================================================
   CYBER MODE — everything below only applies when <body class="ab-cyber">. Colours are the neon tokens
   at the top of this block; the 3D look is switched in JS (search "CYBER MODE" in the script).
   ============================================================================================ */
body.ab-cyber {
  --cream: #03080f; --paper: #040a12; --dark: #02050a;
  --ink: #d8fbff; --ink-soft: #7fc4d1; --light: #d8fbff; --light-soft: #7fc4d1;
  --orange: #00e5ff; --annot: #00e5ff;
  --line-light: rgba(0, 229, 255, 0.28); --line-dark: rgba(0, 229, 255, 0.28);
  --cy: #00e5ff; --cy-2: #ff2fd6; --cy-amber: #ffb300; --cy-glow: 0 0 12px rgba(0, 229, 255, 0.55);
  --bs-primary: #00e5ff; --bs-primary-rgb: 0, 229, 255;   /* Bootstrap primary turns cyan too (HUD outline and heading line) */
  --sans: "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace;
  --display: "Orbitron", "Share Tech Mono", sans-serif;
  background: #02050a;
}
body.ab-cyber .ab-big, body.ab-cyber .ab-the, body.ab-cyber .ab-hero-title h1, body.ab-cyber .ab-hero-title .ab-pre, body.ab-cyber h3.ab-sub, body.ab-cyber .ab-moment-card h3, body.ab-cyber dialog h3 {
  font-family: var(--display); letter-spacing: 0.04em; text-shadow: var(--cy-glow);
}
body.ab-cyber .ab-big { font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; }
body.ab-cyber .ab-the { font-size: clamp(13px, 1.2vw, 17px); letter-spacing: 0.2em; }
body.ab-cyber h3.ab-sub { font-size: 16px; }
/* scanlines + vignette + faint grid over the whole page */
#cyberfx { position: fixed; inset: 0; z-index: 7; pointer-events: none; display: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,229,255,0.045) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%); }
body.ab-cyber #cyberfx { display: block; }
/* text cards: dark glass with neon border and corner brackets */
body.ab-cyber .ab-copy.ab-text-card { background: rgba(2, 12, 20, 0.78) !important; --al-border-bg: rgba(0, 229, 255, 0.35); }   /* outline: alfuix al-border (see CARDS in css/components.css) */
body.ab-cyber .ab-facts dd, body.ab-cyber .ab-fact b { color: var(--cy); text-shadow: var(--cy-glow); font-family: var(--display); }
/* page sections */
body.ab-cyber .ab-hero { background: #02050a; }
body.ab-cyber .ab-hero-media { filter: grayscale(1) contrast(1.2) brightness(0.55) sepia(1) hue-rotate(140deg) saturate(3.2); }
body.ab-cyber .ab-hero-shade { background: linear-gradient(to bottom, rgba(2,5,10,0.3), rgba(2,5,10,0.15) 40%, rgba(2,5,10,0.85)); }
body.ab-cyber .ab-hero-title { color: #e6feff; }
body.ab-cyber .ab-hero-title .ab-ar { color: var(--cy); text-shadow: 0 0 22px rgba(0,229,255,0.7); }
body.ab-cyber .ab-intro p { font-family: var(--sans); }
body.ab-cyber .ab-linkbtn { color: var(--cy); }
body.ab-cyber .ab-endbar, body.ab-cyber details.ab-refs, body.ab-cyber .ab-maps { background: #061019; }
body.ab-cyber .ab-mcard img, body.ab-cyber .ab-wordmark { filter: grayscale(1) sepia(1) hue-rotate(140deg) saturate(2.6) brightness(0.8); }
body.ab-cyber .ab-moment-card svg g { stroke: var(--cy); }
body.ab-cyber .ab-arrow { background: #061019; color: var(--cy); border-color: rgba(0,229,255,0.35); }
body.ab-cyber .ab-dot { background: #12404a; }
body.ab-cyber .ab-dot[aria-current="true"] { background: var(--cy); box-shadow: 0 0 0 6px rgba(0,229,255,0.18); }
body.ab-cyber #moment, body.ab-cyber #pincard { background: #061019; color: var(--ink); --al-border-bg: rgba(0, 229, 255, 0.4); }
body.ab-cyber #pincard p, body.ab-cyber dialog p { color: var(--ink-soft); }
body.ab-cyber .ab-pin { background: #02131c; color: var(--cy); border-color: var(--cy); box-shadow: var(--cy-glow); animation-name: pingcy; }
@keyframes pingcy { 0% { box-shadow: 0 0 0 0 rgba(0,229,255,0.6); } 80%, 100% { box-shadow: 0 0 0 12px rgba(0,229,255,0); } }
body.ab-cyber #annot path { stroke: var(--cy) !important; filter: drop-shadow(0 0 2px rgba(0,229,255,0.6)); }
body.ab-cyber #annot text { fill: var(--cy) !important; font-family: var(--display); font-size: 20px; letter-spacing: 0.06em; }
body.ab-cyber .ab-glabel { color: var(--cy); text-shadow: 0 0 8px rgba(0,229,255,0.9); font-family: var(--display); }
body.ab-cyber .ab-explore-bar, body.ab-cyber .ab-explore-hint { background: rgba(2,12,20,0.9); color: var(--ink); }
body.ab-cyber .ab-explore-bar { --al-border-bg: rgba(0, 229, 255, 0.3); }
body.ab-cyber .ab-explore-hint { border: 1px solid rgba(0,229,255,0.3); }
body.ab-cyber .ab-chip { color: var(--ink); border-color: rgba(0,229,255,0.3); border-radius: 2px; }
body.ab-cyber .ab-chip[aria-pressed="true"] { background: var(--cy); color: #001018; }
body.ab-cyber #tourbar { background: rgba(2,12,20,0.92); border: 1px solid rgba(0,229,255,0.35); bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
body.ab-cyber #tourbar button { background: var(--cy); color: #001018; }
body.ab-cyber .ab-rail.ab-on-light, body.ab-cyber .ab-rail.ab-on-dark { color: var(--cy); }
/* the section line under the Helipad Moments and Google Maps headings and the titles of the centred story cards
   (alfuix, in the markup) is dark on light backgrounds and white on dark cards; in Cyber its hairline and end dots
   turn cyan (its middle dash is Bootstrap primary, cyan already) */
body.ab-cyber .ab-section-line { border-color: rgba(0, 229, 255, 0.3) !important; }
body.ab-cyber .ab-section-line .bg-dark, body.ab-cyber .ab-section-line .bg-white { background-color: var(--cy) !important; }
body.ab-cyber .ab-rail button { box-shadow: 0 0 8px rgba(0,229,255,0.6); }   /* neon dots; the current one gets a cyan ring */
body.ab-cyber .ab-rail button[aria-current="true"] { box-shadow: 0 0 0 6px rgba(0,229,255,0.25), 0 0 12px rgba(0,229,255,0.8); }
body.ab-cyber .ab-rail-tip { --bs-tooltip-bg: var(--cy); --bs-tooltip-color: #001018; font-family: var(--display); letter-spacing: 0.06em; }   /* same 6px rounding as Classic */
body.ab-cyber footer { border-top: 1px solid rgba(0,229,255,0.25); }
body.ab-cyber footer .ab-typed { color: var(--cy); font-family: var(--display); text-shadow: var(--cy-glow); }
body.ab-cyber footer .ab-typed::after { background: var(--cy); }

/* mode switch (top left) and language links (top right), both modes; the corners swap on the Arabic page
   (css/rtl.css). Their shape is alfuix in the markup: al-corner al-corner-all-8 cuts each box's corners and
   al-corner al-corner-all-6 each button's; al-border al-border-1 al-border-primary-25 draws a 1px line round the box
   in Bootstrap's primary at 25% (orange in Classic, cyan in Cyber). So no radius or border here. The language links
   look like the mode buttons; the current page's link is the highlighted one (aria-current). The HUD's Controls
   panel sits below the language links, as Telemetry sits below the mode switch */
.ab-switches { z-index: 12; top: calc(14px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); }
.ab-langswitch { z-index: 12; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.ab-modeswitch { display: flex; background: rgba(32,33,36,0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ab-modeswitch :is(button, a) { border: 0; background: transparent; color: #e8eaed; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; padding: 8px 12px; cursor: pointer; text-decoration: none; }
.ab-modeswitch a[lang="ar"] { font: 600 12px/1 "Cairo", var(--sans); letter-spacing: 0; padding-block: 7px 9px; }
.ab-modeswitch :is(button[aria-pressed="true"], a[aria-current="page"]) { background: #fff; color: #202124; }
body.ab-cyber .ab-modeswitch { background: rgba(2,12,20,0.9); }
body.ab-cyber .ab-modeswitch :is(button, a) { color: var(--cy); }
body.ab-cyber .ab-modeswitch :is(button[aria-pressed="true"], a[aria-current="page"]) { background: var(--cy); color: #001018; }
body.ab-exploring .ab-switches { display: none; }

/* HUD: Cyber mode shows all of it; Classic shows the two panels in its own style (below) */
.ab-hud { display: none; position: fixed; z-index: 11; font-family: "Share Tech Mono", var(--mono); color: #bff7ff; font-size: 12px; letter-spacing: 0.08em; }
/* in both modes the HUD appears only once the globe has started (body.ab-story-on, set in the main loop: the 3D story
   fills at least half the screen, or Explore mode is on), so not over the hero, the intro or the sections after the
   story */
body.ab-cyber .ab-hud { display: block; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; }
body.ab-cyber.ab-story-on .ab-hud { opacity: 1; visibility: visible; }
/* the two HUD panels float in the corners (position: fixed) at a compact width. Their outline is alfuix in the markup:
   al-corner al-ts-14 al-be-14 cut the top-left and bottom-right corners, and al-border al-border-1 al-border-primary
   draw a 1px line round that shape in Bootstrap's primary (orange in Classic, cyan in Cyber); under each heading an
   al-clip-line with two slanted bars. So no border or shadow here */
.ab-hud-panel { position: fixed; background: rgba(2,12,20,0.72); padding: 16px 16px; width: 228px; max-width: calc(100vw - 32px); box-sizing: border-box; }
.ab-hud-panel h4 { font: 500 10px/1 "Orbitron", sans-serif; letter-spacing: 0.25em; color: #00e5ff; }
.ab-hud-row { line-height: 1.7; }
.ab-hud-row b { color: #fff; font-weight: 400; font-variant-numeric: tabular-nums; }
#hudTele { top: calc(60px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); }
#hudCtrl { top: calc(60px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
#hudBar { left: 0; right: 0; bottom: 0; display: none; padding: 8px max(16px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(2,10,16,0.88); border-top: 1px solid rgba(0,229,255,0.3); }
body.ab-cyber #hudBar { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; }
#hudBar .ab-on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2bff88; box-shadow: 0 0 8px #2bff88; margin-right: 8px; vertical-align: 1px; }
body.ab-cyber.ab-exploring #hudCtrl { display: none; }
body.ab-cyber .ab-rail { top: 54%; }
/* the HUD in Classic mode: the Telemetry and Controls panels only (no status bar), as frosted dark cards like the
   story cards with an orange heading. They fade in once the globe has started (body.ab-story-on, set in the main
   loop), so not over the hero or the page sections, and stay hidden in Explore mode (its panel sits top left) */
body:not(.ab-cyber) .ab-hud-panel {
  display: block; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s;
  font: 400 11.5px/1 var(--mono); letter-spacing: 0.04em; color: rgba(232, 234, 237, 0.72);
  background: rgba(20, 22, 26, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 16px 16px;
}
body:not(.ab-cyber).ab-story-on:not(.ab-exploring) .ab-hud-panel { opacity: 1; visibility: visible; }
body:not(.ab-cyber) .ab-hud-panel h4 { font: 600 10px/1 var(--sans); letter-spacing: 0.18em; color: var(--orange); }
/* phones and tablets (narrow windows and touch screens), both modes: the Telemetry card becomes one row along the
   bottom of the screen, the sector on the left and the altitude on the right (its heading, velocity and session are
   hidden, and its cut corners give way to a line along the top). It replaces Cyber's status bar there, and the
   guided-tour bar sits above it. Controls is hidden on phones (css/loader.css) */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #hudTele {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; display: flex; justify-content: space-between; gap: 14px;
    padding: 9px max(16px, env(safe-area-inset-right, 0px)) calc(9px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    clip-path: none !important; border-top: 1px solid rgba(var(--bs-primary-rgb), 0.45); font-size: 11px;
  }
  #hudTele::after, #hudTele > :first-child, #hudTele > :nth-child(n+4) { display: none !important; }
  #hudTele .ab-hud-row { gap: 8px !important; min-width: 0; white-space: nowrap; }
  #hudTele .ab-hud-row b { overflow: hidden; text-overflow: ellipsis; }
  body.ab-cyber #hudBar { display: none; }
  #tourbar, body.ab-cyber #tourbar { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}