/* ============================================================
   Living AI Observatory — premium effects layer
   Dark premium technology aesthetic with restrained Scottish cues.
   Layers on top of the institutional base theme.
   ============================================================ */

/* ---------- Effects level: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-choreo] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Reveal animations (gated behind .js for no-js resilience) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
.js [data-reveal="left"] { transform: translateX(-30px); }
.js [data-reveal="left"].revealed { transform: translateX(0); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="right"].revealed { transform: translateX(0); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="scale"].revealed { transform: scale(1); }

/* ---------- Scroll choreography (gated behind .js) ---------- */
.js [data-choreo] {
  opacity: 0.4;
  transform: translateY(20px) scale(0.99);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-choreo].choreo-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Hero canvas ---------- */
.hero-canvas-wrap { position: relative; }
#hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.hero-content { position: relative; z-index: 2; }

/* ---------- Hero metrics overlay ---------- */
.hero-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 30px; max-width: 720px;
}
.hero-metric {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 16px 18px;
  backdrop-filter: blur(6px);
}
.hero-metric .value { font-size: 1.9rem; font-weight: 900; color: #fff; line-height: 1; }
.hero-metric .label { font-size: 0.78rem; color: #9fb4c9; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Topographic contour background ---------- */
.topo-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(201,123,45,0.10), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(29,95,145,0.12), transparent 45%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 40px, rgba(255,255,255,0.02) 41px, transparent 42px);
  opacity: 0.6;
}

/* ---------- Saltire geometry (subtle) ---------- */
.saltire {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05;
  background:
    linear-gradient(45deg, transparent 48%, #fff 49%, #fff 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, #fff 49%, #fff 51%, transparent 52%);
}

/* ---------- Data-grid motif ---------- */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05;
  background-image:
    linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---------- Status pulse (tracker/observatory) ---------- */
[data-pulse] { position: relative; }
.pulse-on::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #247a56; box-shadow: 0 0 0 0 rgba(36,122,86,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(36,122,86,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(36,122,86,0); }
  100% { box-shadow: 0 0 0 0 rgba(36,122,86,0); }
}

/* ---------- Magnetic buttons ---------- */
[data-magnetic] { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }

/* ---------- Animated status bars (tracker) ---------- */
.status-bar { height: 6px; background: #e6e2d8; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.status-bar span { display: block; height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(0.22,1,0.36,1); }

/* ---------- Interactive commitment cards ---------- */
.commitment-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; margin: 10px 0; box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s, border-color 0.25s;
}
.commitment-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(11,31,58,0.15); border-color: var(--copper); }
.commitment-card .cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.commitment-card .cc-source { font-size: 0.82rem; }
.commitment-card .cc-source a { color: #145f8c; }

/* ---------- About BUILD→TEST→EXPLAIN→TRACK sequence ---------- */
.sequence { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 20px; }
.sequence .seq-step {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.sequence .seq-step:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(11,31,58,0.15); border-color: var(--copper); }
.sequence .seq-step .seq-num { font-size: 0.75rem; color: var(--copper); font-weight: 800; letter-spacing: 0.1em; }
.sequence .seq-step .seq-word { font-size: 1.3rem; font-weight: 900; color: var(--navy); margin-top: 4px; }

/* ---------- Founder portrait ---------- */
.founder-portrait { border-radius: 50%; overflow: hidden; width: 200px; height: 200px; box-shadow: 0 0 0 4px rgba(201,123,45,0.3), 0 12px 40px rgba(0,0,0,0.4); }
.founder-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Dark section variant ---------- */
.section.dark {
  background: linear-gradient(160deg, #0b1f3a, #102a4a 60%, #0b1f3a);
  color: #e5edf5;
}
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark .lead { color: #b9c8d8; }

/* ---------- Tracker status terminal ---------- */
.tracker-status{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0;padding:14px 18px;background:rgba(11,31,58,0.05);border:1px solid var(--line);border-radius:12px}
.ts-item{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--navy2)}
.ts-item strong{font-size:1.1rem;color:var(--navy)}
.ts-dot{width:9px;height:9px;border-radius:50%;background:#247a56;display:inline-block}
.ts-dot.ts-track{background:#d49b2f}
.ts-dot.ts-live{background:#1d5f91;box-shadow:0 0 0 0 rgba(29,95,145,0.6);animation:pulse 2s infinite}

/* ---------- Adoption index visualization ---------- */
.adoption-viz{margin:20px 0;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.viz-bar{display:flex;align-items:center;gap:12px;margin:12px 0}
.viz-label{width:110px;font-size:.85rem;font-weight:700;color:var(--navy2);text-align:right}
.viz-track{flex:1;height:22px;background:#eef2f5;border-radius:6px;overflow:hidden}
.viz-fill{height:100%;width:0;background:linear-gradient(90deg,var(--copper),var(--blue));border-radius:6px;transition:width 1.2s cubic-bezier(0.22,1,0.36,1)}
.viz-val{width:60px;font-size:.9rem;font-weight:800;color:var(--navy)}
@media(max-width:520px){.viz-label{width:80px;font-size:.75rem}.viz-val{width:50px}}

/* ---------- Continuous WebGL scene hero ---------- */
.scene-hero{position:relative;height:400vh;background:linear-gradient(160deg,#0b1f3a,#102a4a 50%,#0b1f3a);color:#fff;overflow:hidden}
.scene-canvas-wrap{position:sticky;top:0;height:100vh;overflow:hidden}
#scene-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.scene-static{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.scene-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;pointer-events:none}
.scene-overlay .wrap{width:100%}
.scene-overlay h1{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.02;margin:.18em 0;max-width:900px;font-weight:900}
.scene-overlay p{max-width:760px;font-size:1.15rem;color:#dbe7f2}
.scene-overlay .hero-actions{pointer-events:auto}
.scene-stage{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:8px 14px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:999px;font-size:.85rem;color:#cfe0ee}
.scene-stage-dot{width:8px;height:8px;border-radius:50%;background:var(--copper-light);box-shadow:0 0 0 0 rgba(230,162,87,0.6);animation:pulse 2s infinite}
.scene-scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:4;color:#9fb4c9;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;animation:bob 2s infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@media(max-width:768px){.scene-hero{height:300vh}.scene-overlay h1{font-size:2rem}}

/* ---------- About project constellation ---------- */
.constellation{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:20px}
.const-node{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s,border-color .3s}
.const-node:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(11,31,58,.15);border-color:var(--copper)}
.const-dot{width:14px;height:14px;border-radius:50%;background:var(--copper);margin:0 auto 10px;box-shadow:0 0 0 0 rgba(201,123,45,.5);animation:pulse 2.5s infinite}
.const-node h3{margin:0 0 4px;color:var(--navy)}
.const-node p{margin:0;font-size:.88rem;color:var(--muted)}

/* ---------- About timeline ---------- */
.timeline{position:relative;margin:20px 0 0;padding-left:24px;border-left:2px solid var(--line)}
.tl-item{position:relative;margin:18px 0;padding-left:16px}
.tl-dot{position:absolute;left:-31px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--copper);border:2px solid var(--paper)}
.tl-item strong{color:var(--navy);font-size:1.05rem}
.tl-item p{margin:4px 0 0;color:var(--muted);font-size:.92rem}

/* ---------- Observatory ops bar (operational intelligence) ---------- */
.ops-bar{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 30px;padding:16px 20px;background:rgba(11,31,58,0.05);border:1px solid var(--line);border-radius:12px}
.ops-item{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--navy2)}
.ops-item strong{font-size:1.05rem;color:var(--navy)}
.ops-dot{width:9px;height:9px;border-radius:50%;background:#247a56;display:inline-block}
.ops-dot.ops-blue{background:#1d5f91}
.ops-dot.ops-amber{background:#d49b2f}
.ops-dot.ops-live{background:#247a56;box-shadow:0 0 0 0 rgba(36,122,86,.6);animation:pulse 2s infinite}

/* ---------- Mobile optimisations ---------- */
@media (max-width: 768px) {
  .hero-metrics { grid-template-columns: repeat(2, 1fr); }
  .hero-metric .value { font-size: 1.5rem; }
  [data-reveal] { transform: translateY(16px); }
  .sequence { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   A-GRADE PREMIUM OVERRIDE — dark cinematic world, site-wide
   Unifies the WebGL hero with the body. Adds depth, display type,
   contrast-safe accents, focus states, and motion polish.
   ============================================================ */

/* --- Display type (Space Grotesk for headlines) --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');
h1, h2, h3, .metric, .score, .logo, .seq-word, .const-node h3, .tl-item strong {
  font-family: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* --- Commit to the dark premium world --- */
body { background: #0b1f3a; color: #e5edf5; }
.section { background: #0b1f3a; }
.section.alt { background: #0e2547; }
h2 { color: #fff; }
h3 { color: #eef3f8; }
.lead, .small, .src, .crumb { color: #9fb4c9; }
.kicker { color: var(--copper-light); }

/* --- Cards: glass depth + top-edge highlight + hover glow --- */
.card, .commitment-card, .const-node, .sequence .seq-step, .adoption-viz {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.card::before, .commitment-card::before, .const-node::before, .sequence .seq-step::before, .adoption-viz::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,162,87,0.6), transparent);
}
.card h3, .commitment-card h3, .const-node h3, .sequence .seq-step .seq-word { color: #fff; }
.card p, .commitment-card p, .const-node p, .sequence .seq-step p { color: #b9c8d8; }
.card:hover, .commitment-card:hover, .const-node:hover, .sequence .seq-step:hover {
  transform: translateY(-4px);
  border-color: rgba(230,162,87,0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.metric { color: #fff; }
.metric .unit { color: #9fb4c9; }
.mono { background: rgba(255,255,255,0.08); color: #e5edf5; }

/* --- Callouts on dark --- */
.callout { background: rgba(255,255,255,0.04); border-left-color: var(--copper-light); }
.callout h4 { color: #fff; }
.callout.good { background: rgba(36,122,86,0.12); border-left-color: var(--green); }
.callout.warn { background: rgba(212,155,47,0.12); border-left-color: var(--amber); }
.callout.danger { background: rgba(168,68,68,0.14); border-left-color: var(--red); }

/* --- Tables on dark --- */
.table-scroll { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }
th { background: rgba(255,255,255,0.06); color: #fff; }
th, td { border-bottom-color: rgba(255,255,255,0.08); color: #dbe7f2; }

/* --- Status pills on dark --- */
.status.inprogress { background: rgba(36,122,86,0.2); color: #7fd4a8; }
.status.track { background: rgba(212,155,47,0.2); color: #e8c37a; }
.status.done { background: rgba(29,95,145,0.25); color: #8fc3e8; }
.status.pending { background: rgba(255,255,255,0.08); color: #9fb4c9; }
.pill { background: rgba(255,255,255,0.08); color: #dbe7f2; }
.pill.copper { background: rgba(201,123,45,0.2); color: #e6a257; }

/* --- Filters on dark --- */
.filters button { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); color: #dbe7f2; }
.filters button.active { background: var(--copper); color: #0b1f3a; border-color: var(--copper); }

/* --- Tracker status terminal + ops bar on dark --- */
.tracker-status, .ops-bar { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
.ts-item, .ops-item { color: #b9c8d8; }
.ts-item strong, .ops-item strong { color: #fff; }

/* --- Adoption viz on dark --- */
.viz-label, .viz-val { color: #dbe7f2; }
.viz-track { background: rgba(255,255,255,0.08); }
.status-bar { background: rgba(255,255,255,0.08); }

/* --- Diagnostic on dark --- */
.diag .card label { color: #eef3f8; }
.diag .card .q { color: #9fb4c9; }
.diag select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: #e5edf5; }
.score { color: #fff; }
.score-bar { background: rgba(255,255,255,0.1); }

/* --- Contrast fix: navy text on copper (WCAG AA) --- */
.btn.alt { background: var(--copper); color: #0b1f3a; }
.btn.alt:hover { background: var(--copper-light); color: #0b1f3a; }
.skip-link { background: var(--copper); color: #0b1f3a; }

/* --- Accent glow on primary CTA --- */
.btn.alt { box-shadow: 0 0 24px rgba(230,162,87,0.25); }
.btn.alt:hover { box-shadow: 0 0 40px rgba(230,162,87,0.45); }

/* --- Focus states (keyboard a11y) --- */
a:focus-visible, button:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--copper-light); outline-offset: 2px; border-radius: 6px;
}

/* --- no-js resilience: only hide reveals when JS is active --- */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.js [data-reveal].revealed { opacity: 1; transform: translateY(0); }
.js [data-reveal="left"] { transform: translateX(-30px); }
.js [data-reveal="left"].revealed { transform: translateX(0); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="right"].revealed { transform: translateX(0); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="scale"].revealed { transform: scale(1); }
.js [data-choreo] { opacity: 0.4; transform: translateY(20px) scale(0.99); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.js [data-choreo].choreo-in { opacity: 1; transform: translateY(0) scale(1); }
/* no-js: everything visible by default (no opacity:0) */

/* --- Remove will-change from base rules (GPU memory) --- */
[data-reveal], [data-magnetic] { will-change: auto; }

/* --- Reveal stagger in grids --- */
.grid > [data-reveal]:nth-child(2), .constellation > [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.grid > [data-reveal]:nth-child(3), .constellation > [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.grid > [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

/* --- Button micro-interactions --- */
.btn { transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s, background 0.2s; }
.btn:hover { transform: translateY(-2px) scale(1.02); }
.card .btn.small, .commitment-card .btn.small { position: relative; }
.card .btn.small::after, .commitment-card .btn.small::after { content: '→'; margin-left: 4px; display: inline-block; transition: transform 0.2s; }
.card:hover .btn.small::after, .commitment-card:hover .btn.small::after { transform: translateX(4px); }

/* --- Logo letter-spacing + rule --- */
.logo { letter-spacing: 0.06em; }
.logo .accent { letter-spacing: 0.02em; }

/* --- Section breathing room --- */
.section { padding: 72px 0; }
.grid { gap: 20px; }
.card { padding: 26px; }

/* --- Saltire: make Scottish identity felt, not whispered --- */
.saltire { opacity: 0.08; }

/* --- Scene hero: single viewport, no empty scroll space --- */
.scene-hero { height: 100vh; }
@media (max-width: 768px) { .scene-hero { height: 100vh; } }

/* --- Scene loading state (auto-hides; never blocks content) --- */
.scene-canvas-wrap::after {
  content: 'Loading observatory…'; position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center; color: #9fb4c9; font-size: 0.9rem;
  pointer-events: none;
  animation: scene-load-fade 3s forwards;
}
@keyframes scene-load-fade {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
#scene-canvas { z-index: 1; }
.scene-canvas-wrap.loaded::after { display: none; }

/* --- Mobile: drop backdrop blur (perf) --- */
@media (max-width: 768px) {
  .hero-metric { backdrop-filter: none; }
  .section { padding: 48px 0; }
}