/* ═══════════════════════════════════════════════════════════════
   nÄS World™ · notasim.world — Growth Collision Material System
   Stone-forward habitat + mycelial growth UI + quantum sparkle
   1950s atom-age brass COLLIDES with 5252 cyan crystal (not a merge)
   Text and chrome grow like living networks. Functional copy stays readable.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* App shell flag: set on html/body by CollisionHabitatSkin (React) */
html.nas-app,
body.nas-app {
  /* marker only — layout overrides live in frontend index.css */
}

:root {
  /* Collision palette */
  --nas-void: #03060c;
  --nas-stone: #2a3038;
  --nas-stone-hi: #5a6270;
  --nas-stone-lo: #14181e;
  --nas-wood: #3d3428;
  --nas-wood-grain: rgba(180, 150, 100, 0.08);
  --nas-brass: #c9a227;
  --nas-brass-hi: #f0d78c;
  --nas-brass-lo: #8a7020;
  --nas-cyan: #5ce1e6;
  --nas-cyan-hot: #9ff7fa;
  --nas-cyan-dim: rgba(92, 225, 230, 0.18);
  --nas-orange: #ff8a3d;
  --nas-orange-hot: #ffb070;
  --nas-ink: #f2f6fc;
  --nas-muted: #a8b6cc;
  --nas-glass: rgba(12, 20, 32, 0.72);

  --nas-font-ui: "Source Sans 3", "Space Grotesk", Outfit, system-ui, sans-serif;
  --nas-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --nas-bezel: clamp(10px, 1.4vw, 18px);
}

/* ── Permanent stone bezel = full monitor / habitat perimeter ── */
html.nas-habitat,
body.nas-habitat {
  background: var(--nas-void) !important;
}

body.nas-habitat {
  position: relative;
  min-height: 100%;
  color: var(--nas-ink);
  font-family: var(--nas-font-ui);
  /* Stone frame around entire viewport */
  box-shadow:
    inset 0 0 0 var(--nas-bezel) var(--nas-stone-lo),
    inset 0 0 0 calc(var(--nas-bezel) + 1px) rgba(201, 162, 39, 0.35),
    inset 0 0 0 calc(var(--nas-bezel) + 2px) rgba(92, 225, 230, 0.2),
    inset 0 0 40px rgba(0, 0, 0, 0.55);
}

/* Quantum-dot edge glow on bezel (5252) + brass rivet line (1950s) */
body.nas-habitat::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: calc(var(--nas-bezel) * 0.35);
  z-index: 9998;
  border-radius: 2px;
  border: 1px solid rgba(92, 225, 230, 0.28);
  box-shadow:
    0 0 18px rgba(92, 225, 230, 0.15),
    inset 0 0 24px rgba(201, 162, 39, 0.06);
  animation: nas-bezel-breathe 6s ease-in-out infinite;
}

/* Mycelium network haze in the deep field (does not block clicks) */
body.nas-habitat::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: var(--nas-bezel);
  z-index: 0;
  opacity: 0.55;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(92, 225, 230, 0.14), transparent 55%),
    radial-gradient(700px 420px at 94% 4%, rgba(201, 162, 39, 0.12), transparent 50%),
    radial-gradient(600px 400px at 50% 110%, rgba(255, 138, 61, 0.06), transparent 45%),
    /* soft mycelial filament suggestion via repeating radial noise */
    repeating-radial-gradient(circle at 20% 80%, transparent 0 38px, rgba(92, 225, 230, 0.02) 38px 39px),
    repeating-radial-gradient(circle at 80% 30%, transparent 0 52px, rgba(255, 138, 61, 0.015) 52px 53px);
}

@keyframes nas-bezel-breathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* Content sits above ambient layers */
body.nas-habitat > *:not(script):not(style) {
  position: relative;
  z-index: 1;
}

/* ── Growth typography (mycelial display) ──
   Body stays clean. Display titles grow. */
.nas-grow,
h1.nas-grow,
h2.nas-grow,
.nas-grow-text {
  font-family: var(--nas-font-ui);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-caps: normal;
  background: linear-gradient(
    105deg,
    var(--nas-brass-hi) 0%,
    var(--nas-cyan-hot) 42%,
    var(--nas-orange-hot) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(92, 225, 230, 0.25));
}

/* Letter-level growth (applied by JS) */
.nas-grow-letter {
  display: inline-block;
  opacity: 0;
  transform: scale(0.35) translateY(0.35em);
  filter: blur(4px);
  color: inherit;
  -webkit-text-fill-color: currentColor;
  animation: nas-letter-fruit 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  position: relative;
}

.nas-grow-letter::after {
  content: "";
  position: absolute;
  inset: -0.15em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(159, 247, 250, 0.55) 0%, rgba(255, 138, 61, 0.25) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  animation: nas-qd-spark 0.55s ease-out forwards;
}

.nas-grow-space {
  display: inline-block;
  width: 0.33em;
}

@keyframes nas-letter-fruit {
  0% {
    opacity: 0;
    transform: scale(0.25) translateY(0.4em);
    filter: blur(5px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.06) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes nas-qd-spark {
  0% { opacity: 0; transform: scale(0.4); }
  40% { opacity: 0.9; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* When growth complete, keep gradient title readable */
.nas-grow.is-grown,
.nas-grow-text.is-grown {
  -webkit-text-fill-color: transparent;
}

/* Static / CSS-only grow (React app data-nas-grow-css): always show collision gradient */
.nas-grow:not(.is-growing):not(.is-grown),
.nas-grow.is-grown,
.nas-grow-text.is-grown {
  opacity: 1;
  background: linear-gradient(
    105deg,
    var(--nas-brass-hi) 0%,
    var(--nas-cyan-hot) 42%,
    var(--nas-orange-hot) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(92, 225, 230, 0.28));
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ── Living panels: stone + wood mix, mycelium borders ── */
.nas-panel,
.habitat-viewport,
.glass-panel,
.card,
.step,
.flow-node,
.desk-stage > .nas-public-nav {
  position: relative;
  border-color: rgba(92, 225, 230, 0.28) !important;
  background:
    linear-gradient(160deg, rgba(92, 225, 230, 0.08), transparent 40%),
    linear-gradient(200deg, rgba(61, 52, 40, 0.25), transparent 45%),
    linear-gradient(180deg, rgba(42, 48, 56, 0.55), rgba(12, 16, 24, 0.88)) !important;
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.18),
    0 16px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -24px 48px rgba(92, 225, 230, 0.04) !important;
}

/* Mycelium border filaments (CSS drawn, irregular) */
.nas-panel::before,
.habitat-viewport::after,
.glass-panel::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: 2;
  background:
    radial-gradient(circle at 8% 92%, rgba(255, 138, 61, 0.35) 0 1.5px, transparent 2px),
    radial-gradient(circle at 18% 96%, rgba(92, 225, 230, 0.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 8%, rgba(92, 225, 230, 0.4) 0 1.5px, transparent 2px),
    radial-gradient(circle at 94% 18%, rgba(255, 138, 61, 0.3) 0 1px, transparent 1.5px);
  box-shadow:
    inset 0 0 0 1px rgba(92, 225, 230, 0.22),
    inset 0 0 20px rgba(92, 225, 230, 0.06);
  opacity: 0.9;
  animation: nas-mycelium-pulse 5.5s ease-in-out infinite;
}

@keyframes nas-mycelium-pulse {
  0%, 100% { opacity: 0.65; filter: brightness(0.95); }
  50% { opacity: 1; filter: brightness(1.12); }
}

/* Habitat viewport: thicker stone architecture */
.habitat-viewport {
  border: 3px solid var(--nas-stone-hi) !important;
  border-radius: 1.15rem !important;
  box-shadow:
    0 0 0 1px rgba(212, 218, 228, 0.12),
    0 0 0 7px var(--nas-stone-lo),
    0 0 0 8px rgba(201, 162, 39, 0.28),
    0 0 0 9px rgba(92, 225, 230, 0.15),
    0 28px 60px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(0, 0, 0, 0.35) !important;
}

/* Rooted lower edge on major surfaces */
.nas-rooted,
.habitat-console,
.floor .glass,
.floor .panel {
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(61, 52, 40, 0.45), transparent 55%),
    radial-gradient(ellipse 30% 20% at 20% 100%, rgba(255, 138, 61, 0.08), transparent 50%),
    radial-gradient(ellipse 30% 20% at 80% 100%, rgba(92, 225, 230, 0.1), transparent 50%);
}

/* Buttons: brass rim (50s) + cyan glass (5252) */
body.nas-habitat button,
body.nas-habitat .btn,
body.nas-habitat a.button,
body.nas-habitat .cockpit-nav__toggle,
body.nas-habitat .cockpit-nav__close {
  border-color: rgba(201, 162, 39, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 3px 0 rgba(0, 0, 0, 0.3),
    0 0 14px rgba(92, 225, 230, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

body.nas-habitat button:hover,
body.nas-habitat .btn:hover,
body.nas-habitat a.button:hover {
  filter: brightness(1.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 0 20px rgba(92, 225, 230, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Atom-age orbit accent for brand chips */
.nas-atom-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #0a0e14;
  background: linear-gradient(145deg, var(--nas-brass-hi), var(--nas-brass) 45%, var(--nas-brass-lo));
  border: 1px solid rgba(255, 240, 180, 0.4);
  box-shadow: 0 0 16px rgba(201, 162, 39, 0.35);
}

/* Quantum sparkle field (JS injects .nas-spark) */
.nas-spark {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  background: var(--nas-cyan-hot);
  box-shadow: 0 0 8px var(--nas-cyan), 0 0 14px rgba(255, 138, 61, 0.5);
  animation: nas-spark-life 1.1s ease-out forwards;
}

@keyframes nas-spark-life {
  0% { opacity: 0; transform: scale(0.3); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.8) translateY(-12px); }
}

/* Landing tower floors: keep readable, add rooted depth */
body.nas-habitat .floor {
  /* leave room for stone bezel so content is not clipped */
  padding: calc(var(--nas-bezel) + clamp(12px, 2.5vw, 28px)) !important;
}

body.nas-habitat .tower {
  /* ambient collision glows already on body::after */
}

/* Prefer Source Sans for true casing of nÄS on public pages */
body.nas-habitat h1,
body.nas-habitat h2,
body.nas-habitat h3 {
  font-family: var(--nas-font-ui);
  font-variant-caps: normal;
  text-transform: none;
}

/* Accessibility: reduced motion = no growth thrash */
@media (prefers-reduced-motion: reduce) {
  .nas-grow-letter,
  .nas-grow-letter::after,
  .nas-spark,
  body.nas-habitat::before,
  .nas-panel::before {
    animation: none !important;
  }
  .nas-grow-letter {
    opacity: 1;
    transform: none;
    filter: none;
  }
}