/*
  overview.css — the four schematic dots become attention nodes.

  At rest this has to look exactly like the decorative line that was
  always there: three dots in the rule colour and a fourth in gold with
  the site's existing pulse. Nothing announces that it is interactive.

  The dots are real <button>s positioned along an SVG rule rather than
  SVG <circle>s, for two reasons. They need to be keyboard focusable,
  and the original SVG carries preserveAspectRatio="none" — which
  stretches its circles into ellipses by however much the container is
  wider than 400 units. Growing an acknowledged node would have
  exaggerated that into visible eggs.
*/

.cds-gate{
  font-size:0.92rem;
  line-height:1.7;
  color:var(--ink-soft);
  margin:2.2em 0 -1.2em;
  max-width:70ch;
}
.cds-gate[hidden]{display:none;}
.cds-gate em{font-style:italic;}

.cds-rail-wrap{
  margin:2.4em 0;
  color:var(--line-strong);
}
.cds-rail{
  position:relative;
  height:32px;
}
.cds-rail-line{
  position:absolute;
  inset:0;
  width:100%;
  height:32px;
  display:block;
}
.cds-rail-line line{stroke:var(--line-strong);stroke-width:1;}

.cds-node{
  position:absolute;
  top:50%;
  width:26px;
  height:26px;
  transform:translate(-50%,-50%);
  padding:0;
  border:0;
  background:none;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
.cds-node:focus{outline:none;}
.cds-node:focus-visible::before{box-shadow:0 0 0 2px var(--line-strong);}

/* the visible dot */
.cds-node::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(7px + var(--hold, 0) * 7px);
  height:calc(7px + var(--hold, 0) * 7px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--line);
  transition:background 0.3s ease, box-shadow 0.3s ease;
}

/* the fourth dot keeps the gold pulse the page already had */
.cds-node.gold::before{background:var(--gold);}
.cds-node.gold{animation:cds-node-pulse 3.2s ease-in-out infinite;}
@keyframes cds-node-pulse{0%,100%{opacity:0.4;}50%{opacity:1;}}

/* ------------------------------------------------------------------
   HOLD FEEDBACK, SIZED FOR A FINGERTIP

   On a phone the finger covers the dot completely, so brightening the
   dot itself tells the operator nothing. The response has to happen
   OUTSIDE the contact patch: a halo reaching ~64px and eight sparks
   throwing outward, both growing with the hold. A fingertip is roughly
   20px across, so all of this stays visible around it.
   ------------------------------------------------------------------ */
.cds-halo,.cds-sparks{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  pointer-events:none;
}
.cds-halo{
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(69,211,232,0);
  transition:box-shadow 0.12s linear;
}
.cds-node.holding .cds-halo{
  box-shadow:
    0 0 calc(20px + var(--hold,0) * 46px) calc(5px + var(--hold,0) * 17px)
      rgba(69,211,232, calc(0.28 + var(--hold,0) * 0.5)),
    0 0 calc(7px + var(--hold,0) * 20px) calc(1px + var(--hold,0) * 6px)
      rgba(226,248,255, calc(var(--hold,0) * 0.55));
}
.cds-node.done .cds-halo{
  box-shadow:0 0 26px 8px rgba(70,224,166,0.35);
}
.cds-node.failed .cds-halo{
  box-shadow:0 0 22px 6px rgba(232,114,74,0.45);
}

.cds-sparks{opacity:0;transition:opacity 0.14s ease;}
.cds-node.holding .cds-sparks{opacity:1;animation:cds-spark-flicker 0.22s steps(2) infinite;}
.cds-sparks i{
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:calc(9px + var(--hold,0) * 20px);
  margin-left:-1px;
  border-radius:1px;
  transform-origin:50% 0;
  background:linear-gradient(to bottom, rgba(226,248,255,0.95), rgba(69,211,232,0));
}
.cds-sparks i:nth-child(1){transform:rotate(0deg)   translateY(calc(9px + var(--hold,0) * 15px));}
.cds-sparks i:nth-child(2){transform:rotate(45deg)  translateY(calc(9px + var(--hold,0) * 15px));}
.cds-sparks i:nth-child(3){transform:rotate(90deg)  translateY(calc(9px + var(--hold,0) * 15px));}
.cds-sparks i:nth-child(4){transform:rotate(135deg) translateY(calc(9px + var(--hold,0) * 15px));}
.cds-sparks i:nth-child(5){transform:rotate(180deg) translateY(calc(9px + var(--hold,0) * 15px));}
.cds-sparks i:nth-child(6){transform:rotate(225deg) translateY(calc(9px + var(--hold,0) * 15px));}
.cds-sparks i:nth-child(7){transform:rotate(270deg) translateY(calc(9px + var(--hold,0) * 15px));}
.cds-sparks i:nth-child(8){transform:rotate(315deg) translateY(calc(9px + var(--hold,0) * 15px));}
@keyframes cds-spark-flicker{0%{opacity:1;}100%{opacity:0.62;}}

/* attention being held */
.cds-node.holding::before{
  background:var(--cyan-glow);
  box-shadow:0 0 calc(4px + var(--hold, 0) * 16px) rgba(69,211,232,0.85);
}
.cds-node.holding{animation:none;opacity:1;}

/* released early — back to size, but orange */
.cds-node.failed::before{
  width:7px;
  height:7px;
  background:#E8724A;
  box-shadow:0 0 9px rgba(232,114,74,0.8);
}
.cds-node.failed{animation:none;opacity:1;}

/* acknowledged, and it stays that way */
.cds-node.done{animation:none;opacity:1;}
.cds-node.done::before{
  width:15px;
  height:15px;
  background:var(--teal);
  box-shadow:0 0 16px rgba(70,224,166,0.85);
}
.cds-node.done::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:15px;
  height:15px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(70,224,166,0.7);
  animation:cds-bloom 1.1s ease-out 1;
}
@keyframes cds-bloom{
  0%{opacity:0.9;width:15px;height:15px;}
  100%{opacity:0;width:46px;height:46px;}
}

/* ---------- the access box ---------- */

.cds-access{
  margin:-1.1em 0 2.4em;
  animation:cds-access-in 0.7s ease-out 1;
}
.cds-access[hidden]{display:none;}
@keyframes cds-access-in{from{opacity:0;transform:translateY(-6px);}}

.cds-access-link{
  display:block;
  border:1px solid var(--line-strong);
  background:rgba(70,224,166,0.05);
  padding:15px 18px;
  text-decoration:none;
  text-align:center;
  transition:background 0.25s ease, border-color 0.25s ease;
}
.cds-access-link:hover{
  background:rgba(70,224,166,0.11);
  border-color:var(--teal);
}
.cds-access-title{
  display:block;
  font-family:'Big Shoulders', sans-serif;
  font-weight:700;
  font-size:clamp(1rem,2.3vw,1.35rem);
  letter-spacing:0.05em;
  color:var(--teal);
  line-height:1.25;
}
.cds-access-sub{
  display:block;
  margin-top:5px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

@media (prefers-reduced-motion: reduce){
  .cds-node,.cds-node.gold{animation:none;opacity:0.85;}
  .cds-node.holding .cds-sparks{animation:none;}
  .cds-node.done::after{animation:none;display:none;}
  .cds-access{animation:none;}
  .cds-node::before{transition:none;}
}

@media (max-width:620px){
  /* 44px is the smallest comfortable touch target, and the halo/sparks
     above are what actually confirm contact once the finger lands. */
  .cds-node{width:44px;height:44px;}
  .cds-node::before{width:calc(9px + var(--hold, 0) * 8px);height:calc(9px + var(--hold, 0) * 8px);}
  .cds-node.done::before{width:17px;height:17px;}
  .cds-sparks i{height:calc(11px + var(--hold,0) * 24px);}
  .cds-gate{font-size:0.86rem;}
}