/* The brain hero (src/brain.js). Two layouts, chosen by the width of the component itself:
   wide (sources left, plate centre, outputs right) from 460px up, tall (two columns of sources,
   the plate across, two columns of outputs) below it. Every box is placed by the same numbers
   that draw the SVG paths, carried as custom properties on the element, so the HTML cards and
   the lines agree at any width. One unit is about one pixel where each layout is mostly shown
   (wide: a 560-unit drawing in a 460 to 560 px column; tall: 350 units on a 320 to 459 px phone),
   so the type, which never drops under 11px, always fits its box.

   Resting state is the final state. With motion allowed, the lines draw in from the first paint,
   in CSS, waiting on nothing; the packets travel, and each card lights as its packet leaves or
   lands, once the script has armed the hero (.brain-js on <html>, .is-in on the hero) and only
   while it is on screen (.is-off pauses it). With no script the lines are drawn and the packets
   are hidden; with motion reduced the packets rest on the lines and nothing moves. The packets
   ride CSS offset-path; where that is unsupported a marching dash stands in. Only
   offset-distance, transform, opacity and stroke-dashoffset ever animate. */

.brain-hero{container:brain / inline-size;width:100%;max-width:560px;margin-inline:auto;font-family:var(--font-text);color:var(--navy);line-height:1.2}
@media (max-width:900px){.brain-hero{max-width:480px}}

.brain-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- the mode: wide by default, tall when the component is narrow ---------- */

.brain-stage{
  --W:560;--H:400;--k:0;
  --u:calc(100cqi / 560);
  --show-wide:block;--show-tall:none;
  --core-dir:column;--core-align:stretch;--lobe-dir:column;--lobe-justify:center;--lobe-align:flex-start;
  --word-show:block;--lobes-grow:0;
  --fs-name:clamp(11px,2.25cqi,12.5px);
  --fs-title:clamp(11.5px,2.3cqi,12.5px);
  --fs-sub:11px;
  --fs-lobe:clamp(12px,2.35cqi,13px);
  --fs-role:11px;
  --fs-word:clamp(11px,2.1cqi,12px);
  --mark-w:calc(40 * var(--u));
  --card-pad:calc(9 * var(--u));
  --core-pad:calc(12 * var(--u));
  --lobe-pad:calc(5 * var(--u)) calc(8 * var(--u));
  --lobe-gap:calc(6 * var(--u));
  --line-w:1.6;
  position:relative;width:100%;aspect-ratio:var(--W) / var(--H);
}
@container brain (max-width:459px){
  .brain-stage{
    --W:350;--H:452;--k:1;
    --u:calc(100cqi / 350);
    --show-wide:none;--show-tall:block;
    --core-dir:row;--core-align:center;--lobe-dir:row;--lobe-justify:space-between;--lobe-align:baseline;
    --word-show:none;--lobes-grow:1;
    --fs-name:12px;
    --fs-title:12px;
    --fs-lobe:13px;
    --mark-w:calc(38 * var(--u));
    --card-pad:calc(9 * var(--u));
    --core-pad:calc(9 * var(--u)) calc(12 * var(--u));
    --lobe-pad:calc(5 * var(--u)) calc(9 * var(--u));
    --lobe-gap:calc(5 * var(--u));
    --line-w:1.4;
  }
}

/* every placed box: the wide numbers, or the tall numbers when --k is 1 */
.brain-abs{
  position:absolute;box-sizing:border-box;
  left:calc((var(--dx) + (var(--mx) - var(--dx)) * var(--k)) / var(--W) * 100%);
  top:calc((var(--dy) + (var(--my) - var(--dy)) * var(--k)) / var(--H) * 100%);
  width:calc((var(--dw) + (var(--mw) - var(--dw)) * var(--k)) / var(--W) * 100%);
  height:calc((var(--dh) + (var(--mh) - var(--dh)) * var(--k)) / var(--H) * 100%);
}

/* ---------- the SVG: glow, lines, plate, lanes ---------- */

.brain-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:var(--show-wide)}
.brain-svg-tall{display:var(--show-tall)}
.brain-glow{opacity:.6}
.brain-plate{fill:var(--navy)}
.brain-line{fill:none;stroke:var(--rule);stroke-width:var(--line-w);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.brain-packet{offset-path:var(--path);offset-distance:0%;opacity:0;fill:var(--emerald)}
.brain-dot{stroke:rgba(23,185,120,.28);stroke-width:2.5}
.brain-dash{stroke:rgba(23,185,120,.22);stroke-width:2}
.brain-ping{fill:none;stroke:var(--emerald-bright);stroke-width:1.5;opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center}
.brain-bloom{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:center}
.brain-march{display:none;fill:none;stroke:var(--emerald);stroke-width:2;stroke-linecap:round;stroke-dasharray:.03 .095;stroke-dashoffset:0}

/* ---------- the cards ---------- */

.brain-card{background:var(--white);border:1px solid var(--navy);border-radius:calc(7 * var(--u));overflow:hidden;display:flex;box-shadow:0 1px 2px rgba(27,42,65,.06)}
/* the light a card shows as its packet leaves or lands: an emerald ring inside the border */
.brain-card::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--emerald),inset 0 0 14px rgba(23,185,120,.16);opacity:0;pointer-events:none}
.brain-source{flex-direction:row;align-items:center;gap:calc(7 * var(--u));padding:0 var(--card-pad)}
.brain-ico{flex:0 0 auto;width:calc(20 * var(--u));height:calc(20 * var(--u));min-width:16px;min-height:16px;color:var(--emerald-ink);display:flex}
.brain-ico svg{width:100%;height:100%;display:block}
.brain-name{font-weight:600;font-size:var(--fs-name);line-height:1.15;color:var(--navy);min-width:0;text-wrap:balance}
.brain-output{flex-direction:column;justify-content:center;gap:calc(2 * var(--u));padding:0 calc(10 * var(--u))}
.brain-title{font-weight:600;font-size:var(--fs-title);line-height:1.2;color:var(--navy);text-wrap:balance}
.brain-sub{font-size:var(--fs-sub);line-height:1.25;color:var(--slate);text-wrap:balance}

/* ---------- the plate's content: the mark and the three lobes ----------
   The lobes take the height their words need and sit as one group in the middle of the plate;
   the plate is drawn tall enough for the longest of them at the narrowest width of each layout. */

.brain-core{display:flex;flex-direction:var(--core-dir);align-items:var(--core-align);justify-content:center;gap:calc(9 * var(--u)) calc(12 * var(--u));padding:var(--core-pad);color:var(--white)}
.brain-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5 * var(--u));flex:0 0 auto;color:var(--emerald)}
.brain-mark .mark-svg{display:block;width:var(--mark-w);height:auto;overflow:visible}
.brain-word{display:var(--word-show);font-family:'Lexend',var(--font-display);font-weight:600;font-size:var(--fs-word);letter-spacing:-.02em;line-height:1;color:var(--white)}
.brain-word b{font-weight:600;color:var(--emerald-bright)}
.brain-lobes{display:flex;flex-direction:column;justify-content:center;flex:var(--lobes-grow) 1 auto;min-width:0;gap:var(--lobe-gap)}
.brain-lobe{flex:0 0 auto;display:flex;flex-direction:var(--lobe-dir);justify-content:var(--lobe-justify);align-items:var(--lobe-align);gap:calc(2 * var(--u)) calc(8 * var(--u));padding:var(--lobe-pad);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:calc(8 * var(--u))}
.brain-lobe-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lobe);line-height:1.15;letter-spacing:-.01em;color:var(--white);text-wrap:balance}
.brain-lobe-role{font-family:var(--font-mono);font-size:var(--fs-role);letter-spacing:.02em;line-height:1.3;color:var(--emerald-bright);text-wrap:balance}

/* ---------- motion ---------- */

@media (prefers-reduced-motion:no-preference){
  /* the lines draw from the first paint, the sources first, a beat apart, then the outputs */
  .brain-line{animation:brain-draw .5s var(--ease-out) both;animation-delay:calc(var(--i) * 40ms)}
  .brain-line-out{animation-duration:.45s;animation-delay:calc(.3s + var(--i) * 60ms)}
  /* once armed: the packets travel, each source lights as its packet leaves and each output as
     its packet lands, and the plate breathes; all of it pauses while the hero is off screen */
  .brain-js .brain-hero.is-in .brain-packet{animation:brain-travel var(--dur) cubic-bezier(.42,.05,.58,.95) var(--delay) infinite}
  .brain-js .brain-hero.is-in .brain-ping{animation:brain-ping var(--dur) ease-out calc(var(--delay) + var(--dur) - .08s) infinite}
  .brain-js .brain-hero.is-in .brain-bloom{animation:brain-bloom var(--dur) ease-out calc(var(--delay) + var(--dur) - .1s) infinite}
  .brain-js .brain-hero.is-in .brain-source::after{animation:brain-light var(--dur) linear var(--delay) infinite}
  .brain-js .brain-hero.is-in .brain-output::after{animation:brain-light var(--dur) linear calc(var(--delay) + var(--dur) * .94) infinite}
  .brain-js .brain-hero.is-in .brain-glow{animation:brain-breathe 4.2s ease-in-out infinite}
  .brain-hero.is-off .brain-svg *,.brain-hero.is-off .brain-card::after{animation-play-state:paused}
}

/* motion reduced: everything drawn, nothing moving; the packets rest on the lines */
@media (prefers-reduced-motion:reduce){
  .brain-packet{opacity:1;offset-distance:calc(26% + var(--n) * 7%)}
}

/* no offset-path: the packets give way to a dash that marches along each line */
@supports not (offset-path:path("M0 0 L1 1")){
  .brain-packet{display:none}
  .brain-march{display:block}
  @media (prefers-reduced-motion:no-preference){
    .brain-js .brain-hero.is-in .brain-march{animation:brain-march var(--dur) linear var(--delay) infinite}
  }
}

@keyframes brain-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes brain-travel{0%{offset-distance:0%;opacity:0}7%{opacity:1}93%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes brain-ping{0%{opacity:.9;transform:scale(.5)}16%{opacity:0;transform:scale(2.8)}100%{opacity:0;transform:scale(2.8)}}
@keyframes brain-bloom{0%{opacity:0;transform:scale(.7)}10%{opacity:.75;transform:scale(1)}42%{opacity:0;transform:scale(1.3)}100%{opacity:0;transform:scale(1.3)}}
@keyframes brain-light{0%{opacity:0}3%{opacity:1}16%{opacity:0}100%{opacity:0}}
@keyframes brain-breathe{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes brain-march{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}