/* Earshot node, exploded view.
   Everything is scoped under .node-explode so it cannot touch the rest of the
   page. Site tokens are used where they exist, with fallbacks so the section
   still renders correctly if it is dropped somewhere else. */

.node-explode {
  --ne-bg: var(--bg, #0B0F17);
  --ne-ink: var(--ink, #EDF1F7);
  --ne-mute: var(--mute, #8B96AB);
  --ne-acc: var(--acc, #FF6B35);
  --ne-line: var(--line, #1C2536);
  --ne-stage-h: 100vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---------------------------------------------------------------- scroll rig */
.node-explode .ne-scroll {
  position: relative;
  height: 620vh;                 /* scroll distance that drives the sequence */
  margin-top: 28px;
}

.node-explode .ne-stage {
  position: sticky;
  top: 0;
  height: var(--ne-stage-h);
  overflow: hidden;
}

.node-explode .ne-canvas-wrap {
  position: absolute;
  inset: 8vh auto 8vh 50%;
  width: min(62vw, 820px);
  transform: translateX(-58%);
  display: grid;
  place-items: center;
}

.node-explode .ne-canvas { display: block; }

/* Sonar rings behind the assembled unit, held faint so copy always wins. */
.node-explode .ne-sonar {
  position: absolute;
  inset: 8vh auto 8vh 50%;
  width: min(62vw, 820px);
  transform: translateX(-58%);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.node-explode .ne-sonar.is-on { opacity: 0.15; }

.node-explode .ne-sonar span {
  position: absolute;
  width: 26vh;
  height: 26vh;
  border: 1px solid var(--ne-acc);
  border-radius: 50%;
  transform: scale(0.45);
  animation: ne-pulse 6s ease-out infinite;
}

.node-explode .ne-sonar span:nth-child(2) { animation-delay: 2s; }
.node-explode .ne-sonar span:nth-child(3) { animation-delay: 4s; }

@keyframes ne-pulse {
  0% { transform: scale(0.45); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ------------------------------------------------------------------ loading */
.node-explode .ne-loader {
  position: absolute;
  left: calc(50% - clamp(35px, 4vw, 65px));
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--ne-mute);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: opacity 0.5s ease;
}

.node-explode .ne-loader.is-done { opacity: 0; pointer-events: none; }

.node-explode .ne-rail-bar {
  margin: 12px auto 0;
  width: 168px;
  height: 2px;
  background: var(--ne-line);
  border-radius: 2px;
  overflow: hidden;
}

.node-explode .ne-rail-fill {
  height: 100%;
  width: 0;
  background: var(--ne-acc);
  transition: width 0.2s linear;
}

/* ----------------------------------------------------------------- captions */
.node-explode .ne-captions {
  position: absolute;
  right: auto;
  left: calc(50% + clamp(130px, 13vw, 190px));
  top: 50%;
  transform: translateY(-50%);
  width: min(35ch, calc(50% - clamp(130px, 13vw, 190px) - 4vw));
}

.node-explode .ne-caption {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.node-explode .ne-caption.is-on { opacity: 1; transform: translateY(0); }

.node-explode .ne-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.node-explode .ne-rule {
  height: 1px;
  width: 46px;
  background: var(--ne-acc);
  opacity: 0.85;
}

.node-explode .ne-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ne-acc);
}

.node-explode .ne-caption h3 {
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.2;
  margin: 0 0 10px;
}

.node-explode .ne-caption p {
  margin: 0;
  color: var(--ne-mute);
  font-size: 16px;
}

/* --------------------------------------------------------------- step rail */
.node-explode .ne-steps {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.node-explode .ne-steps.is-on { opacity: 1; }

.node-explode .ne-steps i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ne-line);
  transition: background 0.3s ease, transform 0.3s ease;
}

.node-explode .ne-steps i.is-at {
  background: var(--ne-acc);
  transform: scale(1.5);
}

/* ------------------------------------------------------------------ closing */
.node-explode .ne-closing {
  position: absolute;
  right: auto;
  left: calc(50% + clamp(130px, 13vw, 190px));
  bottom: 16%;
  width: min(35ch, calc(50% - clamp(130px, 13vw, 190px) - 4vw));
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.node-explode .ne-closing.is-on { opacity: 1; pointer-events: auto; }

.node-explode .ne-closing p {
  margin: 0 0 18px;
  color: var(--ne-ink);
  font-size: 17px;
}

.node-explode .ne-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ne-acc);
  color: #180A03;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

/* ------------------------------------------------------------------- static */
/* Shown when motion is reduced, or if the sequence cannot run. */
.node-explode .ne-static { display: none; }
.node-explode .ne-static img { display: block; width: min(460px, 100%); margin: 0 auto 40px; }
.node-explode .ne-static ol { max-width: 720px; margin: 0 auto; padding-left: 22px; }
.node-explode .ne-static li { margin-bottom: 22px; color: var(--ne-mute); }
.node-explode .ne-static li h3 { color: var(--ne-ink); font-size: 19px; margin: 0 0 6px; }
.node-explode .ne-static li p { margin: 0; font-size: 16px; }

.node-explode.is-static .ne-scroll { display: none; }
.node-explode.is-static .ne-static { display: block; }

/* ------------------------------------------------------------------- mobile */
@media (max-width: 820px) {
  .node-explode .ne-scroll { height: 560vh; }

  .node-explode .ne-canvas-wrap,
  .node-explode .ne-sonar {
    inset: auto 0 auto 0;
    top: 6vh;
    width: auto;
    height: 50vh;
    transform: none;
  }

  /* Captions sit below the render, never over it. */
  .node-explode .ne-captions {
    right: auto;
    left: 0;
    top: auto;
    bottom: 4vh;
    transform: none;
    width: 100%;
    padding: 0 20px;
    height: 28vh;
  }

  .node-explode .ne-caption {
    right: auto;
    left: 0;
    width: 100%;
    padding: 0 20px;
  }

  .node-explode .ne-caption h3 { font-size: 18px; }
  .node-explode .ne-caption p { font-size: 15px; }

  .node-explode .ne-closing {
    right: auto;
    left: 0;
    bottom: 5vh;
    width: 100%;
    padding: 0 20px;
  }

  .node-explode .ne-steps { display: none; }
  .node-explode .ne-loader { left: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .node-explode .ne-sonar span { animation: none; }
  .node-explode .ne-caption,
  .node-explode .ne-closing { transition: none; }
}