/* ============================================================
   ITEZIA — Ecosystem 3D Page
   Scroll-driven Three.js constellation visualization
   ============================================================ */

/* ── Scroll driver container ── */
.eco3d-page {
  position: relative;
  height: 640vh;
}

/* ── Sticky viewport ── */
.eco3d-sticky {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: var(--void);
}

/* ── WebGL canvas ── */
.eco3d-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}

/* ── CSS floating module labels ── */
.eco3d-labels { position: absolute; inset: 0; pointer-events: none; }

.eco3d-label {
  position: absolute; display: flex; align-items: center; gap: 8px;
  transform: translate(-50%, -100%) translateY(-6px);
  font-family: var(--mono); font-size: var(--fs-xs); pointer-events: none;
  transition: opacity 0.4s ease;
  background: rgba(8,8,8,0.92); border: 1px solid rgba(192,150,60,0.12);
  border-radius: var(--r2); padding: 6px 10px;
  backdrop-filter: blur(10px); white-space: nowrap;
}
.eco3d-label i        { font-size: 13px; }
.eco3d-label-name     { color: var(--t1); font-size: 10px; font-weight: 600; line-height: 1.3; }
.eco3d-label-sub      { color: var(--t4); font-size: 8.5px; margin-top: 1px; }

/* ── HUD overlay ── */
.eco3d-hud {
  position: absolute; inset: 0; pointer-events: none;
  padding: calc(var(--nav-h, 64px) + var(--s3)) var(--s5) var(--s5);
  display: flex; flex-direction: column;
}

/* PCB corner brackets */
.eco3d-corner           { position: absolute; width: 20px; height: 20px; border-style: solid; border-color: rgba(192,150,60,.22); }
.eco3d-corner--tl { top: calc(var(--nav-h, 64px) + var(--s4)); left:  var(--s4); border-width: 1px 0 0 1px; }
.eco3d-corner--tr { top: calc(var(--nav-h, 64px) + var(--s4)); right: var(--s4); border-width: 1px 1px 0 0; }
.eco3d-corner--bl { bottom: var(--s4); left:  var(--s4); border-width: 0 0 1px 1px; }
.eco3d-corner--br { bottom: var(--s4); right: var(--s4); border-width: 0 1px 1px 0; }

/* Top telemetry bar */
.eco3d-hud-top {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(192,150,60,.42);
  border-bottom: 1px solid rgba(192,150,60,.08); padding-bottom: var(--s3);
  flex-shrink: 0;
}
.eco3d-hud-title { color: rgba(212,175,90,.7); font-weight: 600; }
.eco3d-hud-sep   { opacity: 0.35; }
.eco3d-hud-dot   {
  width: 5px; height: 5px; border-radius: 50%;
  background: #4ADE80; box-shadow: 0 0 7px rgba(74,222,128,.85);
  flex-shrink: 0; animation: eco3d-dot-pulse 2.5s ease-in-out infinite;
}
@keyframes eco3d-dot-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0  7px rgba(74,222,128,.85); }
  50%       { opacity: .35; box-shadow: 0 0  2px rgba(74,222,128,.25); }
}

/* Chapter steps (left side) */
.eco3d-steps {
  position: absolute; left: var(--s5); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: var(--s5);
}
.eco3d-step               { display: flex; align-items: flex-start; gap: var(--s3); opacity: .22; transition: opacity .45s ease; font-family: var(--mono); }
.eco3d-step--active       { opacity: 1; }
.eco3d-step--active .eco3d-step-num { color: var(--brand-l); }
.eco3d-step-num   { font-size: 9.5px; color: rgba(192,150,60,.35); font-weight: 700; letter-spacing: .10em; min-width: 20px; padding-top: 1px; transition: color .3s ease; }
.eco3d-step-label { font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--t2); font-weight: 600; line-height: 1.2; }
.eco3d-step-desc  { font-size: 8.5px; color: var(--t4); margin-top: 2px; }

/* Bottom-centre progress bar */
.eco3d-progress {
  position: absolute; bottom: var(--s5); left: 50%; transform: translateX(-50%);
  width: 180px; display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(192,150,60,.32);
}
.eco3d-progress-track { width: 100%; height: 1px; background: rgba(192,150,60,.12); position: relative; overflow: hidden; }
.eco3d-progress-fill  { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, var(--brand), var(--blue)); transition: width .12s linear; }

/* Scroll hint */
.eco3d-scroll-hint {
  position: absolute; bottom: var(--s8); right: var(--s6);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(192,150,60,.32); transition: opacity .6s ease;
  animation: eco3d-hint 2s ease-in-out infinite;
}
@keyframes eco3d-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Final CTA overlay */
.eco3d-cta {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(192,150,60,.05) 0%, transparent 70%);
}
.eco3d-cta-inner   { text-align: center; padding: var(--s8); max-width: 480px; }
.eco3d-cta-heading { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; color: var(--t1); line-height: 1.15; margin: var(--s4) 0 var(--s5); }
.eco3d-cta-body    { font-family: var(--mono); font-size: var(--fs-sm); color: var(--t4); letter-spacing: .06em; margin-bottom: var(--s8); }
.eco3d-cta-actions { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .eco3d-steps    { display: none; }
  .eco3d-progress { width: 140px; }
  .eco3d-label    { display: none; }
  .eco3d-page     { height: 580vh; }
}
@media (max-width: 480px) {
  .eco3d-page         { height: 500vh; }
  .eco3d-cta-heading  { font-size: 1.8rem; }
}