/* =====================================================================
   v7 motion layer
   Every move enhances an already-visible default:
   - JS off: nothing here hides anything (hidden "waiting" states hang off classes v7-motion.js adds).
   - prefers-reduced-motion: reduce / body.is-motion-paused / body[data-experience=standard]:
     every hidden state and every animation below is unmatched, so the static drawing shows.
   - Animated properties: transform, opacity, stroke-dashoffset (+ the FAQ height in Chromium only).
   - Reveals are "play once" on scroll entry (IntersectionObserver in v7-motion.js) with a
     timed cleanup, so nothing can be left half-drawn when the reader stops scrolling.
   ===================================================================== */
:root{
  --m7-expo:cubic-bezier(.16,1,.3,1);
  --m7-quint:cubic-bezier(.22,1,.36,1);
  --m7-wire:var(--orange,#ff7a00)
}

/* Elements v7-motion.js inserts. Default (static) look; motion only animates them. */
.m7-lead{position:absolute;left:0;top:-20px;width:58px;height:9px;pointer-events:none;display:block}
.m7-lead>i{position:absolute;display:block}
.m7-lead__line{left:0;top:4px;width:48px;height:1px;background:var(--blue,#0a7cff);opacity:.75;transform-origin:0 50%}
.m7-lead__ring{left:48px;top:0;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--blue,#0a7cff);background:var(--bg,#0b0d11);box-sizing:border-box}
.m7-lead__glow{left:48px;top:0;width:9px;height:9px;border-radius:50%;background:var(--orange,#ff7a00);box-shadow:0 0 10px 1px #ff7a0099;opacity:0}
@media(max-width:600px){.m7-lead{top:-16px}}

.m7-wire{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);max-width:none;overflow:visible;pointer-events:none;display:block;fill:none;stroke:var(--m7-wire);stroke-width:1;color:var(--m7-wire)}
.m7-wire rect{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}

.m7-led{position:absolute;left:0;bottom:6px;height:5px;width:100px;pointer-events:none;opacity:0;transform:translateX(var(--m7-x,0px))}
.m7-led.is-on{opacity:1}
.m7-led>i{position:absolute;display:block}
.m7-led__bar{left:0;top:2px;width:100px;height:1px;background:var(--orange,#ff7a00);opacity:.55;transform-origin:0 50%;transform:scaleX(var(--m7-w,0))}
.m7-led__dot{left:0;top:0;width:5px;height:5px;border-radius:50%;background:var(--orange,#ff7a00);box-shadow:0 0 8px 1px #ff7a0099;transform:translateX(calc(var(--m7-w,0) * 50px - 2.5px))}
/* the LED replaces the older per-link underline and the anchor-positioned wire */
.main-nav.m7-nav{position:relative}
.main-nav.m7-nav>a:after,.main-nav.m7-nav:after{display:none!important}

.m7-drop{position:absolute;pointer-events:none;display:block;overflow:visible}
.m7-drop[hidden]{display:none}
.m7-drop>i{position:absolute;display:block}
.m7-drop__fill{inset:0;background:var(--orange,#ff7a00);transform:scaleY(0);transform-origin:50% 0}
.m7-drop__dot{left:50%;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--orange,#ff7a00);box-shadow:0 0 8px 2px #ff7a0080;opacity:0}
.m7-drop[data-axis=x] .m7-drop__fill{transform:scaleX(0);transform-origin:0 50%}
.m7-drop[data-axis=x] .m7-drop__dot{left:0;top:50%;margin:-3px 0 0 -3px}

/* v4-motion's per-word heading reveal animated the heading text itself; v7 keeps headings still
   and moves only the decorative leader beside them (research C.7: never animate real text). */
.mo-head .mo-w{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}

@media screen and (prefers-reduced-motion:no-preference){

  /* ---------- 1. Diagrams draw themselves (kit ladder, resource thumbnails, lesson toys) ---------- */
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-wait .m7-s{stroke-dasharray:1 1;stroke-dashoffset:1}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-wait .m7-c{opacity:0}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-play .m7-s{
    animation:m7-draw .7s var(--m7-quint) calc(var(--m7-d,0) * 1ms) backwards;animation-play-state:running!important
  }
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-play .m7-c{
    transform-box:fill-box;transform-origin:50% 50%;
    animation:m7-pop .34s var(--m7-expo) calc(var(--m7-d,0) * 1ms) backwards;animation-play-state:running!important
  }

  /* ---------- 2. Hero power-on: one sequence per page load, illustration only (text never waits) ---------- */
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .so-wire{animation:m7-wire .6s var(--m7-quint) backwards}
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .so-leader{animation:m7-leader .45s var(--m7-quint) .22s backwards}
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) :is(.so-pads,.so-dot){animation:m7-fade .3s var(--m7-expo) .36s backwards}
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .so-callout{
    transform-box:fill-box;transform-origin:50% 50%;animation:m7-pop .34s var(--m7-expo) .42s backwards
  }
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .orbit-float--capacitor .so-callout{animation-delay:.48s}
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .orbit-float--led .so-callout{animation-delay:.54s}
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .orbit-float--resistor .so-callout{animation-delay:.6s}
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .orbit-core .so-callout{animation-delay:.66s}
  /* the orange current and the coil glow come up once the wires exist */
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .orbit-current{
    animation:orbit-current 6s linear infinite,m7-fade .4s var(--m7-expo) .56s backwards
  }
  body[data-experience=lab]:not(.is-motion-paused) .signal-orbit:not(.m7-booted) .orbit-current{animation-duration:2.8s,.4s}
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .orbit-halo{animation:m7-fade .5s var(--m7-expo) .3s backwards}
  /* LED bank lights left to right once (.52s + i*.18s, 160ms each, last one lit at 1.4s),
     then hands over to the existing light-bank loop at its brightest point, with the same .18s spacing. */
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit .orbit-light{
    animation:light-bank 2.5s ease-in-out calc(var(--i,0) * .18s - .57s) infinite
  }
  body:not(.is-motion-paused):not([data-experience=standard]) .signal-orbit:not(.m7-booted) .orbit-light{
    animation:light-bank 2.5s ease-in-out calc(var(--i,0) * .18s - .57s) infinite,
              m7-led .16s ease-out calc(.52s + var(--i,0) * .18s) backwards
  }

  /* ---------- 3. Section heading leader: hairline + ring node; the node lights orange once ---------- */
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-wait>.m7-lead .m7-lead__line{transform:scaleX(0)}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-wait>.m7-lead .m7-lead__ring{opacity:0}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-play>.m7-lead .m7-lead__line{animation:m7-grow .5s var(--m7-expo) backwards}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-play>.m7-lead .m7-lead__ring{animation:m7-pop .3s var(--m7-expo) .3s backwards}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-play>.m7-lead .m7-lead__glow{animation:m7-blink .9s ease-out .38s}

  /* ---------- 8. Workshop details rows: top to bottom, 8px rise, 40ms apart ---------- */
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-wait>.pd__row{opacity:0}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-play>.pd__row{
    animation:m7-rise .55s var(--m7-expo) calc(var(--m7-d,0) * 1ms) backwards;animation-play-state:running!important
  }

  /* ---------- 4. Primary buttons: a 1px wire traces the outline, arrow nudges, press scales ---------- */
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-wire rect{
    transition:stroke-dashoffset .2s var(--m7-quint),opacity .2s linear
  }
  body:not(.is-motion-paused):not([data-experience=standard]) :is(.button--yellow,.button--primary) .icon{transition:transform .25s var(--m7-expo)}
  body:not(.is-motion-paused):not([data-experience=standard]) :is(.button--yellow,.button--primary):focus-visible .m7-wire rect{
    stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .45s var(--m7-quint),opacity .1s linear
  }
  body:not(.is-motion-paused):not([data-experience=standard]) :is(.button--yellow,.button--primary):focus-visible .icon{transform:translateX(3px)}
  /* press scale .97 already comes from v5.css (.button:active) */

  /* ---------- 5. Nav power LED glides (250ms) ---------- */
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-led.m7-ready{transition:transform .25s var(--m7-expo),opacity .2s linear}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-led.m7-ready>i{transition:transform .25s var(--m7-expo)}

  /* ---------- 6. Start here: the drop lights from the bus down and a dot runs to the card ---------- */
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-paths .cks-paths__item:has(.cks-paths__terminal:focus-visible)::before{background:var(--blue,#0a7cff)}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-paths .cks-paths__item:has(.cks-paths__terminal:focus-visible) .m7-drop__fill{transform:none;transition:transform .26s var(--m7-expo)}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-paths .cks-paths__item:has(.cks-paths__terminal:focus-visible) .m7-drop__dot{animation:m7-run-y .42s var(--m7-expo) both}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-paths .cks-paths__item:has(.cks-paths__terminal:focus-visible) .m7-drop[data-axis=x] .m7-drop__dot{animation-name:m7-run-x}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-paths .m7-drop__fill{transition:transform .16s ease-out}

  /* ---------- 7. FAQ: smooth height where the browser can animate to auto (Chromium); instant elsewhere ---------- */
  @supports (interpolate-size:allow-keywords) and selector(::details-content){
    body:not(.is-motion-paused):not([data-experience=standard]) .live-faq__item{interpolate-size:allow-keywords}
    body:not(.is-motion-paused):not([data-experience=standard]) .live-faq__item::details-content{
      block-size:0;overflow:clip;
      transition:block-size .26s var(--m7-quint),content-visibility .26s allow-discrete
    }
    body:not(.is-motion-paused):not([data-experience=standard]) .live-faq__item[open]::details-content{
      block-size:auto;transition-duration:.42s
    }
  }
  body:not(.is-motion-paused):not([data-experience=standard]) .live-faq__item summary i{transition:transform .42s var(--m7-expo)}
  body:not(.is-motion-paused):not([data-experience=standard]) .live-faq__item[open] summary i{transform:rotate(180deg)}
}

/* hover-only parts of 4 and 6: real pointers only, so nothing sticks after a tap */
@media screen and (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  body:not(.is-motion-paused):not([data-experience=standard]) :is(.button--yellow,.button--primary):hover .m7-wire rect{
    stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .45s var(--m7-quint),opacity .1s linear
  }
  body:not(.is-motion-paused):not([data-experience=standard]) :is(.button--yellow,.button--primary):hover .icon{transform:translateX(3px)}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-paths .cks-paths__item:hover::before{background:var(--blue,#0a7cff)}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-paths .cks-paths__item:hover .m7-drop__fill{transform:none;transition:transform .26s var(--m7-expo)}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-paths .cks-paths__item:hover .m7-drop__dot{animation:m7-run-y .42s var(--m7-expo) both}
  body:not(.is-motion-paused):not([data-experience=standard]) .m7-paths .cks-paths__item:hover .m7-drop[data-axis=x] .m7-drop__dot{animation-name:m7-run-x}
}

@keyframes m7-draw{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes m7-wire{from{stroke-dasharray:360 360;stroke-dashoffset:360}to{stroke-dasharray:360 360;stroke-dashoffset:0}}
@keyframes m7-leader{from{stroke-dasharray:240 240;stroke-dashoffset:240}to{stroke-dasharray:240 240;stroke-dashoffset:0}}
@keyframes m7-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes m7-fade{from{opacity:0}}
@keyframes m7-led{from{opacity:.12}to{opacity:1}}
@keyframes m7-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes m7-blink{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes m7-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m7-run-y{0%{opacity:0;transform:translateY(0)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(var(--m7-len,28px))}}
@keyframes m7-run-x{0%{opacity:0;transform:translateX(0)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateX(var(--m7-len,20px))}}