/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS  —  deep space blue theme
   ═══════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --bg:            #020b18;
  --bg-soft:       #051222;
  --surface:       rgba(5, 18, 34, 0.80);
  --surface-strong:rgba(2, 11, 24, 0.96);
  --text:          #e8f4ff;
  --muted:         #6b93b8;
  --line:          rgba(56, 182, 255, 0.18);
  --blue-1:        #00b4ff;   /* bright cyan-blue */
  --blue-2:        #1a6aff;   /* mid royal blue */
  --blue-3:        #0d2fff;   /* deep electric blue */
  --blue-4:        #7ab8ff;   /* pale sky blue */
  --primary:       #00b4ff;
  --secondary:     #1a6aff;
  --accent:        #7ab8ff;
  --danger:        #ff4466;
  --glow:          0 0 24px rgba(0, 180, 255, 0.45);
  --shadow:        0 20px 60px rgba(0, 0, 0, 0.70);
  --radius:        10px;
  --max:           1160px;
}
[data-theme="light"] {
  color-scheme: light;
  --bg:            #f0f6ff;
  --bg-soft:       #ddeeff;
  --surface:       rgba(255, 255, 255, 0.88);
  --surface-strong:rgba(255, 255, 255, 0.98);
  --text:          #071428;
  --muted:         #3460a0;
  --line:          rgba(26, 106, 255, 0.20);
  --primary:       #0066cc;
  --secondary:     #0033aa;
  --accent:        #4090e0;
  --shadow:        0 20px 60px rgba(0, 40, 120, 0.14);
}

/* light-mode navbar overrides */
[data-theme="light"] .site-header__inner {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 100, 200, 0.16);
  box-shadow: 0 2px 16px rgba(0, 60, 160, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.80);
}
[data-theme="light"] .site-header.is-scrolled .site-header__inner {
  background: rgba(240, 248, 255, 0.88);
  box-shadow: 0 8px 32px rgba(0, 60, 160, 0.14),
              0 0 0 1px rgba(0, 100, 200, 0.12);
}
[data-theme="light"] .nav a { color: rgba(7, 20, 40, 0.55); }
[data-theme="light"] .nav a:hover { color: #071428; background: rgba(0, 100, 200, 0.08); }
[data-theme="light"] .nav a.is-active { color: #fff; background: var(--primary); box-shadow: 0 0 12px rgba(0,100,200,.30); }
[data-theme="light"] .theme-toggle { border-color: rgba(0, 100, 200, 0.20); color: #3460a0; }
[data-theme="light"] .theme-toggle:hover { border-color: var(--primary); color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }

/* ═══════════════════════════════════════════════════════════════════
   LOADER
   ═══════════════════════════════════════════════════════════════════ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: #010810;
  transition: opacity .55s ease, visibility .55s ease;
}
.loader.is-hidden { opacity: 0; visibility: hidden; }
.loader__terminal {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px;
  border: 1px solid var(--blue-1);
  background: rgba(2, 10, 24, .95);
  box-shadow: 0 0 40px rgba(0, 180, 255, .25);
  font-family: "JetBrains Mono", monospace;
  border-radius: var(--radius);
}
.loader__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue-1);
  box-shadow: 0 0 14px var(--blue-1);
  animation: pulse 1.4s ease infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }
.cursor, .terminal-cursor {
  width: 8px; height: 1.1em;
  background: var(--blue-1);
  display: inline-block;
  animation: blink 1s steps(2, start) infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   MOUSE GLOW + AMBIENT + CANVAS
   ═══════════════════════════════════════════════════════════════════ */
.mouse-glow {
  position: fixed; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,255,.15) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%,-50%);
  z-index: 1; mix-blend-mode: screen;
  transition: width .3s ease, height .3s ease;
}
.ambient span {
  position: fixed; z-index: 0;
  width: 18vmin; aspect-ratio: 1;
  border: 1px solid rgba(0,180,255,.15);
  border-radius: 34% 66% 42% 58%;
  animation: floatBlob 20s ease-in-out infinite;
  opacity: .25;
}
.ambient span:nth-child(1) { left:7%;  top:18%; }
.ambient span:nth-child(2) { right:8%; top:26%; animation-delay:-5s; }
.ambient span:nth-child(3) { left:14%; bottom:18%; animation-delay:-9s; }
.ambient span:nth-child(4) { right:18%;bottom:10%; animation-delay:-14s; }
#particleCanvas { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.65; }

/* ═══════════════════════════════════════════════════════════════════
   PLANET BOXES  (CSS-animated, JS clones them)
   ═══════════════════════════════════════════════════════════════════ */
.planet-system {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.planet {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 180, 255, .30);
  animation: planetDrift linear infinite;
  opacity: .55;
}
/* sizes/colours set by JS via inline style */

.planet-box {
  position: absolute;
  transform-style: preserve-3d;
  animation: boxOrbit linear infinite, boxSpin3d 6s linear infinite;
  pointer-events: none;
}
.planet-box__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.planet-box__face {
  position: absolute;
  border-style: solid;
  border-color: inherit;
}
@keyframes boxOrbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg); }
}
@keyframes boxSpin3d {
  from { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
  to   { transform: rotateX(360deg) rotateY(540deg) rotateZ(180deg); }
}
@keyframes planetDrift {
  0%   { transform: translate(0px, 0px) scale(1); }
  25%  { transform: translate(30px, -20px) scale(1.04); }
  50%  { transform: translate(0px, -40px) scale(1); }
  75%  { transform: translate(-30px,-20px) scale(.96); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION  —  centered floating pill
   ═══════════════════════════════════════════════════════════════════ */

/* Full-width strip — just holds the pill centered */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 14px 20px;
  /* no background on the strip itself — pill carries it */
  pointer-events: none;           /* strip is click-through */
  transition: padding .3s ease;
}
.site-header.is-scrolled { padding-top: 8px; }

/* The actual pill */
.site-header__inner {
  pointer-events: all;            /* pill is interactive */
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 52px;
  padding: 0 10px 0 14px;
  border-radius: 999px;
  /* light frosted glass */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.is-scrolled .site-header__inner {
  background: rgba(6, 18, 38, 0.72);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(0, 180, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Logo badge */
.brand {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--blue-1);
  color: #020b18;
  font-size: .88rem; font-weight: 800;
  letter-spacing: -.02em; flex-shrink: 0;
  box-shadow: 0 0 14px rgba(0, 180, 255, .45);
  transition: box-shadow .2s ease, transform .2s ease;
}
.brand:hover { box-shadow: 0 0 22px rgba(0, 180, 255, .80); transform: scale(1.1) rotate(-4deg); }

/* Nav links */
.nav {
  display: flex; align-items: center; gap: 2px;
  flex: 1; justify-content: center;
}

.nav a {
  position: relative;
  padding: 7px 14px;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  border-radius: 999px;
  transition: color .18s ease, background .18s ease;
  white-space: nowrap;
}

/* pill highlight on hover */
.nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

/* active — solid blue chip */
.nav a.is-active {
  color: #020b18;
  background: var(--blue-1);
  box-shadow: 0 0 12px rgba(0, 180, 255, .40);
}

/* remove old underline pseudo */
.nav a::after { display: none; }

/* Theme toggle — icon button */
.theme-toggle {
  width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .06);
  cursor: pointer; flex-shrink: 0;
  transition: border-color .18s ease, color .18s ease,
              background .18s ease, box-shadow .18s ease;
}
.theme-toggle:hover {
  border-color: var(--blue-1);
  color: var(--blue-1);
  background: rgba(0, 180, 255, .10);
  box-shadow: 0 0 10px rgba(0, 180, 255, .25);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT + HERO
   ═══════════════════════════════════════════════════════════════════ */
main, .terminal-window, .terminal-restore { position: relative; z-index: 2; }
.section { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; padding: 112px 0; }
.hero {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0,1.08fr) minmax(280px,.75fr);
  align-items: center; gap: 64px; padding-top: 120px;
}
.eyebrow {
  color: var(--blue-1);
  font: 700 .78rem/1 "JetBrains Mono", monospace;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px;
}
h1,h2,h3,p { margin-top: 0; }
h1 {
  max-width: 780px;
  font-size: clamp(2.9rem,7vw,6.8rem);
  line-height: .95; letter-spacing: -.01em; margin-bottom: 26px;
  text-shadow: 0 0 60px rgba(0,180,255,.18);
}
h2 { font-size: clamp(2rem,4.5vw,4.2rem); line-height:1; letter-spacing:-.01em; margin-bottom:18px; }
h3 { font-size: 1.24rem; }
.hero__text, .section-copy { max-width: 660px; color: var(--muted); font-size: 1.1rem; line-height: 1.78; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  border: 2px solid transparent; border-radius: var(--radius);
  font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
.btn--primary {
  background: var(--blue-1); color: #020b18; border-color: var(--blue-1);
  box-shadow: 0 0 18px rgba(0,180,255,.40);
}
.btn--primary:hover {
  background: #33c6ff; border-color: #33c6ff;
  box-shadow: 0 0 30px rgba(0,200,255,.60);
  transform: translateY(-3px);
}
.btn--primary:active { transform: translateY(0); box-shadow: none; }
.btn--ghost {
  background: transparent; color: var(--text); border-color: var(--blue-2);
}
.btn--ghost:hover {
  background: var(--blue-2); color: #fff;
  box-shadow: 0 0 20px rgba(26,106,255,.45);
  transform: translateY(-3px);
}
.btn--ghost:active { transform: translateY(0); }

/* ── PROFILE ORBIT ── */
.profile-orbit {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,255,.12) 0%, transparent 65%);
}
.profile-orbit img {
  width: min(380px,82vw); aspect-ratio:1; object-fit:cover;
  border-radius: 50%;
  border: 2px solid rgba(0,180,255,.60);
  box-shadow: 0 0 40px rgba(0,180,255,.25), 0 0 80px rgba(0,180,255,.10);
  filter: drop-shadow(0 28px 50px rgba(0,0,0,.55));
  animation: floatProfile 5s ease-in-out infinite;
}
@keyframes floatProfile { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.orbit {
  position: absolute; inset: 5%;
  border: 1px dashed rgba(0,180,255,.30); border-radius: 50%;
  animation: spin 20s linear infinite;
}
.orbit--two {
  inset: 15%; border-color: rgba(26,106,255,.25);
  animation-duration: 13s; animation-direction: reverse;
}

/* ═══════════════════════════════════════════════════════════════════
   SKILLS
   ═══════════════════════════════════════════════════════════════════ */
.section--split { display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:start; }
.section-heading { max-width:760px; margin-bottom:34px; }
.skills-grid { display:grid; gap:14px; }
.skill-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); backdrop-filter: blur(18px);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.skill-card:hover { border-color: rgba(0,180,255,.45); box-shadow: 0 0 20px rgba(0,180,255,.12); transform: translateX(4px); }
.skill-card span, .skill-card strong { position:relative; z-index:1; }
.skill-card i {
  position: absolute; left:0; bottom:0; height:3px; width:0;
  background: var(--blue-1);
  box-shadow: 0 0 10px var(--blue-1);
  transition: width 1.4s cubic-bezier(.19,1,.22,1);
}
.skill-card.is-visible i { width: calc(var(--value) * 1%); }

/* ═══════════════════════════════════════════════════════════════════
   PROJECTS
   ═══════════════════════════════════════════════════════════════════ */
.project-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.project-card, .contact-panel, .timeline article {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); backdrop-filter: blur(18px); box-shadow: var(--shadow);
}
.project-card { padding:16px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.project-card:hover {
  transform: translateY(-10px);
  border-color: rgba(0,180,255,.50);
  box-shadow: 0 16px 48px rgba(0,180,255,.15);
}
.project-card__media {
  display: grid; place-items: end start; min-height: 170px;
  margin-bottom: 18px; padding: 16px; border-radius: var(--radius);
  background: var(--blue-2);
  color: #fff; font-size: 1.1rem; font-weight: 800; letter-spacing: .02em;
  position: relative; overflow: hidden;
}
/* shimmer sweep on hover */
.project-card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.project-card:hover .project-card__media::after { transform: translateX(100%); }
.project-card p, .timeline p { color: var(--muted); line-height: 1.65; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tags span {
  padding: 5px 10px;
  border: 1px solid rgba(0,180,255,.25); border-radius: 4px;
  color: var(--blue-4); font-size: .8rem; font-weight: 600;
  background: rgba(0,180,255,.06);
}

/* ═══════════════════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════════════════ */
.timeline { position:relative; display:grid; gap:14px; }
.timeline::before {
  content:''; position:absolute; left:10px; top:0; bottom:0;
  width:2px; background:var(--blue-1); opacity:.25;
}
.timeline article { position:relative; margin-left:32px; padding:18px; }
.timeline article::before {
  content:''; position:absolute; left:-27px; top:23px;
  width:12px; height:12px; border-radius:50%;
  background: var(--blue-1); border: 2px solid var(--bg);
  box-shadow: 0 0 14px var(--blue-1);
}
time { color: var(--blue-4); font-family:"JetBrains Mono",monospace; font-size:.82rem; font-weight:700; }

/* ═══════════════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════════════ */
.contact-section { padding-bottom: 190px; }
.contact-panel { max-width: 760px; padding: clamp(22px,5vw,42px); }
.contact-form { display:grid; gap:16px; margin-top:28px; }
.contact-form label { display:grid; gap:8px; color:var(--muted); font-weight:600; }
.contact-form input, .contact-form textarea {
  width:100%; border: 2px solid var(--line); border-radius: var(--radius);
  padding:13px 15px; color:var(--text); background:rgba(0,180,255,.04);
  outline:none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--blue-1);
  box-shadow: 0 0 0 4px rgba(0,180,255,.10);
  transform: translateY(-1px);
}
.form-status { min-height:1.4em; color:var(--blue-1); font-weight:600; }
.socials { display:flex; gap:16px; margin-top:20px; }
.socials a {
  color: var(--blue-1); font-weight:700; font-size:.95rem;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, text-shadow .18s ease;
}
.socials a:hover { border-color: var(--blue-1); text-shadow: 0 0 10px rgba(0,180,255,.60); }

/* ═══════════════════════════════════════════════════════════════════
   TERMINAL
   ═══════════════════════════════════════════════════════════════════ */
.terminal-window {
  position: fixed; left:24px; bottom:24px;
  width: min(720px,calc(100vw - 48px)); height:330px;
  display: grid; grid-template-rows: 42px 1fr;
  border: 1px solid rgba(0,180,255,.45); border-radius: var(--radius);
  background: rgba(2,8,18,.96); color: #a8d8ff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 24px 80px rgba(0,0,0,.65), 0 0 40px rgba(0,180,255,.12);
  backdrop-filter: blur(18px); overflow:hidden;
  animation: terminalIn .8s cubic-bezier(.19,1,.22,1) both;
  transition: width .28s ease, height .28s ease, opacity .25s ease, transform .25s ease;
}
.terminal-window.is-minimized { height:42px; }
.terminal-window.is-maximized { left:16px!important; right:16px; bottom:16px; width:calc(100vw - 32px); height:min(70vh,680px); }
.terminal-window.is-closed { opacity:0; transform:translateY(18px) scale(.98); pointer-events:none; }
.terminal-window__bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  border-bottom: 1px solid rgba(0,180,255,.20);
  background: rgba(0,180,255,.05);
  cursor:grab; user-select:none;
  font-family:"JetBrains Mono",monospace; font-size:.85rem; color: var(--blue-1);
}
.traffic { display:flex; gap:8px; }
.traffic__btn { width:12px; height:12px; border:0; border-radius:50%; cursor:pointer; }
.traffic__btn--close { background:#ff5f57; }
.traffic__btn--min   { background:#ffbd2e; }
.traffic__btn--max   { background:#28c840; }
.terminal-window__body {
  min-height:0; display:grid; grid-template-rows:1fr auto;
  padding:14px; font:500 .92rem/1.65 "JetBrains Mono",monospace;
}
.terminal-output { overflow:auto; padding-right:4px; }
.terminal-line { margin:0 0 6px; white-space:pre-wrap; }
.terminal-line--muted   { color:#5580a0; }
.terminal-line--command { color:var(--blue-1); }
.terminal-input-row {
  display:flex; align-items:center; gap:8px;
  border-top:1px solid rgba(0,180,255,.16); padding-top:10px;
}
.prompt { color:var(--blue-1); }
.terminal-input-row input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:inherit; font-family:inherit; }
.terminal-restore {
  position:fixed; left:24px; bottom:24px; z-index:3; display:none;
  border: 1px solid var(--blue-1); border-radius: var(--radius);
  padding:10px 18px; background:var(--bg-soft); color:var(--blue-1);
  font-weight:700; cursor:pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.terminal-restore:hover { background:var(--blue-1); color:#020b18; box-shadow:0 0 18px rgba(0,180,255,.45); }
.terminal-restore.is-visible { display:block; }

/* ═══════════════════════════════════════════════════════════════════
   REVEAL + KEYFRAMES
   ═══════════════════════════════════════════════════════════════════ */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s ease; }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }

@keyframes blink      { 50%{opacity:0} }
@keyframes floatBlob  { 50%{transform:translate3d(22px,-26px,0) rotate(20deg)} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes terminalIn { from{opacity:0;transform:translateY(34px) scale(.98)} to{opacity:1;transform:none} }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:960px) {
  .hero, .section--split { grid-template-columns:1fr; }
  .project-grid { grid-template-columns:repeat(2,1fr); }
  .hero { gap:28px; padding-top:100px; }
}
@media (max-width:720px) {
  .site-header { padding:10px 12px; }
  .site-header__inner { height:auto; flex-wrap:wrap; border-radius:18px; padding:10px 12px; gap:8px; }
  .nav { order:3; width:100%; overflow-x:auto; justify-content:flex-start; flex-wrap:nowrap; padding-bottom:2px; }
  .nav a { padding:6px 11px; font-size:.78rem; }
  .section { width:min(calc(100% - 24px),var(--max)); padding:80px 0; }
  .hero { min-height:auto; padding-top:110px; }
  h1 { font-size:clamp(2.45rem,14vw,4.4rem); }
  .project-grid { grid-template-columns:1fr; }
  .terminal-window { left:12px; bottom:12px; width:calc(100vw - 24px); height:300px; }
  .contact-section { padding-bottom:360px; }
  .mouse-glow { display:none; }
  .planet-system { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    scroll-behavior:auto!important; transition-duration:.01ms!important;
  }
  #particleCanvas,.ambient,.mouse-glow,.planet-system { display:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   CURSOR TRAIL  (blue sparks)
   ═══════════════════════════════════════════════════════════════════ */
.cursor-dot {
  position:fixed; top:0; left:0; border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  animation:cursorFade .6s ease forwards;
}
@keyframes cursorFade {
  0%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(0.1); }
}

/* ═══════════════════════════════════════════════════════════════════
   3-D CURSOR BOX  (blue wireframe)
   ═══════════════════════════════════════════════════════════════════ */
#cursor3dBox {
  position:fixed; top:0; left:0; width:52px; height:52px;
  pointer-events:none; z-index:9997;
  transform-style:preserve-3d; perspective:400px;
  transform:translate(-50%,-50%); will-change:transform;
}
.box3d {
  position:absolute; inset:0; transform-style:preserve-3d;
  animation:boxSpin 5s linear infinite;
}
@keyframes boxSpin {
  from{transform:rotateX(0deg)   rotateY(0deg)}
  to  {transform:rotateX(360deg) rotateY(360deg)}
}
.box3d__face {
  position:absolute; width:52px; height:52px;
  border:1.5px solid rgba(0,180,255,.85);
  background:rgba(26,106,255,.06);
  box-shadow: inset 0 0 12px rgba(0,180,255,.15);
}
.box3d__face--front  { transform:translateZ(26px); }
.box3d__face--back   { transform:rotateY(180deg)  translateZ(26px); }
.box3d__face--left   { transform:rotateY(-90deg)  translateZ(26px); }
.box3d__face--right  { transform:rotateY(90deg)   translateZ(26px); }
.box3d__face--top    { transform:rotateX(90deg)   translateZ(26px); }
.box3d__face--bottom { transform:rotateX(-90deg)  translateZ(26px); }

@media (prefers-reduced-motion:reduce) {
  .cursor-dot,#cursor3dBox { display:none!important; }
}