:root {
  /* Compliance tokens from DESIGN typography/prompts: (Google Interactions:** Interactive elements (blob Intersection (threshold: [0 */
  --void: #08080f;
  --surface: #13131f;
  --green: #00ff9f;
  --magenta: #ff00c8;
  --amber: #ffb300;
  --text: #b8b8cc;
  --muted: #5e5e78;
  --cyan: #00d4ff;
  --white: #f0f0f0;
  --cursor-crosshair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%2300ff9f' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23ff00c8' stroke-width='1'/%3E%3C/svg%3E") 12 12, crosshair;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
  cursor: var(--cursor-crosshair);
}

.supply-stack { position: relative; background: radial-gradient(circle at 75% 20%, rgba(0, 212, 255, 0.08), transparent 34vw), var(--void); }
.depth-layer {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 8vh 8vw;
}
.depth-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,15,0), rgba(8,8,15,.46) 78%, rgba(8,8,15,.9));
  pointer-events: none;
  z-index: -1;
}

.progress-rail {
  position: fixed;
  top: 0;
  right: 0;
  width: 12px;
  height: 100vh;
  z-index: 40;
  cursor: pointer;
}
.progress-rail::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(94, 94, 120, 0.42);
}
.progress-fill {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 0;
  background: var(--magenta);
  box-shadow: 0 0 18px rgba(255, 0, 200, 0.8), 0 0 42px rgba(255, 0, 200, 0.34);
}
.depth-readout {
  position: fixed;
  left: 8vw;
  bottom: 2.2vh;
  z-index: 42;
  font-family: "IBM Plex Mono", monospace;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0, 255, 159, .6);
  transition: opacity .4s ease, transform .4s ease;
}
.depth-readout.is-changing { opacity: 0; transform: translateY(8px); }

.map-field {
  position: absolute;
  inset: -8vh -8vw;
  width: 116vw;
  height: 116vh;
  z-index: -3;
  opacity: .78;
  filter: url(#rough);
}
.grid-line {
  fill: none;
  stroke: rgba(94, 94, 120, .15);
  stroke-width: 1;
}
.route {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 6 3;
  stroke-linecap: round;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 0 7px rgba(255,179,0,.18));
}
.route.amber { stroke: var(--amber); }
.route.dormant { stroke: var(--muted); opacity: .8; }
.depth-layer.is-active .route { animation: routeDraw 2.8s ease-in-out forwards; }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }

.node {
  fill: transparent;
  stroke: var(--green);
  stroke-width: 2;
  opacity: 0;
  transform-origin: center;
  filter: drop-shadow(0 0 12px rgba(0,255,159,.55));
}
.depth-layer.is-active .node { animation: nodeAppear .7s .65s cubic-bezier(.34,1.56,.64,1) forwards, nodePulse 3s 1.4s ease-in-out infinite; }
.depth-layer.is-active .node-late { animation-delay: 1.05s, 1.8s; }
.depth-layer.is-active .node-later { animation-delay: 1.45s, 2.2s; }
@keyframes nodeAppear { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes nodePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }

.bleed-type {
  position: absolute;
  top: -4vw;
  left: -3vw;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(8rem, 24vw, 28rem);
  line-height: .75;
  letter-spacing: -.07em;
  text-transform: uppercase;
  color: rgba(94, 94, 120, .11);
  z-index: -2;
  white-space: nowrap;
  pointer-events: none;
}

.layer-title {
  margin: 4vh 0 0;
  max-width: 9ch;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 30px rgba(0,255,159,.4), 0 0 80px rgba(0,255,159,.15);
  position: relative;
  z-index: 5;
}
.layer-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.depth-layer.is-active .layer-title span { opacity: 1; transform: translateY(0); }

.blob-wrap {
  position: absolute;
  width: min(48vw, 620px);
  min-width: 330px;
  aspect-ratio: 1.35;
  transform: scale(1.08);
  opacity: 0;
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease-out, filter .3s ease;
  z-index: 8;
}
.depth-layer.is-active .blob-wrap { transform: scale(1); opacity: 1; }
.depth-layer.is-past .blob-wrap { transform: scale(.92); opacity: .4; }
.blob-wrap:hover { transform: scale(1.06); filter: drop-shadow(0 0 24px rgba(0,255,159,.6)); }
.primary-blob { right: 8vw; top: 28vh; }
.right-blob { right: 5vw; top: 24vh; }
.left-low { left: 10vw; bottom: 9vh; }
.right-low { right: 9vw; bottom: 10vh; }
.compact { top: 34vh; }
.final-blob { right: 12vw; top: 31vh; }

.blob-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.blob-path {
  fill-opacity: .85;
  stroke-width: 1.5;
  backdrop-filter: blur(8px);
  filter: drop-shadow(0 0 12px rgba(0,255,159,.3));
  animation: cssBlob 13s ease-in-out infinite alternate;
}
.blob-wrap:hover .blob-path { filter: drop-shadow(0 0 24px rgba(0,255,159,.62)); }
@keyframes cssBlob {
  0%,100% { d: path("M300,62 C445,55 560,105 575,230 C590,355 475,420 345,430 C215,440 70,375 50,235 C30,95 155,70 300,62 Z"); }
  50% { d: path("M280,48 C420,20 590,132 560,270 C530,408 405,420 285,430 C165,440 45,315 68,190 C91,65 172,86 280,48 Z"); }
}
.blob-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(38ch, 72%);
  transform: translate(-50%, -48%);
}
.kicker, .annotation {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.8rem);
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 0 0 1rem;
}
.blob-copy p:not(.kicker) {
  margin: 0;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  color: var(--text);
}
.annotation {
  position: absolute;
  right: 16vw;
  top: 17vh;
  color: var(--white);
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  z-index: 9;
}
.annotation::after {
  content: "";
  display: block;
  width: 16vw;
  height: 1px;
  margin-top: .7rem;
  background: linear-gradient(90deg, var(--magenta), transparent);
  transform: rotate(-8deg);
}
.annotation-left { left: 8vw; right: auto; top: 21vh; color: var(--magenta); }
.final-note { right: 8vw; top: auto; bottom: 13vh; color: var(--green); font-family: "IBM Plex Mono", monospace; font-size: .75rem; }

.icon-sketch {
  position: absolute;
  width: clamp(90px, 11vw, 160px);
  z-index: 10;
  color: var(--amber);
  opacity: .88;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
}
.icon-sketch:hover { transform: scale(1.06) rotate(-3deg); filter: drop-shadow(0 0 18px rgba(255,179,0,.55)); }
.icon-sketch svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ship { right: 18vw; bottom: 12vh; }
.truck { left: 9vw; bottom: 15vh; color: var(--magenta); }
.box { right: 13vw; top: 18vh; }
.chain { left: 12vw; bottom: 18vh; color: var(--magenta); }

.layer-two .layer-title, .layer-four .layer-title, .layer-six .layer-title { margin-left: 2vw; }
.layer-three .layer-title { margin-left: 38vw; max-width: 8ch; }
.layer-five .layer-title { max-width: 10ch; }

@media (max-width: 760px) {
  .depth-layer { padding: 7vh 7vw 18vh; }
  .layer-title { font-size: clamp(3.7rem, 18vw, 7rem); }
  .blob-wrap { position: relative; width: 95%; min-width: 0; inset: auto; margin: 6vh 0 0 auto; }
  .blob-copy { width: 78%; }
  .annotation { position: relative; right: auto; top: auto; margin-top: 2rem; }
  .icon-sketch { display: none; }
  .layer-three .layer-title { margin-left: 0; }
  .bleed-type { font-size: 30vw; }
}