/* ==========================================================================
   Earth edition — fixed WebGL backdrop + premium dark glassmorphism UI.
   Loaded after style.css, so it deliberately overrides the older light /
   forest layers. Tune the whole glass look from the variables below.
   ========================================================================== */
:root {
  color-scheme: dark;
  --ink: #f4f7fc;
  --ink-soft: #d6deea;
  --muted: #a9b5c7;
  --paper: #02040a;
  --paper-white: rgba(10, 15, 25, .55);
  --line: rgba(255, 255, 255, .12);
  --accent: #8dbbff;
  --accent-deep: #c5dbff;
  --amber: #ffc46b;
  --card: rgba(10, 15, 25, .55);
  --card-solid: rgba(10, 15, 25, .82);
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);

  --glass-bg: rgba(10, 15, 25, .55);
  --glass-border: 1px solid rgba(255, 255, 255, .12);
  --glass-blur: blur(16px);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);
}

html { background: #000; }
body { background: transparent; color: var(--ink); }
::selection { background: var(--amber); color: #1b1208; }

/* ---------- WebGL canvas (fixed behind everything) -------------------------- */
#earth-canvas {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -1; pointer-events: none;
  background: #000;
  opacity: 0; transition: opacity 1.6s ease .1s;
}
html.earth-ready #earth-canvas { opacity: 1; }

#earth-labels { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.geo-label {
  position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap;
  padding: 4px 10px 4px 9px; border-radius: 999px;
  font: 600 11px/1.2 "Segoe UI", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #fff4dc; background: rgba(8, 12, 20, .55);
  border: 1px solid rgba(255, 196, 107, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 18px rgba(255, 170, 70, .28);
  transition: opacity .35s ease; will-change: transform, opacity;
}

/* Static fallback when WebGL is unavailable / disabled */
.earth-fallback { display: none; }
html.no-webgl #earth-canvas, html.no-webgl #earth-labels { display: none; }
html.no-webgl .earth-fallback {
  display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 118%, #1b4f8f 0 28%, #0a2a55 29% 33%, rgba(40, 110, 220, .25) 34%, transparent 46%),
    radial-gradient(ellipse at 50% 0%, #07101f, #000 70%);
}

/* ---------- Make every section transparent -------------------------------- */
.hero, .section, .story, .heritage-section, .education-section, .career-section,
.certification-section, .community-section, .aspiration-section, .closing,
main, .facts {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
}
.hero::before, .hero-glow, .ambient-field, .ambient-ring { display: none !important; }
.hero { border-bottom: 0 !important; }

/* ---------- Glass surfaces ------------------------------------------------- */
.site-header,
.facts-inner,
.chapter-index,
.section-heading,
.story-copy,
.heritage-copy,
.heritage-highlight,
.photo-mosaic figure,
.education-step,
.education-panel,
.degree,
.training-panel,
.cert-card,
.career-card,
.community-board,
.aspiration-card,
.closing-card,
.portrait-card,
.site-footer .footer-inner {
  background: var(--glass-bg) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--ink);
}

/* panels that were plain text on a light page now need padding to sit on glass */
.section-heading { display: grid; max-width: 760px; padding: 24px 28px; border-radius: 22px; margin-bottom: 28px; }
.story-copy, .heritage-copy { padding: clamp(22px, 3vw, 36px); border-radius: 22px; }
.chapter-index { padding: clamp(20px, 3vw, 34px); border-radius: 24px; }
.site-footer .footer-inner { border-radius: 20px; padding: 18px 24px; }

.site-header {
  border-width: 0 0 1px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 0; background: rgba(8, 12, 20, .55) !important;
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.facts-inner { border-radius: 20px; }
.fact + .fact { border-left-color: rgba(255, 255, 255, .1); }
.education-panel .degree { background: rgba(255, 255, 255, .05) !important; box-shadow: none !important; }
.education-step, .cert-card, .career-card, .degree { border-radius: 18px; }

.community-board { background-blend-mode: normal; }
.community-board::after { background: linear-gradient(90deg, rgba(5, 9, 16, .86) 0%, rgba(5, 9, 16, .6) 55%, rgba(5, 9, 16, .2) 100%) !important; }

.closing-card { background: rgba(10, 15, 25, .6) !important; }
.closing-card .eyebrow, .closing-card h2, .closing-card p { color: var(--ink) !important; }

/* ---------- Typography on glass ------------------------------------------- */
h1, h2, h3, h4, strong, .display, .hero h1, .brand-text strong { color: #fff; }
p, li, .section-description, .story-lead, .career-copy, .cert-card p, .education-step p,
.training-panel p, .training-panel li, .degree-institution { color: var(--ink-soft); }
.fact div > span, .brand-text span, .hero-intro, .hero-index, .portrait-note, .copyright { color: var(--muted); }
.eyebrow, .hero-bio-label { color: var(--accent); }
.eyebrow::before { background: currentColor; }
.career-card .career-copy strong, .facts .fact strong { color: #fff; }
a { color: var(--accent-deep); }
.main-nav a { color: var(--ink-soft); }
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; background: rgba(255, 255, 255, .08) !important; }
.menu-toggle { color: #fff; border-color: rgba(255, 255, 255, .25); }

/* chips / icons */
.story-facts span, .career-employers a, .social-links a, .community-tags span, .chapter-index-grid a {
  background: rgba(255, 255, 255, .06) !important; color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
}
.chapter-index-grid a:hover, .career-employers a:hover, .social-links a:hover {
  background: rgba(141, 187, 255, .16) !important; border-color: rgba(141, 187, 255, .5) !important;
}
.heading-icon, .heading-icon-sm, .fact-icon, .step-icon, .cert-icon, .career-symbol, .aspiration-emblem svg {
  background: rgba(141, 187, 255, .12) !important; color: var(--accent-deep) !important;
  border: 1px solid rgba(141, 187, 255, .28) !important;
}
.heading-icon::after { border-color: #0a0f19 !important; background: var(--amber) !important; }
.degree-logo-link { background: #fff !important; }
.photo-mosaic figure { border-width: 1px !important; padding: 0; }
.education-path::before { background: linear-gradient(var(--accent), rgba(255, 255, 255, .08)) !important; }
.skill-list li::before { background: var(--amber) !important; }

/* buttons */
.button-primary, .nav-cta, .closing-action .button, .story-photo-label {
  background: linear-gradient(135deg, #ffd48a, #ffb347) !important; color: #1a1205 !important; border: 0 !important;
}
.button-primary:hover, .nav-cta:hover, .closing-action .button:hover { filter: brightness(1.07); }
.button-quiet { background: rgba(255, 255, 255, .05) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important; }
.button-quiet:hover { background: rgba(255, 255, 255, .12) !important; }
.status-dot { background: var(--amber); box-shadow: 0 0 0 5px rgba(255, 196, 107, .14), 0 0 20px var(--amber); }

/* hero: the globe is the star, so the portrait card is a lighter glass pane */
.portrait-card { background: rgba(10, 15, 25, .42) !important; padding: 12px; border-radius: 28px; }
.portrait-caption { background: rgba(5, 9, 16, .72) !important; backdrop-filter: blur(10px); }
.portrait-scene::before { opacity: .55; filter: hue-rotate(150deg) saturate(.8); }
.orbit-point { background: var(--amber) !important; }

/* readable focus + reduced-motion safety */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #earth-canvas { transition: none; }
  .geo-label { transition: none; }
}

/* ---------- Mobile: lighter blur = steadier 60fps -------------------------- */
@media (max-width: 820px) {
  :root { --glass-blur: blur(12px); --glass-bg: rgba(10, 15, 25, .62); }
  .section-heading { padding: 18px 20px; }
  .geo-label { font-size: 10px; padding: 3px 8px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(10, 15, 25, .86); }
}

/* ---------- Hero copy sits on its own glass pane so it stays legible over the globe */
.hero-copy {
  padding: clamp(22px, 2.6vw, 38px); border-radius: 28px;
  background: rgba(8, 12, 20, .5); border: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }

/* mobile dropdown menu becomes a glass sheet (desktop nav stays borderless) */
@media (max-width: 1100px) {
  .main-nav {
    background: rgba(8, 12, 20, .82) !important; border: var(--glass-border) !important;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow) !important;
  }
}
.main-nav { border-color: transparent; }

/* ---------- Text colour: beat the older light-theme selectors -------------- */
main p:not(.eyebrow):not(.hero-bio-label), main li, main small, main figcaption,
.site-footer p, .site-footer a { color: var(--ink-soft) !important; }
main h1, main h2, main h3, main h4, main strong, main b { color: #fff !important; }
main .eyebrow, main .hero-bio-label { color: var(--accent) !important; }
main .hero-intro, main .fact div > span, main .hero-index, main .portrait-note { color: var(--muted) !important; }
main .story-photo-label, main .button-primary, main .closing-action .button { color: #1a1205 !important; }
main .closing-card small, main .closing-action small { color: var(--muted) !important; }
main a:not(.button):not(.nav-cta) { color: var(--accent-deep); }
.chapter-index-grid a strong, .chapter-index-grid a span, .chapter-index-grid a b { color: var(--ink) !important; }

/* small meta text inside cards (dates, institutions, captions) */
main .career-card span:not(.career-symbol), main .education-step span:not(.step-icon), main .cert-card span:not(.cert-icon):not(.cert-label),
main .degree span, main .heritage-highlight span:not(.heading-icon-sm), main .training-panel span:not(.heading-icon-sm),
main .career-meta, main .career-meta * { color: var(--muted) !important; }
main .cert-label, main .career-num, main .career-role { color: var(--accent) !important; }

main .button-primary .arrow, .nav-cta .arrow, .closing-action .button .arrow { color: #1a1205 !important; }