/* bymayao /neuro: the scans, the map of the mouse brain in the corner, the line between them,
   and the whole brain. Loads after bymayao.css (its paper, ink, soft gray and breath curve). */

:root{
  --vis:#cfe6e2;                                  /* the visual cortex, softly */
  --r:clamp(9rem, min(54vw, 40vh), 22rem);        /* the corner's radius: never steps down as the window widens */
  --floor:160px;                                  /* the paper under Safari's see-through bar, below the screen's edge */
  --foot:clamp(10px, 2.2vh, 28px);                /* the page's name stands this far above the screen's foot, as /writing's does */
}
html{ scrollbar-gutter:stable; }                  /* opening the whole brain doesn't shift the page */
html.atlas-open{ overflow:hidden; }

/* ---------- the words ---------- */
.neuro .lede{ margin:0; max-width:41rem; text-wrap:pretty; font-size:clamp(1.05rem, 2.7vw, 1.2rem); line-height:1.55; color:var(--soft); }
.notes{ margin:.9rem 0 0; max-width:36rem; font-size:.92rem; line-height:1.5; color:var(--soft); }
.notes p{ margin:0; }
.notes ul{ margin:.25rem 0 0; padding-left:1.1em; }
.notes li{ margin:.1rem 0; }

/* ---------- the scans: the bulk of the page ---------- */
/* the first screen, as /writing's and her museum's are (Sha, Oct 12): her words at the top and the page's name
   large at its foot, on the left beside the corner, sized so it never reaches the corner; the scans begin just
   below the screen. On a phone that means below Safari's bar too (--screen, the whole screen's height, set in
   neuro.js), so what lies under the bar when the page opens is the page's own white. */
.neuro .intro{ display:flex; flex-direction:column; min-height:calc(100svh - var(--top) - 3rem - var(--foot)); }
/* her first scan opens the page, her words under it, the rest of the scans below the first screen (Sha, Oct 12);
   on a computer it stands no taller than half
   the window, so the words and the name still meet the eye */
.neuro .scan.first{ margin:0 0 1.6rem; }
@media (min-width:46rem){ .neuro .scan.first img{ width:min(100%, 50vh); height:auto; aspect-ratio:1258 / 1259; } }   /* its size known before it loads */
/* her words fold to what fits on the first screen, so the name stays in view when the page opens (Sha, Oct 12);
   "more" opens them, "less" folds them again, easing on the breath curve; a soft fade marks the fold. Without the
   script, or when they fit, they are simply all there. */
.neuro .words{ position:relative; overflow:hidden; overflow:clip; transition:height .55s var(--breath); }
.neuro .words::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:min(2.4rem, 60%); pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0), var(--paper)); opacity:0; transition:opacity .55s var(--breath); }
.neuro .words.folded::after{ opacity:1; }
.neuro .more{ position:relative; z-index:1; align-self:flex-start; margin:.3rem 0 0; padding:.25rem 0; font:inherit; font-size:.92rem; color:var(--soft); background:none; border:0;
  cursor:pointer; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-color:var(--faint);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:color var(--slow) var(--breath), opacity .15s var(--breath); }
.neuro .more.swap{ opacity:0; }
.neuro .more.gone{ opacity:0; transition-duration:.3s; }
.neuro .more:hover, .neuro .more:focus-visible{ color:var(--ink); outline:none; }
@media (pointer:coarse){ .neuro .more{ padding-block:.6rem; margin-top:-.1rem; } }   /* a finger-sized target */
/* the name, pushed to the first screen's foot (its auto top margin is the room the words may fold into) */
.neuro .page-title{ margin:auto 0 0; padding-top:2rem; padding-bottom:.075em; line-height:1; letter-spacing:-.012em;
  font-size:min(15vh, 17vw, calc((100vw - var(--r) - var(--g) - 12px) / 2.97)); }   /* "/neuro" is 2.97 times as wide as its size */
/* the rest of the page begins a short way under the name. Under Safari's see-through bar it must not show
   when the page opens (the bar would show it through the glass, and the white floor covers it only once you
   scroll), so at the very top it is see-through and it fades in over the first 24 px of scroll, still under
   the bar: an opacity tied to the scroll, on the compositor, nothing moving. Where scroll-driven animation
   isn't supported it starts below the whole screen instead (--screen, set in neuro.js). */
.scans{ margin:calc(var(--screen, 100lvh) - 100svh + var(--foot) + 8px) 0 0; }
@supports (animation-timeline: scroll()) {
  .scans{ margin-top:clamp(1.8rem, 5vh, 2.8rem); animation:below-in linear both; animation-timeline:scroll(root block); animation-range:0px 24px; }
}
@keyframes below-in{ from{ opacity:0; } to{ opacity:1; } }
/* "more scans": the rest of her scans begin under a heading set as the reading room's are (a hairline above,
   the same size and ink), so scrolling past the name shows there is more (Sha, Oct 12) */
.scans-head{ margin:0 0 clamp(1rem, 3vh, 1.6rem); padding:1.05rem 0 0; border-top:1px solid var(--line);
  font-weight:400; font-size:clamp(1.45rem, 5.4vw, 2rem); line-height:1.15; letter-spacing:-.012em; color:var(--ink); }
.scans-list{ display:grid; gap:clamp(2.4rem, 7vh, 4rem); }
.scan{ margin:0; }
.scan img{ display:block; width:100%; height:auto; background:#000; }
.scan figcaption{ margin-top:.55rem; font-size:.92rem; font-style:italic; color:var(--soft); }

.sources{ margin:clamp(3.5rem, 10vh, 6rem) 0 0; padding-top:1.1rem; border-top:1px solid var(--line);
  max-width:40rem; font-size:.85rem; line-height:1.55; color:var(--soft); }
.sources p{ margin:0 0 .6rem; text-wrap:pretty; }
.sources a, .atlas-credit a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:var(--faint); overflow-wrap:anywhere; }
/* room at the foot, so the last words clear the corner (only once the map is there) */
.has-map .neuro{ padding-bottom:max(calc(var(--r) + 1.5rem), calc(var(--floor) + 1rem)); }

/* ---------- the map in the corner ----------
   a quarter circle of paper with a hairline arc, the map clipped to it and running off the page's
   corner; the scans pass under it */
.corner{ position:fixed; z-index:5; right:0; bottom:0; width:var(--r); height:var(--r); margin:0; padding:0;
  border:0; border-top:1px solid rgba(17,17,17,.4); border-left:1px solid rgba(17,17,17,.4); border-top-left-radius:var(--r) var(--r);
  background:var(--paper); overflow:hidden; cursor:pointer; color:var(--ink); font:inherit;
  -webkit-tap-highlight-color:transparent; opacity:0; transition:opacity .9s var(--breath), border-color var(--slow) var(--breath); }
.corner.in{ opacity:1; }
/* the floor (see index.html): sticky at the bottom with a negative inset, so it sits just below the screen's
   bottom edge, under Safari's bar, for the whole page. Its negative margin takes back the room it would add, so
   at the very end of the page it simply lies over the page's own empty foot (at least --floor tall). */
.floor{ position:sticky; z-index:3; bottom:calc(-1 * var(--floor)); height:var(--floor); margin-top:calc(-1 * var(--floor));
  background:var(--paper); pointer-events:none; }
.neuro{ padding-bottom:calc(var(--floor) + 1rem); }
.corner:hover, .corner:focus-visible{ border-color:rgba(17,17,17,.62); outline:none; }
.corner-map{ position:absolute; inset:0; width:100%; height:100%; }
.c-parts path{ fill:none; stroke:var(--ink); stroke-opacity:.3; stroke-width:.6; vector-effect:non-scaling-stroke; }
.c-vis path{ fill:var(--vis); fill-opacity:0; stroke:var(--ink); stroke-opacity:.7; stroke-width:.7; vector-effect:non-scaling-stroke; transition:fill-opacity .6s var(--breath); }
.c-vis path.here{ fill-opacity:1; }
.c-brain path{ fill:none; stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.c-dot{ fill:var(--ink); }
/* "expand", on its own paper so no line cuts it: low in the corner, clear of the line (which comes in
   from above) and above Safari's bottom bar, at a height that doesn't move when the bar does; where the
   dot would sit right above it (a phone held sideways), it moves to the dot's left (sizeCornerDot) */
.corner-open{ position:absolute; right:max(.8rem, env(safe-area-inset-right)); bottom:2.4rem; font-size:.92rem; color:var(--soft);
  background:var(--paper); padding:0 .3em; margin-right:-.3em; border-radius:.5em;
  white-space:nowrap; transition:color var(--slow) var(--breath), opacity .25s var(--breath);
  text-shadow:0 0 2px var(--paper), 0 0 3px var(--paper), 0 0 5px var(--paper), 0 0 8px var(--paper), 0 0 8px var(--paper); }
.corner-open.moving{ opacity:0; }
.corner:hover .corner-open, .corner:focus-visible .corner-open{ color:var(--ink); }
.corner:focus-visible .corner-open{ text-decoration:underline; text-underline-offset:.2em; }

/* the line from the scan in view to its place, in two drawings that meet under the corner's arc: the
   run from the scan, pinned to the top and under the corner's paper (which hides where it goes on), and
   the last stretch, pinned to the bottom with the corner and over its paper, to the dot */
.lead{ position:fixed; z-index:4; left:0; top:0; width:100%; height:100vh; height:100lvh; pointer-events:none; overflow:visible; }
.lead-in{ z-index:6; top:auto; bottom:0; }
.lead path{ fill:none; stroke:var(--ink); stroke-width:.8; stroke-linecap:round; opacity:0; transition:opacity .32s var(--breath); }
.lead.on path{ opacity:.7; transition-duration:.5s; }

/* ---------- the whole brain ---------- */
/* touch-action: no double-tap zoom inside it (a page pinch stays, for reading small words); the map's own pinch is its pointer events */
.atlas{ position:fixed; z-index:20; left:0; right:0; top:0; height:100%; background:var(--paper); display:grid; grid-template-rows:auto auto 1fr auto;
  overscroll-behavior:contain; touch-action:manipulation; opacity:0; transition:opacity .6s var(--breath); }
.atlas[hidden]{ display:none; }
.atlas.open{ opacity:1; }
/* the top: the name and "close" on the first row, the switches under them; one row on a wide screen */
.atlas-top{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.1rem 1.2rem;
  padding:var(--top) max(var(--g), env(safe-area-inset-right)) .4rem max(var(--g), env(safe-area-inset-left)); }
.atlas-title{ margin:0; font-weight:400; font-size:1.06rem; }
.atlas-controls{ grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:wrap; gap:0 1.4rem; }
.atlas-views, .atlas-toggles{ display:flex; gap:0 1rem; }
.atlas-close{ grid-column:2; grid-row:1; }
@media (min-width:46rem){
  .atlas-top{ grid-template-columns:auto 1fr auto; }
  .atlas-controls{ grid-column:2; grid-row:1; justify-content:flex-end; }
  .atlas-close{ grid-column:3; }
}
.atlas button{ position:relative; font:inherit; font-size:1rem; color:var(--soft); background:none; border:0; padding:.4rem 0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:color var(--slow) var(--breath); }
.atlas button::before{ content:""; position:absolute; inset:-.35rem -.45rem; }      /* a finger-sized target around small words */
.atlas button:hover{ color:var(--ink); }
.atlas button[aria-pressed]{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em; text-decoration-color:transparent;
  transition:color var(--slow) var(--breath), text-decoration-color var(--slow) var(--breath); }
.atlas button[aria-pressed="true"]{ color:var(--ink); text-decoration-color:currentColor; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.atlas button[aria-disabled="true"]{ color:var(--faint); cursor:default; }
.atlas button:focus-visible{ outline:none; color:var(--ink); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:.25em; }

.atlas-stage{ position:relative; min-height:0; overflow:hidden; }
.atlas-map{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; }
.atlas-map.dragging{ cursor:grabbing; }
/* the words over the map stand on a ring of paper, so the drawing never cuts them */
.atlas-scale span, .atlas-zoom button{ text-shadow:0 0 2px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 9px var(--paper); }
.atlas-scale span{ display:grid; }
.atlas-scale b{ grid-area:1 / 1; font-weight:inherit; opacity:0; transition:opacity .24s var(--breath); }
.atlas-scale b.on{ opacity:1; }
.atlas-scale.stepping i{ transition:width .24s var(--breath); }
/* what the view shows, or the name of the region just tapped: its own row above the map, never over the
   drawing (a name over the map read as naming what lay under it); as tall as what it says, easing between */
.atlas-where{ margin:0; padding:.1rem max(var(--g), env(safe-area-inset-right)) .45rem max(var(--g), env(safe-area-inset-left)); box-sizing:border-box; overflow:hidden;
  font-size:.92rem; font-style:italic; color:var(--soft); transition:color .3s var(--breath), opacity .18s var(--breath), height .28s var(--breath); }
.atlas-where.out{ opacity:0; }
.atlas-where.naming{ color:var(--ink); font-style:normal; }
/* the region a tap or the pointer names: outlined in ink with a faint wash, fading in and out */
.atlas-map .pick{ fill:var(--ink); fill-opacity:0; stroke:var(--ink); stroke-opacity:0; stroke-width:1.75; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; pointer-events:none; transition:fill-opacity .3s var(--breath), stroke-opacity .3s var(--breath); }
.atlas-map .pick.on{ fill-opacity:.07; stroke-opacity:.85; }
.atlas-zoom{ position:absolute; right:max(var(--g), env(safe-area-inset-right)); bottom:.55rem; display:flex; gap:1.2rem; }
.atlas-zoom button{ font-size:1.2rem; min-width:1.4rem; text-align:center; }
.atlas-zoom [data-zoom="fit"]{ font-size:1rem; }
.atlas-scale{ position:absolute; left:max(var(--g), env(safe-area-inset-left)); bottom:1rem; font-size:.85rem; color:var(--soft);
  display:flex; flex-direction:column; gap:.3rem; pointer-events:none; }
.atlas-scale i{ display:block; height:0; border-top:1px solid var(--ink); }
/* the legend: over the foot of the map with the colors on, on its own paper; it fades, it never pushes the map */
.atlas-legend{ position:absolute; left:max(var(--g), env(safe-area-inset-left)); right:max(var(--g), env(safe-area-inset-right)); bottom:3.2rem;
  list-style:none; margin:0; padding:.55rem .1rem .45rem; display:flex; flex-wrap:wrap; gap:.15rem 1.1rem; font-size:.84rem; color:var(--soft);
  background:rgba(255,255,255,.9); border-top:1px solid var(--line); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s var(--breath), visibility 0s linear .6s; }
.atlas[data-legend] .atlas-legend{ opacity:1; visibility:visible; transition:opacity .6s var(--breath), visibility 0s; }
.atlas-legend.swap{ opacity:0 !important; transition:opacity .3s var(--breath); }
.atlas-legend li{ display:flex; align-items:center; gap:.4rem; }
.atlas-legend i{ display:inline-block; width:.8rem; height:.8rem; border:1px solid rgba(17,17,17,.14); }
@media (min-width:46rem){ .atlas-legend{ right:auto; max-width:min(44rem, 70%); } }

.atlas-foot{ padding:.45rem max(var(--g), env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(var(--g), env(safe-area-inset-left));
  border-top:1px solid var(--line); }
.atlas-credit{ margin:0; font-size:.8rem; color:var(--soft); }

/* ---------- the drawing: built once, its layers fade on the breath curve ---------- */
.atlas-map .view{ transition:opacity .6s var(--breath), visibility 0s; }
.atlas-map[data-view="above"] .v-slice, .atlas-map[data-view="slice"] .v-above{ opacity:0; visibility:hidden;
  transition:opacity .6s var(--breath), visibility 0s linear .6s; }
.atlas-map .fills path{ fill-opacity:0; pointer-events:all; transition:fill-opacity .6s var(--breath); }
.atlas-map[data-legend] .fills path{ fill-opacity:1; }
.atlas-map .visfill path{ fill-opacity:0; pointer-events:all; transition:fill-opacity .6s var(--breath); }
.atlas-map .visfill path.here, .atlas-map[data-legend] .visfill path{ fill-opacity:1; }
/* in the slice the visual cortex is a light wash, so its six layers read through it */
.atlas-map .v-slice .visfill path.here, .atlas-map[data-legend] .v-slice .visfill path{ fill-opacity:.45; }
.atlas-map .layers path{ fill-opacity:0; stroke:var(--ink); stroke-opacity:.55; stroke-width:.6; vector-effect:non-scaling-stroke; pointer-events:all;
  transition:fill-opacity .6s var(--breath); }
.atlas-map[data-legend] .layers path{ fill-opacity:1; }
.atlas-map .parts path{ fill:none; stroke:var(--ink); stroke-opacity:.45; stroke-width:.6; vector-effect:non-scaling-stroke; }
.atlas-map .vis path{ fill:none; stroke:var(--ink); stroke-opacity:.72; stroke-width:.7; vector-effect:non-scaling-stroke; }
.atlas-map .brain path{ fill:none; stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.atlas-map .dot{ fill:var(--ink); }
/* names: in the region, or out on the paper with a hairline to a dot in it; each fades as a whole */
.atlas-map .lab{ opacity:0; transition:opacity .4s var(--breath); pointer-events:none; }
.atlas-map .lab.show{ opacity:1; }
.atlas-map .labels text{ fill:var(--ink); font-style:italic; stroke:var(--paper); stroke-linejoin:round; paint-order:stroke; }
.atlas-map .labels .l-part text, .atlas-map .labels .l-layer text{ fill:var(--soft); font-style:normal; }
.atlas-map .labels .leader{ fill:none; stroke:var(--ink); stroke-opacity:.55; stroke-width:.75; vector-effect:non-scaling-stroke; }
.atlas-map .labels .anchor{ fill:var(--ink); fill-opacity:.7; stroke:none; }
/* from above: the dashed line where the slice is cut, and the wider clear line a tap finds */
.atlas-map .cut-line{ fill:none; stroke:var(--ink); stroke-opacity:.6; pointer-events:none; }   /* width and dashes set per frame, in µm */
.atlas-map .cut-hit{ fill:none; stroke:transparent; stroke-width:16; vector-effect:non-scaling-stroke; pointer-events:stroke; }
/* the locator, in the slice: the brain from above, small, on its own paper, with the cut, at the map's
   top left; it fades with the slice */
.atlas-locator{ position:absolute; top:.5rem; left:max(var(--g), env(safe-area-inset-left)); width:64px; height:74px; padding:4px; box-sizing:border-box;
  background:rgba(255,255,255,.92); pointer-events:none; opacity:0; visibility:hidden; transition:opacity .6s var(--breath) .2s, visibility 0s linear .8s; }
.atlas-locator svg{ display:block; width:100%; height:100%; }
.atlas[data-view="slice"] .atlas-locator{ opacity:1; visibility:visible; transition:opacity .6s var(--breath) .2s, visibility 0s; }
.loc-brain{ fill:none; stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.loc-vis{ fill:var(--vis); stroke:none; }
.loc-cut{ fill:none; stroke:var(--ink); stroke-width:1.25; stroke-dasharray:3 2; vector-effect:non-scaling-stroke; }
@media (min-width:46rem){ .atlas-locator{ width:96px; height:111px; } }

@media (prefers-reduced-motion:reduce){
  .lead path, .c-vis path, .atlas, .atlas-legend, .corner, .atlas-map .view, .atlas-map .fills path, .atlas-map .visfill path,
  .atlas-map .layers path, .atlas-map .lab, .atlas-locator, .atlas-where, .atlas-map .pick, .atlas-scale b, .atlas-scale i, .corner-open,
  .neuro .words, .neuro .words::after, .neuro .more{ transition:none !important; }
}