/* The training icons' one sheet (inbox 0556): the look and the motion of every icon in
   templates/app_courses/icons/, wherever it is drawn (the dashboard's Progress tab, a certificate, the
   AI Lab sales page), so a change here travels to all of them.

   Look: Erik's 40 on the dashboard, "Two-tone": the outline in currentColor over a faint fill of its own
   colour, and one orange part each, the way the robot's eyes read (the eyes, the calendar's tick, the
   bolt's spark, the cap's tassel). No glow, no bar. Size and colour are the surface's: its class on the
   svg (or x, y, w, h inside another svg) and its `color`; --tic-sw thickens the line on a big surface.

   Motion: the robot's eyes follow the pointer (ticons.js) and blink; the other three move once under the
   pointer of their card (.tic-host) or of the icon itself. Nothing moves under prefers-reduced-motion. */

.tic{overflow:visible;fill:none;stroke:currentColor;stroke-width:var(--tic-sw,1.6);stroke-linecap:round;stroke-linejoin:round}
.tic *{vector-effect:non-scaling-stroke}
.tic .tic-body{fill:currentColor;fill-opacity:.12}
.tic .tic-acc{stroke:var(--acc)}
.tic :is(.tic-ey,.tic-knot){fill:var(--acc);stroke:none}
/* the eyes' move: ticons.js writes the translate, this eases it */
.tic .tic-eyes{transition:transform .18s ease-out}
/* the parts that turn, turned about a point of their own */
.tic :is(.tic-ey,.tic-spark){transform-box:fill-box;transform-origin:center}
.tic .tic-cap{transform-box:view-box;transform-origin:12px 12px;transition:transform .25s ease-out}
.tic .tic-tassel{transform-box:view-box;transform-origin:21.5px 9.5px}
.tic .tic-spark{transition:transform .3s ease-out}

@media (prefers-reduced-motion:no-preference){
  .tic .tic-ey{animation:tic-blink 5.2s infinite}
  /* the calendar's tick is drawn again */
  :is(.tic-host:hover .tic,.tic:hover) .tic-tick{stroke-dasharray:1;animation:tic-draw .5s ease-out}
  /* the bolt flickers, its spark turns */
  :is(.tic-host:hover .tic,.tic:hover) .tic-bolt{animation:tic-flicker .45s steps(1,end)}
  :is(.tic-host:hover .tic,.tic:hover) .tic-spark{transform:rotate(90deg) scale(1.25)}
  /* the cap tilts, its tassel swings */
  :is(.tic-host:hover .tic,.tic:hover) .tic-cap{transform:rotate(-8deg)}
  :is(.tic-host:hover .tic,.tic:hover) .tic-tassel{animation:tic-swing .8s ease-out}
}
@keyframes tic-blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}

/* ---------- the robot's motions, as modifiers a surface puts on the group that holds it (0618) ---------- */
/* .tic-sway: hangs and swings about the group's own origin (the AI Lab crane's block); still without motion */
@media (prefers-reduced-motion:no-preference){
  .tic-sway{animation:tic-sway 4s ease-in-out infinite alternate}
}
@keyframes tic-sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}

/* ---------- the plug scene, icons/ai-lab-plug.html (0618, baked on the RVTDocs page's 15, 0635) ----------
   The robot stands still on the left and runs its wire to the RVTDocs MCP socket (0650); `data-state` is
   where the plug is:
   locked  (no AI Lab) it reaches from far back and falls short, the socket dim and padlocked
   wait    (AI Lab, no unlock yet) the plug held well back (Erik: "a bigger distance"), the lamp breathing
   on      (unlocked) the wire runs out once on arrival, the lamp lights, the socket's doc lines draw in
           orange one after the other, the docs run up the cord
   Size and colour are the surface's (its class, its `color`). Without motion every state stands still
   at its own place; the doc lines are motion only. */
.tic-pl{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:var(--tic-sw,1.6);stroke-linecap:round;stroke-linejoin:round}
.tic-pl *{vector-effect:non-scaling-stroke}
.tic-pl :is(.tic-pl-box,.tic-pl-plug){fill:currentColor;fill-opacity:.1}
.tic-pl .tic-pl-plate{fill:var(--s2)}
.tic-pl .tic-pl-doc{opacity:.55}
.tic-pl .tic-pl-led{fill:var(--faint);stroke:none}
.tic-pl .tic-pl-lb{fill:var(--faint);stroke:none;font:600 8.5px var(--fm);letter-spacing:.14em;text-anchor:middle}
.tic-pl .tic-pl-flow{stroke:var(--acc);stroke-dasharray:2 16;opacity:0}
.tic-pl .tic-pl-zap{stroke:var(--acc);opacity:0}
.tic-pl .tic-pl-lock{display:none}
.tic-pl .tic-pl-docs{stroke:var(--acc);opacity:0}
.tic-pl .tic-pl-docs path{opacity:0;stroke-dasharray:200;stroke-dashoffset:200}
/* where the plug is: far short of the socket, well back from it, in it. The robot never moves (0650): the
   wire scales from its hand, so its end stays on the plug (the wire is 212 long, the plug 90 back = .5755) */
.tic-pl .tic-pl-wire{transform-box:fill-box;transform-origin:left center}
.tic-pl[data-state="locked"] .tic-pl-end{transform:translateX(-100px)}
.tic-pl[data-state="locked"] .tic-pl-wire{transform:scaleX(.5283)}
.tic-pl[data-state="wait"] .tic-pl-end{transform:translateX(-90px)}
.tic-pl[data-state="wait"] .tic-pl-wire{transform:scaleX(.5755)}
.tic-pl[data-state="locked"] .tic-pl-sock{opacity:.45}
.tic-pl[data-state="locked"] .tic-pl-lock{display:inline}
.tic-pl[data-state="on"] .tic-pl-led{fill:var(--green)}
.tic-pl[data-state="on"] .tic-pl-flow{opacity:1}
.tic-pl[data-state="on"] :is(.tic-pl-lb,.tic-pl-doc){fill:var(--dim2);opacity:1}
.tic-pl[data-state="on"] .tic-pl-docs{opacity:1}
/* on: the way in takes 1.4s from .4s; the lamp, the spark, the docs and the flow start on arrival */
@media (prefers-reduced-motion:no-preference){
  .tic-pl[data-state="locked"] .tic-pl-end{animation:tic-pl-reach 2.8s ease-in-out infinite}
  .tic-pl[data-state="locked"] .tic-pl-wire{animation:tic-pl-reach-w 2.8s ease-in-out infinite}
  .tic-pl[data-state="wait"] .tic-pl-end{animation:tic-pl-bob 2.4s ease-in-out infinite alternate}
  .tic-pl[data-state="wait"] .tic-pl-wire{animation:tic-pl-bob-w 2.4s ease-in-out infinite alternate}
  .tic-pl[data-state="wait"] .tic-pl-led{animation:tic-pl-breathe 2.4s ease-in-out infinite alternate}
  .tic-pl[data-state="on"] .tic-pl-end{animation:tic-pl-in 1.4s ease-in-out .4s backwards}
  .tic-pl[data-state="on"] .tic-pl-wire{animation:tic-pl-in-w 1.4s ease-in-out .4s backwards}
  .tic-pl[data-state="on"] .tic-pl-led{animation:tic-pl-lit .25s 1.8s backwards}
  .tic-pl[data-state="on"] .tic-pl-zap{animation:tic-pl-zap .5s ease-out 1.75s}
  .tic-pl[data-state="on"] .tic-pl-flow{animation:tic-pl-flow 1.4s linear 2.1s infinite backwards}
  .tic-pl[data-state="on"] .tic-pl-docs path{animation:tic-pl-docs .3s ease-out 1.9s both}
  .tic-pl[data-state="on"] .tic-pl-docs path:nth-child(2){animation-delay:2.05s}
  .tic-pl[data-state="on"] .tic-pl-docs path:nth-child(3){animation-delay:2.2s}
  .tic-pl[data-state="on"] .tic-pl-docs path:nth-child(4){animation-delay:2.35s}
}
/* every move of the plug has its wire's twin (-w): the same keyframes, scale = (212 + x) / 212 */
@keyframes tic-pl-reach{0%,100%{transform:translateX(-100px)}55%{transform:translateX(-88px)}}
@keyframes tic-pl-reach-w{0%,100%{transform:scaleX(.5283)}55%{transform:scaleX(.5849)}}
@keyframes tic-pl-bob{from{transform:translateX(-90px)}to{transform:translateX(-87px)}}
@keyframes tic-pl-bob-w{from{transform:scaleX(.5755)}to{transform:scaleX(.5896)}}
@keyframes tic-pl-breathe{from{fill:var(--faint)}to{fill:var(--dim2)}}
/* the way in: the wire runs out along the gap, the plug set down in the socket */
@keyframes tic-pl-in{from{transform:translateX(-90px)}to{transform:none}}
@keyframes tic-pl-in-w{from{transform:scaleX(.5755)}to{transform:none}}
/* a surface's own wait for an answer (its request running): the plug reaches toward the socket and back */
@keyframes tic-pl-try{from{transform:translateX(-90px)}to{transform:translateX(-55px)}}
@keyframes tic-pl-try-w{from{transform:scaleX(.5755)}to{transform:scaleX(.7406)}}
@keyframes tic-pl-lit{from{fill:var(--faint)}}
@keyframes tic-pl-zap{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes tic-pl-flow{from{opacity:0;stroke-dashoffset:0}10%{opacity:1}to{opacity:1;stroke-dashoffset:36}}
@keyframes tic-pl-docs{from{opacity:1;stroke-dashoffset:200}to{opacity:1;stroke-dashoffset:0}}
@keyframes tic-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes tic-flicker{0%{opacity:.35}20%{opacity:1}40%{opacity:.5}60%{opacity:1}}
@keyframes tic-swing{0%{transform:rotate(0)}30%{transform:rotate(18deg)}60%{transform:rotate(-9deg)}100%{transform:rotate(0)}}