/* portal.css — The Omni Portal: Infinity Gauntlet with immersive teaching panels.
 * Standalone (the portal page does not load cockpit.css). Palette mirrors the cockpit tokens.
 * All visuals are client-GPU (Three.js hero on #monolith-bg) — server cost is ~0 (static file).
 * Teaching panels are immersive modals with stone-specific colors + Stan Lee wisdom layers. */

:root {
  --bg0:#040406; --bg1:#080810; --surface-1:#10101a; --surface-2:#161624;
  --line:rgba(120,140,200,.14); --line-bright:rgba(120,200,255,.35);
  --gold:#f5b73f; --cyan:#35d4ff; --violet:#a78bfa; --uv:#9747ff; --emerald:#34d399;
  --amber:#f59e0b; --red:#f87171; --silver:#cbd5e1;
  --txt:#e9edff; --mute:#7d86a8;
  --glow-cyan:0 0 24px rgba(53,212,255,.35); --glow-gold:0 0 24px rgba(245,183,63,.3);
  --glow-uv:0 0 24px rgba(151,71,255,.3);
  --fs-tiny:9px;
}

* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg0); color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif; overflow-x:hidden; }

#monolith-bg { position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; }
.scanlines { position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(53,212,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen; opacity:.5; }

#portal { position:relative; z-index:2; max-width:1280px; margin:0 auto; padding:0 24px 60px;
  min-height:100%; display:flex; flex-direction:column; }

/* ---- header ---- */
.atrium-head { display:flex; align-items:center; gap:18px; padding:28px 0 18px;
  animation:fadeDown .8s cubic-bezier(.2,.8,.2,1) both; }
.sigil { width:46px; height:46px; flex:none; position:relative;
  background:conic-gradient(from 0deg, var(--cyan), var(--uv), var(--gold), var(--cyan));
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow:var(--glow-cyan); animation:spin 18s linear infinite; }
.sigil::after { content:""; position:absolute; inset:5px; background:var(--bg0);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.brand h1 { margin:0; font-size:30px; font-weight:800; letter-spacing:.42em;
  background:linear-gradient(90deg, var(--cyan), var(--silver), var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tagline { margin:2px 0 0; font-size:10px; letter-spacing:.5em; color:var(--mute); }
.tagline .sep { color:var(--cyan); }
.boot { margin-left:auto; font-family:ui-monospace,monospace; font-size:var(--fs-tiny);
  letter-spacing:.18em; color:var(--cyan); text-shadow:var(--glow-cyan);
  border:1px solid var(--line-bright); padding:6px 12px;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

/* ---- hero reticle ---- */
.hero { display:flex; flex-direction:column; align-items:center; gap:18px; padding:34px 0 30px;
  animation:fadeIn 1.1s ease .2s both; }
.reticle { display:flex; gap:0; border:1px solid var(--line-bright); border-radius:2px;
  background:linear-gradient(180deg, rgba(53,212,255,.05), rgba(8,8,16,.4)); backdrop-filter:blur(3px);
  box-shadow:var(--glow-cyan), inset 0 0 30px rgba(53,212,255,.06); overflow:hidden; }
.ret-stat { display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 26px;
  border-right:1px solid var(--line); }
.ret-stat:last-child { border-right:none; }
.ret-val { font-family:ui-monospace,monospace; font-size:22px; font-weight:700; color:var(--cyan);
  text-shadow:var(--glow-cyan); }
.ret-lbl { font-size:8px; letter-spacing:.24em; color:var(--mute); }
.enter-cockpit { font-size:11px; letter-spacing:.2em; font-weight:700; text-decoration:none;
  color:var(--bg0); background:linear-gradient(90deg, var(--cyan), var(--gold)); padding:11px 26px;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow:var(--glow-gold); transition:transform .15s, box-shadow .15s; }
.enter-cockpit:hover { transform:translateY(-2px); box-shadow:0 0 34px rgba(245,183,63,.55); }

/* ---- the expanding directory ---- */
.directory { flex:1; display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:14px; padding-top:8px; }
.dir-loading { color:var(--mute); font-size:11px; grid-column:1/-1; padding:20px; }

.node { position:relative; background:linear-gradient(160deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--line); padding:0; cursor:pointer; overflow:hidden;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition:border-color .2s, transform .2s, box-shadow .2s;
  animation:nodeIn .5s cubic-bezier(.2,.8,.2,1) both; }
.node:hover { border-color:var(--accent,var(--cyan)); transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 22px color-mix(in srgb, var(--accent,var(--cyan)) 30%, transparent); }
.node::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent,var(--cyan)); box-shadow:0 0 12px var(--accent,var(--cyan)); }
.node-head { display:flex; align-items:center; gap:11px; padding:15px 16px 11px; }
.node-glyph { width:30px; height:30px; flex:none; display:grid; place-items:center; font-size:15px;
  color:var(--accent,var(--cyan)); border:1px solid var(--accent,var(--cyan)); border-radius:6px;
  background:color-mix(in srgb, var(--accent,var(--cyan)) 12%, transparent); }
.node-titles { flex:1; min-width:0; }
.node-title { font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--txt); }
.node-stone { font-size:8.5px; font-weight:600; letter-spacing:.14em; color:var(--accent,var(--cyan));
  opacity:.85; margin-left:5px; vertical-align:middle; }
.node-sub { font-size:var(--fs-tiny); letter-spacing:.08em; color:var(--mute); margin-top:1px; }
.node-domain { display:block; font-size:8px; letter-spacing:.1em; color:var(--mute); opacity:.7;
  margin-top:2px; font-style:italic; }
/* The core — the All-Spark knowledge center of the Gauntlet */
.node.center { border-color:color-mix(in srgb, var(--accent,var(--emerald)) 55%, var(--line));
  box-shadow:0 0 26px color-mix(in srgb, var(--accent,var(--emerald)) 22%, transparent); }
.node.center .node-glyph { box-shadow:0 0 14px var(--accent,var(--emerald)); }
/* dormant nodes — dim until their backing capability is wired (the "ascend" mechanic) */
.node.dormant { opacity:.46; }
.node.dormant:hover { opacity:.7; }
.node-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.node-dot.live { background:var(--emerald); box-shadow:0 0 8px var(--emerald); }
.node-dot.dormant { background:var(--amber); box-shadow:0 0 8px var(--amber); }
.node-dot.off { background:var(--mute); }
.node-body { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.2,.8,.2,1);
  padding:0 16px; }
.node.open .node-body { max-height:280px; padding-bottom:14px; }
.node.open { border-color:var(--accent,var(--cyan)); }
.node-items { list-style:none; margin:0 0 10px; padding:0; border-top:1px solid var(--line); }
.node-item { display:flex; justify-content:space-between; gap:8px; padding:7px 2px;
  font-size:10.5px; color:var(--silver); border-bottom:1px solid rgba(120,140,200,.06); }
.node-item .ni-route { font-family:ui-monospace,monospace; font-size:9px; color:var(--mute); }
.node-item .ni-tag { font-size:8px; letter-spacing:.06em; text-transform:uppercase; padding:1px 5px;
  border-radius:3px; background:rgba(151,71,255,.16); color:var(--uv); }
.node-enter { display:inline-block; font-size:9px; letter-spacing:.16em; font-weight:700;
  text-decoration:none; color:var(--accent,var(--cyan)); border:1px solid var(--accent,var(--cyan));
  padding:6px 14px; border-radius:3px; transition:background .15s, color .15s; }
.node-enter:hover { background:var(--accent,var(--cyan)); color:var(--bg0); }

.atrium-foot { padding:26px 0 0; text-align:center; font-size:var(--fs-tiny); letter-spacing:.16em;
  color:var(--mute); }

/* ---- TEACHING PANEL: immersive modal for stone interaction ---- */
.teaching-panel { position:fixed; inset:0; z-index:1000; background:rgba(4, 4, 6, 0.85);
  backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s cubic-bezier(.2,.8,.2,1);
  animation:none; }
.teaching-panel.open { opacity:1; pointer-events:auto; animation:teachingFadeIn .4s cubic-bezier(.2,.8,.2,1); }

.teaching-content { position:relative; background:linear-gradient(135deg,
    color-mix(in srgb, var(--stone-color) 8%, var(--bg1)),
    color-mix(in srgb, var(--stone-color) 4%, var(--surface-2)));
  border:2px solid var(--stone-color); border-radius:12px;
  max-width:620px; max-height:85vh; overflow-y:auto; padding:0;
  box-shadow:0 0 60px color-mix(in srgb, var(--stone-color) 40%, transparent),
             inset 0 0 40px rgba(255,255,255,.03);
  animation:teachingScaleIn .4s cubic-bezier(.2,.8,.2,1); }

.teaching-close { position:absolute; top:16px; right:16px; z-index:10;
  background:none; border:1px solid rgba(255,255,255,.2); color:var(--txt);
  width:32px; height:32px; border-radius:50%; font-size:18px;
  cursor:pointer; transition:background .15s, border-color .15s;
  display:grid; place-items:center; }
.teaching-close:hover { background:rgba(255,255,255,.1); border-color:var(--stone-color); }

.teaching-header { display:flex; align-items:center; gap:18px; padding:28px 28px 0;
  border-bottom:1px solid rgba(255,255,255,.1); }
.teaching-gem { width:64px; height:64px; flex:none; border-radius:8px;
  filter:drop-shadow(0 0 20px currentColor); animation:gemPulse 2.4s ease-in-out infinite; }
.teaching-titles h2 { margin:0 0 6px; font-size:22px; font-weight:800;
  letter-spacing:.08em; background:linear-gradient(90deg, currentColor, var(--silver));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.teaching-stone-name { margin:0; font-size:11px; letter-spacing:.2em; color:var(--mute);
  text-transform:uppercase; }

.teaching-body { padding:24px 28px; }
.teaching-section { margin-bottom:22px; }
.teaching-section h3 { margin:0 0 10px; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--stone-color); opacity:.95; }
.teaching-section p { margin:0; font-size:13px; line-height:1.6; color:var(--txt); }
.teaching-section.manifested { background:rgba(255,255,255,.04); padding:14px 16px;
  border-left:3px solid var(--stone-color); border-radius:4px; }
.teaching-section.reflection blockquote { margin:0 0 10px; padding:0; font-size:13px;
  line-height:1.7; color:var(--silver); font-style:italic; }
.reflection-credit { margin:0; font-size:10px; color:var(--mute); text-align:right; }

.teaching-navigate { display:inline-block; margin-top:16px;
  background:linear-gradient(90deg, var(--stone-color), color-mix(in srgb, var(--stone-color) 80%, var(--cyan)));
  color:var(--bg0); padding:12px 22px; border-radius:6px; font-size:11px;
  letter-spacing:.16em; font-weight:700; text-decoration:none;
  box-shadow:0 0 20px color-mix(in srgb, var(--stone-color) 50%, transparent);
  transition:transform .15s, box-shadow .15s; }
.teaching-navigate:hover { transform:translateY(-2px);
  box-shadow:0 0 30px color-mix(in srgb, var(--stone-color) 70%, transparent); }

/* ---- motion + fx-adaptive ---- */
@keyframes spin    { to { transform:rotate(360deg); } }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeDown{ from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:none} }
@keyframes nodeIn  { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes teachingFadeIn { from{opacity:0} to{opacity:1} }
@keyframes teachingScaleIn { from{opacity:0; transform:scale(.92)} to{opacity:1; transform:scale(1)} }
@keyframes gemPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* ---- FX ADAPTIVE: reduce motion on lower-end devices (read window.OmniFX) ---- */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ---- mobile breakpoints ---- */
@media (max-width:680px) {
  .directory { grid-template-columns:1fr; }
  .atrium-head { flex-wrap:wrap; }
  .boot { margin-left:0; width:100%; }
  .reticle { flex-wrap:wrap; }
  .brand h1 { font-size:22px; letter-spacing:.3em; }

  .teaching-content { max-width:90vw; max-height:90vh; }
  .teaching-header { gap:12px; padding:20px; }
  .teaching-gem { width:52px; height:52px; }
  .teaching-titles h2 { font-size:18px; }
  .teaching-body { padding:18px 20px; }
  .teaching-section { margin-bottom:16px; }
}

@media (max-width:400px) {
  .brand h1 { font-size:18px; letter-spacing:.2em; }
  .teaching-content { max-width:95vw; }
  .teaching-titles h2 { font-size:16px; }
  .teaching-section h3 { font-size:11px; }
  .teaching-section p { font-size:12px; }
}