/* scull7.com — deep space + glassmorphic base */

:root {
  color-scheme: dark;
  --bg-void: #050508;
  --bg-deep: #0a0a0f;
  --bg-panel: rgba(18, 18, 28, 0.55);
  --bg-panel-strong: rgba(22, 24, 40, 0.72);
  --glass-border: rgba(180, 200, 255, 0.14);
  --glass-border-hot: rgba(140, 220, 255, 0.35);
  --text: #e8ecf7;
  --text-dim: #9aa3bd;
  --text-mute: #6b7390;
  --accent-cyan: #5ce1ff;
  --accent-magenta: #c77dff;
  --accent-blue: #6c8cff;
  --accent-green: #7dffa3;
  --accent-amber: #ffd166;
  --accent-red: #ff6b8a;
  --nebula-1: rgba(92, 60, 180, 0.35);
  --nebula-2: rgba(40, 90, 200, 0.28);
  --nebula-3: rgba(180, 40, 140, 0.18);
  --star: rgba(255, 255, 255, 0.9);
  --blur: 18px;
  --radius: 16px;
  --radius-sm: 10px;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --status-h: 28px;
  --cmdline-h: 32px;
  --pad: clamp(12px, 2vw, 28px);
  --shadow-glow: 0 0 40px rgba(92, 225, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-void);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}

#app {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  min-height: 100dvh;
  background: transparent;
}

html,
html.dark,
html[data-theme="dark"],
body {
  background: var(--bg-void);
  color: var(--text);
}

/* vim-root owns the viewport */
#vim-root {
  display: block;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
}

/* Galaxy backdrop */
.galaxy {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 12% 18%, var(--nebula-1), transparent 60%),
    radial-gradient(900px 600px at 82% 28%, var(--nebula-2), transparent 55%),
    radial-gradient(800px 700px at 50% 88%, var(--nebula-3), transparent 60%),
    radial-gradient(ellipse at center, #0d0f1a 0%, var(--bg-void) 70%);
  overflow: hidden;
}

.galaxy::before,
.galaxy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* dense star field */
.galaxy::before {
  background-image:
    radial-gradient(1px 1px at 8% 12%, var(--star), transparent),
    radial-gradient(1px 1px at 22% 40%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 35% 18%, #fff, transparent),
    radial-gradient(1px 1px at 48% 72%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 61% 33%, rgba(200, 220, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 74% 58%, #fff, transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 15% 78%, rgba(180, 200, 255, 0.8), transparent),
    radial-gradient(1px 1px at 42% 90%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 93% 80%, #fff, transparent),
    radial-gradient(1px 1px at 5% 55%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 68% 12%, rgba(200, 230, 255, 0.85), transparent);
  opacity: 0.85;
  animation: twinkle 8s ease-in-out infinite alternate;
}

/* soft milky haze */
.galaxy::after {
  background:
    radial-gradient(2px 2px at 30% 50%, rgba(255, 255, 255, 0.35), transparent 40%),
    radial-gradient(ellipse 60% 30% at 50% 40%, rgba(120, 100, 255, 0.08), transparent);
  filter: blur(1px);
  opacity: 0.7;
}

@keyframes twinkle {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

a {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

a:hover {
  color: #9aefff;
  text-shadow: 0 0 12px rgba(92, 225, 255, 0.35);
}

/* Glass panel primitive */
.glass {
  background: rgba(14, 16, 28, 0.92);
  background: var(--bg-panel);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  box-shadow: var(--shadow-glow);
}

.glass-strong {
  background: rgba(18, 20, 36, 0.94);
  background: var(--bg-panel-strong);
  border: 1px solid var(--glass-border-hot);
  border-radius: var(--radius);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--shadow-glow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(14, 16, 28, 0.94);
  }

  .glass-strong {
    background: rgba(18, 20, 36, 0.96);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.pill.hot {
  border-color: rgba(92, 225, 255, 0.35);
  color: var(--accent-cyan);
  background: rgba(92, 225, 255, 0.08);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .galaxy::before,
  .galaxy::after,
  .relay-packet {
    animation: none !important;
  }
}