/* Work section motion, homepage (owner 2026-10-11; reference design/prototypes/work-flux-final.html: "time flux cur").
   Layout and look at rest are unchanged; js/work-flux.js adds .wf-on to .cases, then:
   1. timeline current: the existing line fills yellow with a glow; the card nearest the window centre is active
      (logo ring + scale, year yellow); the others dim (covers --wf-dim, captions --wf-cap-dim). Phones: the logo above
      each card takes the ring.
   2. Flux: one fixed WebGL canvas behind the section draws every cover at its DOM rect (bend with scroll speed, colour
      fringe, hover zoom + ripple); the DOM images are hidden (.wf-gl) only once every texture has loaded.
   3. captions wave letter by letter while scrolling (letters only while moving).
   4. Read disc over a cover (pointer devices; the Playground's View disc look). All values from tokens.css. */
.cases.wf-on, .explore.wf-on { position: relative; }
:is(.cases, .explore).wf-on > :not(.wf-gl-cv) { position: relative; z-index: 1; }   /* the section's content sits over the canvas */
.wf-gl-cv { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; display: none; }
.wf-gl > .wf-gl-cv { display: block; }
.cases.wf-gl .cs-card__media img { visibility: hidden; }              /* drawn by the canvas; still in the DOM for layout + alt */

/* 1. timeline current */
.cases.wf-on .timeline__line::after { box-shadow: var(--wf-glow); }
.cases.wf-on .timeline__logo { transition: transform var(--wf-dur) var(--ease-out), box-shadow var(--wf-dur) var(--ease-out); }
.cases.wf-on .timeline__item.is-current .timeline__logo { transform: scale(var(--wf-logo-scale)); box-shadow: var(--wf-ring); }
/* phones / tablets (the logo above each card): the logo sits in a fixed slot with room for the ring on every side; the
   active ring is drawn inside that room (no scale, no glow), so nothing moves and the year keeps a 12 px gap (owner 2026-10-11) */
.cases.wf-on .cs-card__when { gap: var(--wf-when-gap); }
.cases.wf-on .cs-card__when .timeline__logo { flex: none; margin: var(--wf-when-room); }
.cases.wf-on .cs-card.is-act .cs-card__when .timeline__logo { box-shadow: var(--wf-when-ring); }
.cases.wf-on .cs-card__media img { transition: filter var(--wf-dur) var(--ease-out); }
.cases.wf-on .cs-card__media .cs-card__hover { transition: opacity var(--dur-card) var(--ease-out), filter var(--wf-dur) var(--ease-out); }
.cases.wf-on .cs-card:not(.is-act) .cs-card__media img { filter: var(--wf-dim); }
.cases.wf-on .cs-card__title { transition: color var(--wf-dur) var(--ease-out); }
.cases.wf-on .cs-card:not(.is-act) .cs-card__title { color: var(--wf-cap-dim); }

/* 3. caption words (desktop; split once at load, moved by the wave while the page scrolls) */
.wf-w { position: relative; }   /* inline: the same line boxes and widths as the plain caption; the wave sets top */

/* phones (.wf-calm: touch / coarse pointer / under 860): real images, no canvas, no wave; other covers dim gently
   (brightness 0.8, 0.4 s) and the active cover settles from 0.98 to 1 (0.5 s); no other transform on scroll */
.cases.wf-calm .cs-card__media img { transform: scale(var(--wf-calm-scale)); transition: filter var(--wf-calm-dur) var(--ease-out), transform var(--wf-dur) var(--ease-out); }
.cases.wf-calm .cs-card__media .cs-card__hover { transition: opacity var(--dur-card) var(--ease-out), filter var(--wf-calm-dur) var(--ease-out), transform var(--wf-dur) var(--ease-out); }
.cases.wf-calm .cs-card.is-act .cs-card__media img { transform: none; }
.cases.wf-calm .cs-card:not(.is-act) .cs-card__media img { filter: var(--wf-calm-dim); }

/* 4. Read disc: the Playground's View disc (.pgw-cur) at --wf-cur */
.pgw-cur.wf-cur.is-view { width: var(--wf-cur); height: var(--wf-cur); margin: calc(var(--wf-cur) / -2) 0 0 calc(var(--wf-cur) / -2); }
@media (hover: hover) and (pointer: fine) { .page--home :is(.cases, .explore) .cs-card { cursor: pointer; } .page--home :is(.cases, .explore) .cs-card__media { cursor: none; } }
/* v4.3 B3: "My Explorations." while the canvas draws its cover: the HTML cover stays in place, invisible (opacity, not visibility,
   so its text stays readable to assistive tech); the caption and the card link are unchanged */
.explore.wf-gl .ex-cover { background: none; }
.explore.wf-gl .ex-cover__in { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cases.wf-on :is(.timeline__logo, .cs-card__media img, .cs-card__title) { transition: none; }
  .cases.wf-calm .cs-card__media img { transform: none; }
}