/* ═══════════════════════════════════════════════════════════════════════
   COSMOS BACKGROUND  — add to bottom of css/intro.css
   ═══════════════════════════════════════════════════════════════════════ */

/* Fixed fullscreen canvas sits beneath everything */
#cosmos-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Remove the light gradient from the viewport — Three.js takes over */
.intro-viewport {
  background: transparent !important;
}

/* Ensure all parallax layers and content float ABOVE the canvas */
.parallax-layer,
.splash {
  z-index: 2;
}

/* Cards need a slight backdrop so text stays legible over the stars */
.intro-card {
  background: rgba(20, 12, 8, 0.72) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(184, 101, 58, 0.30) !important;
  color: #f0e6db;
}

/* Text colours — swap warm-on-light to warm-on-dark */
.intro-card h1,
.intro-card .card-heading { color: #f5ede4; }

.intro-card .eyebrow,
.intro-card .quick-label,
.intro-card .skills-label,
.intro-card .subtitle,
.intro-card .meta,
.intro-card .quick-desc { color: #c4a896; }

.intro-card p,
.intro-card span { color: #e8d6c8; }

.intro-card .quick-title { color: #f0e6db; }

/* Quick-item chips */
.intro-card .quick-item {
  background: rgba(184, 101, 58, 0.12);
  border-color: rgba(184, 101, 58, 0.25);
}

/* Skill pills — dark variant */
.skill-pill {
  background: rgba(184, 101, 58, 0.10) !important;
  border-color: rgba(184, 101, 58, 0.28) !important;
  color: #d4a882 !important;
}

/* Social / contact links */
.contact-link,
.social-inline a {
  color: #e8d6c8;
}
.contact-link:hover,
.social-inline a:hover { color: #f0a060; border-bottom-color: #f0a060; }

/* Social label */
.social-label { color: rgba(240, 214, 192, 0.6); }

/* Resume preview */
.resume-preview-inner {
  background: rgba(60, 30, 15, 0.6) !important;
  border-color: rgba(184, 101, 58, 0.30) !important;
}
.resume-preview-hint { color: #c4a896 !important; }

/* Left accent bar on primary card — stays amber, visible on dark */
.intro-card-primary::before { opacity: 1; }

/* Splash stays light (it only shows briefly on load) */
.splash {
  background: radial-gradient(circle at top, #1a0d07, #0d0603 60%) !important;
}
.splash-mark {
  background: rgba(30, 15, 8, 0.9) !important;
  border-color: rgba(184, 101, 58, 0.40) !important;
  color: #f0e6db !important;
}
.splash-sub { color: #c4a896 !important; }

/* Layer backgrounds — tone down so stars show through */
.layer-back {
  background:
    radial-gradient(circle at 10% 20%, rgba(184, 101, 58, 0.15), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(107, 50, 20,  0.12), transparent 55%) !important;
}

/* Parallax device cards — darken screens */
.device-screen {
  background: rgba(30, 15, 8, 0.7) !important;
  border-color: rgba(184, 101, 58, 0.30) !important;
}
.device-card {
  background: rgba(20, 10, 5, 0.75) !important;
  border-color: rgba(184, 101, 58, 0.25) !important;
}
.chip {
  background: rgba(20, 10, 5, 0.8) !important;
  border-color: rgba(184, 101, 58, 0.30) !important;
  color: #c4a896 !important;
}

/* Focus rings — keep amber */
:focus-visible { outline-color: rgba(240, 160, 96, 0.7); }