/* mind (canonical: A + grafts from B). Everything scoped under .mindA. */

.mindA .mindA__art {
  /* viewBox 0 -40 400 500; the opening's centre (232,150) sits at (.58, .38) of the box.
     --h is the drawn height; the opening is placed --ox from the viewport's right edge
     and --oy from its top, so it lines up with the stage's --mind-bright spot.
     Width-aware: --h never exceeds 44vw, and --ox is clamped so the hand's leftmost point
     (viewBox x~59, i.e. .35h left of the opening) stays >= 28px right of the card's right
     edge (50vw + min(180px, 50vw - 20px)) on 4:3 and 5:4 screens.
     The third --h term shrinks the head to fit between the card and the right edge on
     narrow landscape windows (641-~910px): hand-left to ray-tip spans .621h, so
     1.6 x (gap - 44px) leaves ~28px to the card and ~17px past the ray tips. */
  --h: min(56vh, 44vw, calc((50vw - min(180px, 50vw - 20px) - 44px) * 1.6));
  --ox: min(21vw, calc(50vw - min(180px, 50vw - 20px) - 28px - var(--h) * .35));
  --oy: 23vh;
  position: absolute;
  height: var(--h);
  width: calc(var(--h) * .8);
  right: calc(var(--ox) - var(--h) * .8 * .42);
  top: calc(var(--oy) - var(--h) * .38);
  overflow: visible;
  display: block;
}

/* The wobble filter's displacement is in viewBox units (h/500 px each), so it grows with
   the drawing; past ~2.4px on screen the 1.15px forehead line tears into dashes. Bigger
   drawings take a smaller-scale twin to hold it at ~1.9-2.4px. Thresholds are where
   --h = min(56vh, 44vw, ...) reaches 510 / 640 / 810px (portrait: 34vh). */
@media (min-width: 1159px) and (min-height: 911px),
       (min-width: 641px) and (max-aspect-ratio: 1/1) and (min-height: 1500px) {
  .mindA .mindA__line, .mindA .mindA__rings { filter: url(#mindA-hand-m); }   /* 1.9 */
}
@media (min-width: 1455px) and (min-height: 1143px),
       (min-width: 641px) and (max-aspect-ratio: 1/1) and (min-height: 1882px) {
  .mindA .mindA__line, .mindA .mindA__rings { filter: url(#mindA-hand-l); }   /* 1.5 */
}
@media (min-width: 1841px) and (min-height: 1447px),
       (min-width: 641px) and (max-aspect-ratio: 1/1) and (min-height: 2382px) {
  .mindA .mindA__line, .mindA .mindA__rings { filter: url(#mindA-hand-xl); }  /* 1.2 */
}

/* woodcut hatching under the jaw and down the throat */
.mindA .mindA__hatch {
  stroke: var(--graphite-soft);
  stroke-width: .55;
  stroke-opacity: .5;
}

/* the moonlit twin on the hand's leading edge: phone only (see the media query) */
.mindA .mindA__twin { display: none; }

/* The light inside the head. It was an SVG circle beside the filtered line art; as an HTML layer
   its breathing is composited and never repaints the wobble filter. Same geometry: the box is
   the 400x500 viewBox at --h, so (232,140) r150 is (58%, 36%) with radius .3h. */
.mindA .mindA__glow {
  background: radial-gradient(circle calc(var(--h) * .3) at 58% 36%,
    var(--mind-bright) 0%,
    color-mix(in srgb, var(--mind-bright) 95%, transparent) 14%,
    color-mix(in srgb, var(--mind-glow) 80%, transparent) 30%,
    color-mix(in srgb, var(--mind-glow) 28%, transparent) 62%,
    color-mix(in srgb, var(--mind-glow) 0%, transparent) 100%);
  transform-origin: 58% 36%;
  will-change: opacity, transform;
  animation: mindA-breathe var(--t-breathe) var(--ease-calm) infinite alternate;
}
/* the rays answer the glow half a breath later (their own SVG layer, for the same reason) */
.mindA .mindA__rays {
  will-change: opacity;
  animation: mindA-rays var(--t-breathe) var(--ease-calm) calc(var(--t-breathe) / -2) infinite alternate;
}
@keyframes mindA-rays {
  from { opacity: .88; }
  to   { opacity: 1; }
}
@keyframes mindA-breathe {
  from { opacity: .88; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.02); }
}

/* the walker takes one slow step every 24 s: two poses, a ~3 s cross-fade */
.mindA .mindA__pose--b { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mindA .mindA__pose--a { animation: mindA-step-a 48s var(--ease-calm) infinite; }
  .mindA .mindA__pose--b { animation: mindA-step-b 48s var(--ease-calm) infinite; }
}
@keyframes mindA-step-a { 0%, 46% { opacity: 1; } 52%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mindA-step-b { 0%, 46% { opacity: 0; } 52%, 96% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 640px) {
  .mindA .mindA__art {
    --h: 31vh;
    --ox: 21vw;
    --oy: 9vh;
  }
  /* over the dusk the graphite hand goes grey; a pale --star line beside it reads as moonlight */
  .mindA .mindA__twin {
    display: inline;
    stroke: var(--star);
    stroke-width: 1.1;
    stroke-opacity: .66;
  }
  /* the hand sits inside the corner's seam fade here, so it takes the full --graphite
     rather than the soft end of the ink gradient; the mask still keeps it lighter than the face */
  .mindA .mindA__hand > path { stroke: var(--graphite); }
  /* the forearm matches, so there is no step in tone at the wrist; the y290-400 mask fades it */
  .mindA .mindA__forearm { stroke: var(--graphite); }
}

/* Phones place the head against the small viewport (what shows under the browser's toolbars),
   matching tokens.css. Behind @supports: a custom property can't fall back by being declared twice. */
@supports (height: 1svh) {
  @media (max-width: 640px) {
    .mindA .mindA__art { --h: 31svh; --oy: 9svh; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mindA .mindA__glow,
  .mindA .mindA__rays { animation: none; opacity: 1; }
  .mindA .mindA__pose--b { display: none; }
}

/* Portrait screens wider than a phone (tablets): the card sits high in the middle,
   so the head takes the phone placement and stays above it (vertical clearance, not
   horizontal: the hand is over the card's columns but ends well above its top edge).
   Short portrait windows (641x800) cap --h so the hand's bottom (14vh + .284h) stays
   >= 24px above a 380px card (top at 50vh - 190px). */
@media (min-width: 641px) and (max-aspect-ratio: 1/1) {
  .mindA .mindA__art {
    --h: min(34vh, calc((36vh - 214px) * 3.5));
    --ox: 21vw;
    --oy: 9vh;
  }
}