/* iso-motion.css - the iso forms ("In theory / In practice") and how they move. Shared by /brand/ and /home-concept/.
   Drive it the way Martin's site.js drives his hero: add .armed to .iso-stage to play, toggle .is-theory for theory.
   The drawing itself is generated by scripts/iso-forms.mjs. */
.iso-stage{position:relative;width:100%;margin:6px 0 4px}
.iso-stage .art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.iso-stage .num{font-family:var(--mono);font-size:13px;font-weight:500;fill:var(--purple)}
.iso-stage .ghost .edges{fill:none;stroke:#8a5cf6;stroke-width:1.5;stroke-dasharray:2 4;stroke-linecap:square;stroke-linejoin:miter}
.iso-stage .ghost .ticks{stroke-dasharray:6 5}
.iso-stage .ghost :is(polygon,polyline){stroke:#8a5cf6;stroke-width:1.1;stroke-dasharray:2.5 2.5;stroke-opacity:1}
/* Motion: Phil's sequence (2026-11-06 10:30), drawn in Martin's grammar. Each form drops into its dashed sketch,
   then the dots come out along the arrow, then the next form drops, and so on; when the third form lands, the person
   walks over and presses its badge, and the check appears. The dashed sketch of each piece goes as its block arrives.
   Final state is the default: no JS or reduced motion shows the finished forms, still. site.js adds .armed (250ms
   after load) and toggles .is-theory, exactly as on his hero. The person's walk vector (--wx/--wy) is written into
   the SVG by scripts/iso-forms.mjs, so it stays true to the drawing. */
.iso-stage .gk{opacity:0}
.iso-stage .f1{--d:0s}.iso-stage .k1{--d:.35s}.iso-stage .a1{--d:.75s}
.iso-stage .f2{--d:1.2s}.iso-stage .a2{--d:1.95s}
.iso-stage .f3,.iso-stage .k3{--d:2.4s}.iso-stage .p3{--d:3.0s}.iso-stage .k3c{--d:4.05s}
.iso-stage :is(.pc,.c0,.c1,.c2,.gk){transform-box:fill-box;transform-origin:center bottom}
.iso-stage .k3c{transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  /* before it arms: the sketch */
  .js .iso-stage:not(.armed) .pc,.js .iso-stage:not(.armed) .ar>g{opacity:0}
  .js .iso-stage:not(.armed) :is(.gk.f1,.gk.f2,.gk.a1,.gk.a2,.gk.sk){opacity:1}
  /* each sketch goes as its block lands on it (arrows: as the first dot comes out) */
  .iso-stage.armed:not(.is-theory) :is(.gk.f1,.gk.f2,.gk.f3){animation:hc-unsketch .2s ease calc(var(--d) + .4s) both}
  .iso-stage.armed:not(.is-theory) :is(.gk.a1,.gk.a2){animation:hc-unsketch .2s ease var(--d) both}
  .iso-stage.armed:not(.is-theory) :is(.f1,.f2,.f3,.k3){animation:hc-fall .55s var(--d) both}
  .iso-stage.armed:not(.is-theory) .k1{animation:hc-land .26s cubic-bezier(.2,.7,.2,1) var(--d) both}
  .iso-stage.armed:not(.is-theory) .ar>g{animation:hc-cube .26s cubic-bezier(.2,.7,.2,1) calc(var(--d) + var(--i)*.13s) both}
  .iso-stage .c0{--i:0}.iso-stage .c1{--i:1}.iso-stage .c2{--i:2}
  /* the person walks in from the left in four steps, leans into the badge; the badge gives, the check lands */
  .iso-stage.armed:not(.is-theory) .p3{animation:hc-walk 1.05s linear var(--d) both}
  .iso-stage.armed:not(.is-theory) .k3{animation:hc-fall .55s var(--d) both,hc-press .3s ease calc(var(--d) + 1.5s)}
  .iso-stage.armed:not(.is-theory) .k3c{animation:hc-land .24s cubic-bezier(.2,.7,.2,1) var(--d) both}
  /* theory: the blocks lift off, the sketches come back, 03 is gone: an email icon, sent, unchecked */
  .iso-stage.is-theory .pc,.iso-stage.is-theory .ar>g{opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .3s cubic-bezier(.4,0,1,1)}
  .iso-stage.is-theory :is(.gk.f1,.gk.f2,.gk.a1){opacity:1;transition:opacity .3s ease .12s}
  .iso-stage.is-theory .gk.away{opacity:1;transition:opacity .3s ease .25s}
  .iso-stage.is-theory .gk.env{animation:hc-fly .7s cubic-bezier(.6,0,.3,1) .3s both}
}
@keyframes hc-unsketch{0%{opacity:1}100%{opacity:0}}
@keyframes hc-fall{0%{opacity:0;transform:translateY(-34px);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  12%{opacity:1}62%{transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}78%{transform:translateY(-4px)}100%{opacity:1;transform:none}}
@keyframes hc-land{0%{opacity:0;transform:scale(1.4)}100%{opacity:1;transform:none}}
@keyframes hc-cube{0%{opacity:0;transform:translateY(-6px) scale(.4)}100%{opacity:1;transform:none}}
@keyframes hc-walk{
  0%{opacity:0;transform:translate(var(--wx),var(--wy))}
  8%{opacity:1;transform:translate(calc(var(--wx)*.92),calc(var(--wy)*.92 - 3px))}
  20%{transform:translate(calc(var(--wx)*.75),calc(var(--wy)*.75))}
  32%{transform:translate(calc(var(--wx)*.55),calc(var(--wy)*.55 - 3px))}
  45%{transform:translate(calc(var(--wx)*.35),calc(var(--wy)*.35))}
  57%{transform:translate(calc(var(--wx)*.17),calc(var(--wy)*.17 - 3px))}
  70%{transform:none}
  86%{transform:translate(var(--px),var(--py))}
  100%{opacity:1;transform:none}}
@keyframes hc-press{0%,100%{transform:none}40%{transform:translate(1.6px,-.9px) scale(.94)}}
@keyframes hc-fly{0%{opacity:0;transform:translateX(-24px)}40%{opacity:1}100%{opacity:1;transform:none}}

/* ---------- the problem cards (scripts/iso-trio.mjs): <svg class="wd rv isot ..."> ----------
   Martin's site.js adds .play at 40% in view (cards 120 ms apart). Each piece carries its own --d.
   Final state is the default: two tools used and four sketches, the record in SHEET with copies left behind,
   four decisions piled, the owner a sketch. */
.isot .cap{font:500 9.5px var(--mono);letter-spacing:.08em;fill:var(--dim)}.isot .cap.tag{fill:var(--ink)}.isot .lv{fill:var(--purple)}
.isot .dollar{font:700 8.5px var(--mono);fill:#fff;pointer-events:none}
.isot .gk{opacity:0}
.isot .gk :is(polygon,polyline){stroke:#8a5cf6;stroke-width:1.1;stroke-dasharray:2.5 2.5;vector-effect:non-scaling-stroke}
.isot .lnk{fill:none;stroke:#8a5cf6;stroke-width:1.5;stroke-dasharray:2 4;stroke-linecap:square}
.isot :is(.pc,.gk){transform-box:fill-box;transform-origin:center bottom}
.isot .dollar{transform-origin:center}
.isot.tools .pc.idle{opacity:0}.isot.tools .gk.idle{opacity:1}
.isot.own .gk.own{opacity:1}
.isot.hand .rec{transform:translate(calc(var(--hx)*2),calc(var(--hy)*2))}
@media (prefers-reduced-motion:no-preference){
  .js .isot.rv:not(.play) .pc{opacity:0}
  .js .isot.rv:not(.play) .gk:not(.cp){opacity:1}
  .isot.play :is(.pc.t0,.pc.t1,.pc.t2,.pc.t3,.pc.t4,.pc.t5,.pc.b0,.pc.b1,.pc.b2,.pc.sl){animation:hc-fall .5s var(--d) both}
  .isot.play .gk:not(.own){animation:hc-unsketch .2s ease calc(var(--d) + .35s) both}
  .isot.play :is(.pc.tag,.dollar){animation:hc-land .24s cubic-bezier(.2,.7,.2,1) var(--d) both}
  .isot.play :is(.capg,.lbl,.wk,.lnks,.cp){animation:it-show .35s ease var(--d) both}
  /* too many tools: four of the six go back to sketches */
  .isot.tools.play .pc.idle{animation:hc-fall .5s var(--d) both,it-hide .45s ease 1.45s both}
  .isot.tools.play .gk.idle{animation:hc-unsketch .2s ease calc(var(--d) + .35s) both,it-show .45s ease 1.5s both}
  /* manual handoffs: the record lands on CRM, is carried to EMAIL, then to SHEET */
  .isot.hand.play .rec{animation:it-show .3s ease var(--d) both,it-carry 1.3s linear 1.2s both}
}
@keyframes it-show{0%{opacity:0}100%{opacity:1}}
@keyframes it-hide{0%{opacity:1}100%{opacity:0}}
@keyframes it-carry{
  0%{transform:none;animation-timing-function:cubic-bezier(.6,0,.3,1)}
  18%{transform:translate(calc(var(--hx)*.5),calc(var(--hy)*.5 - 16px));animation-timing-function:cubic-bezier(.6,0,.3,1)}
  36%,58%{transform:translate(var(--hx),var(--hy));animation-timing-function:cubic-bezier(.6,0,.3,1)}
  76%{transform:translate(calc(var(--hx)*1.5),calc(var(--hy)*1.5 - 16px));animation-timing-function:cubic-bezier(.6,0,.3,1)}
  94%,100%{transform:translate(calc(var(--hx)*2),calc(var(--hy)*2))}}
.isot .ldr{fill:none;stroke:#b394ff;stroke-width:1;stroke-dasharray:1.5 2.5}
.isot .cap.q{font-size:9.5px;letter-spacing:.04em}

/* sketches stand on a light shadow, never stroked */
.iso-stage .ghost .shd polygon,.isot .gk .shd polygon{stroke:none}
/* the timeline's phone version: shown only where Martin's CSS hides the wide one */
.tl-m{display:none;margin:0 0 28px}
@media(max-width:640px){.tl-m{display:block}}
.tl-card .tl-slice{display:block;width:100%;height:auto;margin:0 0 12px}