/* ════════════════════════════════════════════════════════════════
   PROTOTYPE B · Signal Through Architecture  (v3 — wow tuning)
   Comet Innovations.

   v3 changes vs v2 — landing the wow moment:
     · Multiple bright dashes per path (was: one tiny dash per path).
       The stroke-dasharray repeats — `60 240` produces visible pulses
       at every 300px along the path. As --flow updates with scroll,
       ALL of them slide in unison: many visible pulses, not one tiny one.
     · Top trunk gets a HUGE traveling streak (`200 1500`) — feels like
       a data packet flying across the network when you scroll.
     · Pulses are thicker (stroke-width 2.4) and brighter (warm gold,
       not the dim warm) with stronger drop-shadow halos.
     · Hub glow scales much bigger with scroll.
     · Hub node pulses a wider amplitude.
     · Added a "scene wash" element behind everything that brightens
       with scroll for an atmospheric backdrop.

   PHILOSOPHY (unchanged): every visible motion is scroll-driven. No
   CSS @keyframes loops on scene elements. Stop scrolling → motion stops.
   ════════════════════════════════════════════════════════════════ */

/* ── CSS variables live on :root so JS setProperty on
      document.documentElement actually takes effect. If these are
      declared on .proto--signal (the body), they would shadow
      the JS-updated values for every descendant — the scene would
      stay frozen at the initial values forever. */
:root {
  /* ── Per-section progress (0..1), updated by JS each scroll ── */
  --p-hero:      1;
  --p-approach:  0;
  --p-services:  0;
  --p-process:   0;
  --p-projects:  0;
  --p-family:    0;
  --p-cta:       0;

  /* ── Master "flow" — scrollY scaled into a value used to slide
        stroke-dashoffsets along signal paths.                    ── */
  --flow: 0;

  /* ── Pipeline progress (0..1), drives the 4 process stages.   ── */
  --pipeline:    0;

  /* ── Hub pulse: scroll-driven scale on the central node.      ── */
  --hub-pulse:   1;

  /* ── Atmosphere intensity (scene-wide warm wash).             ── */
  --atmosphere: 0;

  /* ── Camera (subtle pan/zoom).                                ── */
  --cam-scale:   1;
  --cam-y:       0px;
}

.proto--signal {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(53, 32, 85, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 80%, rgba(201, 169, 110, 0.04) 0%, transparent 55%),
    /* Base tone matches the interior pages' .bg-atmosphere exactly so
       the home→interior transition reads as one continuous site. The
       two radial overlays above are the home page's extra atmospheric
       depth — intentionally richer than the calm interior pages. */
    linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-deep) 50%, #0f0822 100%);
  background-attachment: fixed;
  scroll-behavior: smooth;
}

/* ── Scene wrapper ─────────────────────────────────────────────── */
.net-scene-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.net-scene {
  width: min(100vw, 1500px);
  height: auto;
  max-height: 100vh;
  transform: translateY(var(--cam-y)) scale(var(--cam-scale));
  /* Very short transition: just enough to smooth the per-frame
     camera updates, short enough that the "stick to CTA" tracking
     stays locked to the content instead of rubber-banding behind it. */
  transition: transform 0.05s linear;
  will-change: transform;
}

/* Page chrome above scene. */
.site-header,
main#main,
.site-footer { position: relative; z-index: 2; }
.site-header { z-index: 5; }

/* ══════════════════════════════════════════════════════════════
   QUADRANT TINTS (visible during family phase)
   ══════════════════════════════════════════════════════════════ */
.quadrant {
  fill: rgba(201, 169, 110, 0.05);
  stroke: rgba(201, 169, 110, 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.proto--signal .quadrant { opacity: calc(var(--p-family) * 0.9); }

/* ══════════════════════════════════════════════════════════════
   APPROACH ZONES (3 columns lit one-by-one with scroll)
   ══════════════════════════════════════════════════════════════ */
.zone {
  fill: rgba(201, 169, 110, 0.04);
  stroke: rgba(201, 169, 110, 0);
  opacity: 0;
}
.proto--signal .zone--1 { opacity: calc(var(--p-approach) * 1); }
.proto--signal .zone--2 { opacity: calc(max(0, var(--p-approach) - 0.33) * 1.5); }
.proto--signal .zone--3 { opacity: calc(max(0, var(--p-approach) - 0.66) * 3); }

/* ══════════════════════════════════════════════════════════════
   GHOST NETWORK — dim baseline always present, brightens slightly
   with overall scroll progress.
   ══════════════════════════════════════════════════════════════ */
.ghost {
  stroke: rgba(204, 194, 224, calc(0.10 + var(--atmosphere) * 0.15));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: calc(0.55 + var(--p-services) * 0.20 + var(--p-process) * 0.15 + var(--p-cta) * 0.20);
}

/* ══════════════════════════════════════════════════════════════
   ACTIVE SIGNAL PATHS — bright pulses driven by scroll-flow.
   The dasharray is a SHORT repeating pattern so multiple visible
   pulses appear along each path. As --flow updates, they all slide
   together (in either direction depending on per-path factor).
   ══════════════════════════════════════════════════════════════ */
.signal {
  fill: none;
  /* Toned down: dimmer warm gold, thinner stroke, soft halo so the
     motion is felt but never competes with text legibility. */
  stroke: rgba(232, 200, 140, 0.55);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  /* Repeating short dash + gap → multiple visible pulses per path. */
  stroke-dasharray: 60 240;
  filter: drop-shadow(0 0 3px rgba(201, 169, 110, 0.30));
  opacity: 0.15;
}

/* Per-path opacity + offset. Each path uses a different per-path
   factor so the pulses don't all move in lockstep — gives the network
   organic, layered flow. The factor is multiplied by --flow (a unitless
   number), then "px" is added in calc to make it a valid length.
   Peak opacities are capped lower now so the pulses stay subtle. */
.signal--trunk-mid {
  opacity: calc(0.30 + var(--p-services) * 0.22 + var(--p-cta) * 0.16);
  stroke-dashoffset: calc(var(--flow) * -1px);
}

.signal--hub {
  opacity: calc(var(--p-hero) * 0.45 + var(--p-cta) * 0.5);
}
.signal.hub--tl { stroke-dashoffset: calc(var(--flow) *  1.1px); }
.signal.hub--tr { stroke-dashoffset: calc(var(--flow) *  1.0px); }
.signal.hub--bl { stroke-dashoffset: calc(var(--flow) *  0.9px); }
.signal.hub--br { stroke-dashoffset: calc(var(--flow) *  1.2px); }

/* Top trunk: a single longer streak that travels as you scroll.
   Kept distinct from the rest but no longer a glaring bright bar —
   thinner, softer halo, lower peak opacity. */
.signal--trunk-top {
  opacity: calc(var(--p-process) * 0.55 + var(--p-services) * 0.22 + var(--p-cta) * 0.32);
  stroke: rgba(240, 214, 160, 0.7);
  stroke-width: 1.8;
  stroke-dasharray: 200 1500;
  filter: drop-shadow(0 0 4px rgba(201, 169, 110, 0.40));
  stroke-dashoffset: calc(var(--flow) * -2.2px);
}

.signal--trunk-bot {
  opacity: calc(var(--p-services) * 0.50 + var(--p-cta) * 0.38);
  stroke-dashoffset: calc(var(--flow) *  1.3px);
}

.signal--riser-2 {
  opacity: calc(var(--p-services) * 0.48 + var(--p-family) * 0.35 + var(--p-cta) * 0.28);
  stroke-dashoffset: calc(var(--flow) * -0.8px);
}
.signal--riser-3 {
  opacity: calc(var(--p-services) * 0.48 + var(--p-family) * 0.35 + var(--p-cta) * 0.38);
  stroke-dashoffset: calc(var(--flow) * -1.0px);
}
.signal--riser-4 {
  opacity: calc(var(--p-services) * 0.48 + var(--p-family) * 0.35 + var(--p-cta) * 0.28);
  stroke-dashoffset: calc(var(--flow) * -0.7px);
}

/* ══════════════════════════════════════════════════════════════
   NETWORK NODES — brighter, with bigger hub
   ══════════════════════════════════════════════════════════════ */
.node {
  fill: rgba(201, 169, 110, 0.40);
  stroke: rgba(232, 200, 140, 0.30);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: calc(0.45 + var(--p-services) * 0.15 + var(--p-cta) * 0.08);
}
.node--hub {
  fill: rgba(240, 214, 160, 0.62);
  filter: drop-shadow(0 0 6px rgba(201, 169, 110, 0.40));
  opacity: calc(0.55 + var(--p-hero) * 0.12 + var(--p-cta) * 0.10);
  /* Scroll-driven pulse — still breathes, just calmer. */
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--hub-pulse));
}

/* ══════════════════════════════════════════════════════════════
   HUB GLOW — central convergence; grows much bigger with scroll
   ══════════════════════════════════════════════════════════════ */
.hub-glow {
  /* Softer — a gentle ambient bloom rather than a bright lamp behind
     the copy. Still grows with scroll, just at much lower intensity. */
  opacity: calc(0.18 + var(--p-hero) * 0.18 + var(--p-cta) * 0.25 + var(--atmosphere) * 0.12);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(0.7 + var(--p-hero) * 0.25 + var(--p-cta) * 0.55 + var(--atmosphere) * 0.25));
}

/* ══════════════════════════════════════════════════════════════
   PHONE HALO (BowlersDash moment)
   ══════════════════════════════════════════════════════════════ */
.phone-halo {
  opacity: var(--p-projects);
  transform-box: fill-box;
  transform-origin: 1220px 570px;
  transform: translateY(calc((1 - var(--p-projects)) * 40px));
}
.phone-shape {
  fill: rgba(13, 6, 24, 0.7);
  stroke: rgba(201, 169, 110, 0.8);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.phone-screen { fill: rgba(255, 224, 160, 0.45); }
.phone-glow {
  opacity: calc(var(--p-projects) * 1.4);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(0.7 + var(--p-projects) * 0.6));
}

/* ══════════════════════════════════════════════════════════════
   PIPELINE STAGE MARKERS (highlight 4 stages during process)
   Each stage scales+brightens as --pipeline crosses its threshold.
   Bigger, brighter now so they punch as the streak passes through.
   ══════════════════════════════════════════════════════════════ */
.pipe-stage {
  fill: rgba(240, 214, 160, 0.7);
  filter: drop-shadow(0 0 5px rgba(201, 169, 110, 0.45));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.7);
}
.proto--signal .pipe-stage--1 {
  opacity: calc(min(1, var(--pipeline) * 4));
  transform: scale(calc(0.7 + min(1, var(--pipeline) * 4) * 0.8));
}
.proto--signal .pipe-stage--2 {
  opacity: calc(min(1, max(0, var(--pipeline) - 0.25) * 4));
  transform: scale(calc(0.7 + min(1, max(0, var(--pipeline) - 0.25) * 4) * 0.8));
}
.proto--signal .pipe-stage--3 {
  opacity: calc(min(1, max(0, var(--pipeline) - 0.50) * 4));
  transform: scale(calc(0.7 + min(1, max(0, var(--pipeline) - 0.50) * 4) * 0.8));
}
.proto--signal .pipe-stage--4 {
  opacity: calc(min(1, max(0, var(--pipeline) - 0.75) * 4));
  transform: scale(calc(0.7 + min(1, max(0, var(--pipeline) - 0.75) * 4) * 0.8));
}

/* ══════════════════════════════════════════════════════════════
   PAGE COMPOSITION
   ══════════════════════════════════════════════════════════════ */

.hero--proto {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: var(--space-xl);
}
.scroll-cue {
  margin-top: var(--space-xl);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-gold);
  opacity: 0.7;
  font-family: var(--font-heading);
  font-size: var(--text-tiny);
  letter-spacing: 3px;
  text-transform: uppercase;
  /* The only @keyframes in the file — UI affordance, not scene. */
  animation: scrollNudge 2.2s ease-in-out infinite;
}
.scroll-cue i { font-size: 0.9rem; opacity: 0.8; }
@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 0.95; }
}

.proto-section { padding: clamp(7rem, 14vw, 11rem) 0; }
.proto--signal .section--alt {
  background: rgba(13, 6, 24, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.glass-card {
  background: linear-gradient(
    135deg,
    rgba(24, 13, 46, 0.74) 0%,
    rgba(13, 6, 24, 0.80) 100%
  );
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(201, 169, 110, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 20px 50px -20px rgba(0, 0, 0, 0.55);
}
.proto--signal .featured-project {
  background: linear-gradient(
    135deg,
    rgba(24, 13, 46, 0.74) 0%,
    rgba(13, 6, 24, 0.80) 100%
  );
  border-color: rgba(201, 169, 110, 0.20);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.proto--signal .step {
  background: linear-gradient(
    135deg,
    rgba(24, 13, 46, 0.65) 0%,
    rgba(13, 6, 24, 0.74) 100%
  );
  border: 1px solid rgba(201, 169, 110, 0.14);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

.proto-reveal,
.proto-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.proto-reveal.is-in,
.proto-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.proto-stagger.is-in > *:nth-child(1) { transition-delay: 0s; }
.proto-stagger.is-in > *:nth-child(2) { transition-delay: 0.12s; }
.proto-stagger.is-in > *:nth-child(3) { transition-delay: 0.24s; }
.proto-stagger.is-in > *:nth-child(4) { transition-delay: 0.36s; }

@media (max-width: 720px) {
  .net-scene { width: 130vw; }
  .proto-section { padding: clamp(5rem, 12vw, 8rem) 0; }
  .hero--proto { min-height: 86vh; }
}