/* ==========================================================================
   test.html — animated walk-through of the flow chart
   --------------------------------------------------------------------------
   Loaded after styles.css, so it inherits every colour and type token.
   The hand-drawn wobble is an SVG turbulence filter applied only to the
   shape layer of each node, never to the text sitting on top of it.
   ========================================================================== */

:root {
  --node-fill:  #d9d9d9;
  --node-line:  #000;
  --step-gap:   0.55rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --node-fill: #d9d9d9;   /* the chart's own palette assumes dark on light */
    --node-line: #000;
  }
}

.walk {
  max-width: 44rem;
  margin: 0 auto var(--space-block);
}

.walk__steps {
  position: relative;   /* the frame that leaving steps are pinned against */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--step-gap);
}

/* ---- a node ------------------------------------------------------------- */

.node {
  position: relative;
  width: min(100%, 30rem);
  padding: 1.15rem 1.3rem;
  text-align: center;
}

/* The shape layer. Filtered, so its edges wobble like the drawn chart. */
.node__edge {
  position: absolute;
  inset: 0;
  background: var(--node-fill);
  border: 3px solid var(--node-line);
  filter: url(#roughen);
}

.node__text {
  position: relative;   /* above the filtered layer */
  margin: 0;
  color: #111;          /* always on the light node fill */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.4;
}

.node__text em { font-style: italic; text-transform: uppercase; }

/* ---- yes / no ----------------------------------------------------------- */

.choices {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: var(--step-gap);
}

.choice {
  position: relative;
  padding: 0.45em 1.5em;
  background: none;
  border: 0;
  color: #111;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.choice__edge {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 3px solid var(--node-line);
  border-radius: 999px;
  filter: url(#roughen);
  z-index: -1;
  /* The shadow rides on the shape layer, so the turbulence filter roughens it
     too and it reads as drawn rather than as a CSS effect. */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 150ms ease;
}

.choice:hover .choice__edge,
.choice:focus-visible .choice__edge { box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3); }

/* Before an answer, both choices are equally live. Only once one is taken does
   the other recede - still visible, so changing your mind is obviously
   available rather than hidden behind a reset. */
.choices--answered .choice[aria-pressed="false"] { opacity: 0.38; }
.choice[aria-pressed="true"] .choice__edge { background: #ffe9a8; }

/* ---- connector ---------------------------------------------------------- */

.connector {
  display: block;
  width: 38px;
  height: 46px;
  filter: url(#roughen);
}

.connector path {
  fill: var(--node-fill);
  stroke: var(--node-line);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* ---- outcomes ----------------------------------------------------------- */

.outcome { width: min(100%, 30rem); text-align: center; }

/* One height for all three, so the circle, the shield and the much wider
   ribbon sit on the same baseline. */
.outcome__badge {
  display: block;
  height: 88px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 0.9rem;
}

.outcome__title {
  margin: 0 0 0.3em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.65rem;
}

.outcome__body {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
}

.outcome--stop .outcome__title { color: var(--level-stop); }
.outcome--1 .outcome__title    { color: var(--level-1); }
.outcome--2 .outcome__title    { color: var(--level-2); }
.outcome--3 .outcome__title    { color: var(--level-3); }

/* ---- coming and going --------------------------------------------------- */

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--step-gap);
}

/* Questions just fade. They arrive constantly, so anything more is noise. */
@keyframes step-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.step--enter {
  animation: step-fade 500ms ease-out both;
}

/* Outcomes land. The overshoot past 1 is the pop, and it is kept for the
   moments that are actually an arrival: a disqualification or a badge. */
@keyframes step-pop {
  0%   { opacity: 0; transform: scale(0.86); }
  45%  { opacity: 1; transform: scale(1.07); }
  72%  {             transform: scale(0.975); }
  88%  {             transform: scale(1.008); }
  100% { opacity: 1; transform: none; }
}

.step--pop {
  animation: step-pop 500ms cubic-bezier(0.18, 0.9, 0.25, 1) both;
}

@keyframes step-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px) scale(0.94); }
}

/* Pinned out of the flex flow the moment it starts leaving, so the layout
   below closes up at once instead of waiting for the fade. */
.step--leave {
  position: absolute;
  pointer-events: none;
  animation: step-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes connector-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.connector-wrap {
  animation: connector-in 160ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .step--enter,
  .step--pop,
  .step--leave,
  .connector-wrap { animation: none; }
  .choice,
  .choice__edge { transition: none; }
}

/* ---- controls ----------------------------------------------------------- */

.walk__controls {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.walk__note {
  max-width: var(--measure);
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--size-note);
}

@media (max-width: 40rem) {
  .node__text { font-size: 1.1rem; }
  .choices { gap: 1rem; }
}