/* ill-motion: calm, purposeful motion for the isometric line illustrations (svg.iso, drawn by _build/iso.py).
   Hooks set in iso.py: .fl routed orange flow (.flow-b line, .flow-d dash overlay, .flow-e end dot)  .flow legacy dashed flow  .subj the one orange subject  .acc orange solid line
   .led rack status LED  .ping sensor  .air airflow arrow (--dx/--dy = unit direction)  .g-gauge .ndl needle  .g-spark .spk sparkline
   .alt[data-alt] alternative scenes in one drawing (only .cur is shown).
   ill-motion.js adds html.im, and on each svg: .im-seen once it has been on screen, .im-in while it is on screen.
   Without JS or with reduced motion every drawing is shown complete and still. */

/* alternative scenes: only the current one is visible (also without JS) */
svg.iso .alt:not(.cur){opacity:0;pointer-events:none}

/* selectable cards that drive an .alt scene (../konstra-ai/mep/index.html air / liquid) */
.bc.alt-tab{cursor:pointer;background:#F5F4F1;box-shadow:none;transition:background-color .3s ease,box-shadow .3s ease;-webkit-tap-highlight-color:transparent}
.bc.alt-tab.on{background:#fff;box-shadow:inset 0 0 0 1px #FE5000}
.bc.alt-tab:focus{outline:none}
.bc.alt-tab:focus-visible{outline:2px solid #FE5000;outline-offset:3px}

@media (prefers-reduced-motion:no-preference){
  /* every infinite loop waits for the drawing to be on screen */
  html.im svg.iso:not(.im-in) *{animation-play-state:paused!important}
  html.im svg.iso .alt:not(.cur) *{animation-play-state:paused!important}

  /* flow: dashes travel along their path (84 = common multiple of the 3/3, 4/3 and 2/2 dash periods) */
  html.im svg.iso polyline[stroke-dasharray]:not(.flow){animation:none}
  html.im svg.iso polyline.flow{animation:imFlow 16s linear infinite}
  /* routed flows (iso.flow): solid orange run stays put, only its faint white dash overlay travels (period 12 -> 84) */
  html.im svg.iso path.flow-d{animation:imFlow 16s linear infinite}
  @keyframes imFlow{to{stroke-dashoffset:-84}}

  /* the orange subject settles in: short rise with a fade */
  html.im svg.iso .subj{transition:opacity .8s cubic-bezier(.22,.61,.36,1) .3s,transform 1s cubic-bezier(.22,.61,.36,1) .3s}
  html.im svg.iso:not(.im-seen) .subj,html.im svg.iso .alt:not(.cur) .subj{opacity:0;transform:translateY(6px);transition-delay:0s}

  /* accent lines draw once */
  html.im svg.iso .acc{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.77,0,.175,1) .2s}
  html.im svg.iso.im-seen .acc{stroke-dashoffset:0}

  /* signals */
  html.im svg.iso .led{animation:imLed 4.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.6s)}
  @keyframes imLed{0%,100%{opacity:1}50%{opacity:.25}}
  html.im svg.iso .ping{transform-box:fill-box;transform-origin:center;animation:imPing 4.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.2s)}
  @keyframes imPing{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.55}}
  html.im svg.iso .air{animation:imAir 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.9s)}
  @keyframes imAir{0%{transform:translate(calc(var(--dx,0) * -3px),calc(var(--dy,0) * -3px));opacity:.35}45%{opacity:1}100%{transform:translate(calc(var(--dx,0) * 3px),calc(var(--dy,0) * 3px));opacity:.35}}
  html.im svg.iso .g-gauge .ndl{transform-box:fill-box;transform-origin:0 100%;rotate:-70deg;transition:rotate 1.4s cubic-bezier(.22,.61,.36,1) .5s;animation:imNeedle 6s ease-in-out 2s infinite}
  html.im svg.iso.im-seen .g-gauge .ndl{rotate:0deg}
  @keyframes imNeedle{0%,100%{transform:rotate(0deg)}35%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}}
  html.im svg.iso .g-spark .spk{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1) .4s}
  html.im svg.iso.im-seen .g-spark .spk{stroke-dashoffset:0}
  html.im svg.iso .g-spark .spk-tip{opacity:0;transition:opacity .3s ease 1.9s}
  html.im svg.iso.im-seen .g-spark .spk-tip{opacity:1}

  /* alternative scenes crossfade */
  html.im svg.iso .alt{transition:opacity .6s ease}
}

*,*::before,*::after{letter-spacing:0!important}