/* =========================================================
   EHSAN DIGITAL WORLD — V6 ADVANCED SOLAR / WORKSTATION
   ========================================================= */

/* Remove the old flat photographic scroll replacements.
   V6 uses live WebGL for the transition instead. */
#scene-surface,
#scene-space { display:none !important; }

/* The original universe overlay remains only as a subtle deep-space bridge. */
#scene-universe {
  background: radial-gradient(ellipse 110% 90% at 50% 45%, rgba(5,8,28,.42), rgba(1,2,9,.82) 72%, rgba(0,0,0,.94)) !important;
}

#solar-system-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

#solar-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 38%, rgba(0,2,12,.12) 68%, rgba(0,2,10,.64) 100%),
    linear-gradient(180deg, rgba(1,4,14,.30), transparent 25%, transparent 72%, rgba(1,4,14,.42));
}

#solar-hud {
  position: fixed;
  left: clamp(18px, 4vw, 64px);
  top: 50%;
  z-index: 8;
  width: min(315px, 42vw);
  transform: translateY(-50%) translateX(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
#solar-hud.show { opacity:1; transform:translateY(-50%) translateX(0); }
.solar-kicker {
  font: 500 9px/1.2 var(--font-mono);
  color: #79ddff;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 11px;
}
.solar-title {
  font: 600 clamp(20px, 2.6vw, 36px)/1 var(--font-display);
  color: #fff;
  letter-spacing: -.025em;
  text-shadow: 0 0 28px rgba(80,155,255,.28);
}
.solar-sub {
  max-width: 300px;
  margin-top: 10px;
  font: 400 10.5px/1.6 var(--font-mono);
  letter-spacing: .045em;
  color: rgba(192,207,236,.72);
}
.solar-data {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}
.solar-pill {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .09em;
  color: rgba(230,242,255,.86);
  border: 1px solid rgba(112,158,224,.19);
  background: rgba(8,14,32,.38);
  backdrop-filter: blur(12px);
  padding: 7px 9px;
  border-radius: 100px;
}
.solar-scale-note {
  margin-top: 12px;
  font: 400 8px/1.4 var(--font-mono);
  letter-spacing: .08em;
  color: rgba(135,151,184,.56);
  text-transform: uppercase;
}

#solar-progress {
  position: fixed;
  right: clamp(10px, 2vw, 28px);
  top: 50%;
  width: 2px;
  height: min(300px, 38vh);
  transform: translateY(-50%);
  z-index: 8;
  background: rgba(150,175,225,.10);
  pointer-events: none;
  opacity: .75;
  border-radius: 10px;
  overflow: hidden;
}
#solar-progress-fill {
  position:absolute;
  inset: 0 0 auto;
  height:0%;
  background:linear-gradient(#22d3ee,#3b82f6,#7c3aed,#e8b464);
  box-shadow:0 0 18px rgba(34,211,238,.55);
}

#solar-label-layer {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}
.solar-planet-label {
  position:absolute;
  transform:translate(-50%,-50%);
  opacity:0;
  white-space:nowrap;
  font:600 9px/1 var(--font-mono);
  letter-spacing:.15em;
  color:rgba(235,244,255,.94);
  text-shadow:0 0 8px #000, 0 1px 3px #000;
  transition:opacity .18s ease;
}
.solar-planet-label small {
  display:block;
  margin-top:5px;
  font-size:7px;
  letter-spacing:.09em;
  color:rgba(131,195,255,.68);
}
.solar-planet-label::before {
  content:'';
  display:block;
  width:3px;height:3px;
  margin:0 auto 5px;
  border-radius:50%;
  background:#8fdcff;
  box-shadow:0 0 7px #8fdcff;
}

/* ---------------- 3D PORTFOLIO WORKSTATION ---------------- */
.workstation {
  overflow: visible;
}
.workstation .section-head h2::after {
  content:' / 3D';
  font-family:var(--font-mono);
  font-size:.38em;
  letter-spacing:.12em;
  color:var(--cyan);
  vertical-align:middle;
  margin-left:8px;
}
#workstation3d-wrap {
  position: relative;
  width: min(920px, 96vw);
  height: min(620px, 72vh);
  min-height: 430px;
  margin: 34px auto 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(115,155,225,.17);
  background:
    radial-gradient(circle at 50% 43%, rgba(41,94,180,.11), transparent 40%),
    linear-gradient(180deg, rgba(7,11,25,.72), rgba(4,6,14,.90));
  box-shadow:
    0 38px 120px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.03);
  isolation:isolate;
}
#workstation3d-wrap::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(72,141,255,.034) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,141,255,.034) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 90%);
}
#workstation3d {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  cursor:zoom-in;
  z-index:1;
  touch-action:manipulation;
}
.workstation3d-hud {
  position:absolute;
  z-index:3;
  left:22px;
  bottom:20px;
  pointer-events:none;
  text-align:left;
}
.workstation3d-hud b {
  display:block;
  font:600 12px/1 var(--font-mono);
  letter-spacing:.16em;
  color:#e9f5ff;
}
.workstation3d-hud span {
  display:block;
  margin-top:7px;
  font:400 9px/1.4 var(--font-mono);
  letter-spacing:.08em;
  color:rgba(154,178,215,.70);
}
.workstation3d-chip {
  position:absolute;
  z-index:3;
  right:18px;
  top:18px;
  pointer-events:none;
  font:500 9px/1 var(--font-mono);
  letter-spacing:.15em;
  color:#7ef7c0;
  padding:8px 10px;
  border:1px solid rgba(126,247,192,.20);
  background:rgba(5,20,20,.35);
  border-radius:100px;
  backdrop-filter:blur(9px);
}
html.webgl-workstation-v6 .laptop-3d,
html.webgl-workstation-v6 .laptop-orbit-label {
  display:none !important;
}
html.webgl-workstation-v6 .laptop-stage {
  display:none !important;
}
#projects .section-head h2 {
  background:linear-gradient(120deg,#fff 20%,#bdd4ff 58%,#67e8f9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.texture-credit {
  margin:14px auto 0;
  max-width:800px;
  font:400 9px/1.5 var(--font-mono);
  letter-spacing:.04em;
  color:rgba(120,135,165,.62);
}

@media (max-width:760px) {
  #solar-hud { left:18px; top:auto; bottom:82px; transform:none; width:60vw; }
  #solar-hud.show { transform:none; }
  .solar-sub,.solar-data { display:none; }
  #solar-progress { right:8px; height:24vh; }
  .solar-planet-label { font-size:7px; }
  #workstation3d-wrap { min-height:380px; height:56vh; border-radius:20px; }
  .workstation3d-hud span { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  #solar-hud,#solar-vignette { transition:none !important; }
}