/* ==========================================================================
   THE LIBRARY MAP — the one section on the page that never moved.

   The idea the drawing already carried but never said: four questions and one
   library, with everything running through the middle. So a light now travels
   each route, out of one question, through the core, and on to the one
   opposite. That is the Animated Beam pattern the motion libraries use for
   connector diagrams, done here with a CSS motion path instead of a runtime:
   a circle riding offset-path along the same curve the route is drawn from,
   so the light cannot drift off the wire however the box is stretched.

   The core breathes underneath it, and the four questions arrive one after
   another when the section does, then lift under a finger or a cursor.

   Everything is gated. The beams only exist inside an @supports test, because
   without offset-path a circle with no cx/cy sits in the corner of the frame;
   the entrance only exists behind html.arrive-js, so a blocked script leaves
   the map whole; and all of it stops for anyone who has asked for less
   motion, which leaves exactly the drawing that was there before.
   ========================================================================== */

.thinking-beam { display: none; }

@supports (offset-path: path("M0 0 L1 1")) {
  @media (prefers-reduced-motion: no-preference) {
    .thinking-beam {
      display: block;
      fill: var(--record-amber, #f49f2e);
      stroke: none;
      offset-rotate: 0deg;
      opacity: 0;
    }
    /* the same two curves the routes are drawn from */
    .thinking-beam--a { offset-path: path("M18 22 C 28 42, 38 42, 50 60 S 72 76, 82 98"); }
    .thinking-beam--b { offset-path: path("M82 22 C 70 38, 62 43, 50 60 S 30 77, 18 98"); }

    .record-scene.in .thinking-beam {
      animation: thinking-run 5.2s cubic-bezier(.55, .1, .45, .9) infinite;
    }
    .record-scene.in .thinking-beam--b { animation-delay: 2.6s; }
  }
}
/* Fades in off the node, brightest crossing the core, gone by the far end, so
   the light reads as an answer arriving rather than a bead on a string. */
@keyframes thinking-run {
  0%   { offset-distance: 0%;   opacity: 0; }
  14%  { opacity: .9; }
  50%  { opacity: 1; }
  86%  { opacity: .9; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* The core, breathing. The ring is drawn on the link's own ::before so it
   needs no extra element, and it is behind the label. */
.thinking-map__core { position: relative; isolation: isolate; }
.thinking-map__core > span { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .thinking-map__core::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--record-amber, #f49f2e);
    opacity: 0;
  }
  .record-scene.in .thinking-map__core::before {
    animation: thinking-pulse 3.4s cubic-bezier(.25, .8, .25, 1) infinite;
  }
}
@keyframes thinking-pulse {
  0%   { transform: scale(.92); opacity: 0; }
  35%  { opacity: .55; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* The four questions arrive with the section, one after another, and answer
   a finger as well as a cursor. */
@media (prefers-reduced-motion: no-preference) {
  html.arrive-js .thinking-node { opacity: 0; translate: 0 14px; }
  html.arrive-js .record-scene.in .thinking-node {
    opacity: 1;
    translate: 0 0;
    transition: opacity .6s ease, translate .7s cubic-bezier(.25, .8, .25, 1);
  }
  html.arrive-js .record-scene.in .thinking-node--1 { transition-delay: .10s; }
  html.arrive-js .record-scene.in .thinking-node--2 { transition-delay: .22s; }
  html.arrive-js .record-scene.in .thinking-node--3 { transition-delay: .34s; }
  html.arrive-js .record-scene.in .thinking-node--4 { transition-delay: .46s; }
}
.thinking-node {
  touch-action: manipulation;
  transition: translate .3s cubic-bezier(.22, .9, .3, 1), border-color .3s ease;
}
@media (hover: hover) {
  .thinking-node:hover { translate: 0 -3px; border-block-start-color: var(--record-amber, #f49f2e); }
}
.thinking-node:active { translate: 0 -1px; }
.thinking-node:focus-visible,
.thinking-map__core:focus-visible { outline: 2px solid var(--record-amber, #f49f2e); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .thinking-node { transition: none; }
}