/* AZ Class – per-step lesson animations (az-lesson-anim.js). Preview 2026-09-30. Extends clear-diagrams.css.
   Every motion is a decorative layer on top of a static state: with prefers-reduced-motion (or .rm) nothing
   moves, the final state of the last step shows, and the full text list is open. Logical properties only
   (RTL: the drawing stage is dir=ltr, controls follow the page direction). No style="" attributes (CSP). */
.azd-simple .azd-prog,.azd-simple .azd-hint{display:none}
.azd-simple .azd-now{font-size:17px;line-height:1.5}
.azd-simple .azd-now b{font-size:18px}
.azd-simple .azd-title{font-size:18px}
.azl-row{display:flex;margin-top:8px}
.azl-replay{font-size:15px;gap:8px}
.azl-replay span{font-size:20px;line-height:1}
html.lang-ur .azd-simple .azd-now,html.lang-pa .azd-simple .azd-now{line-height:1.95}
.azl .azd-svg [data-part]{transform-box:fill-box;transform-origin:center}
.azl .azd-svg [data-part].on .z-hold{opacity:1}
/* generic wobble (tap / push to test) */
.azl .azd-svg.z-wob [data-part].on{animation:z-wob .5s ease-in-out 3}
@keyframes z-wob{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,0) rotate(-3deg)}75%{transform:translate(3px,0) rotate(3deg)}}
/* steering wheel + horns */
.z-wheel{transition:transform .9s ease;transform-origin:110px 88px}
.azd-svg.z-turnL .z-wheel{transform:rotate(-70deg)}.azd-svg.z-turnR .z-wheel{transform:rotate(70deg)}
.z-wigm{opacity:0}.azd-svg.z-turnL .z-wigm,.azd-svg.z-turnR .z-wigm{opacity:.9}
.z-hw{opacity:0}
.azd-svg.z-honkC .z-hc,.azd-svg.z-honkH .z-hh{opacity:1;animation:azd-wave 1s ease-in-out infinite}
.z-w1{animation-delay:.15s!important}.z-w2{animation-delay:.3s!important}
/* wipers + washer */
.z-arm{transform-origin:200px 130px}
.azd-svg.z-sweep .z-arm{animation:z-sweep 2.2s ease-in-out infinite}
@keyframes z-sweep{0%,100%{transform:rotate(0)}50%{transform:rotate(-42deg)}}
.z-dirt{transition:opacity 1.6s ease .4s}.azd-svg.z-clean .z-dirt{opacity:0}
.z-d{opacity:0}.azd-svg.z-spray .z-d{opacity:1;animation:z-spray 1.1s ease-out infinite}
.z-d.q1{animation-delay:.2s!important}.z-d.q2{animation-delay:.4s!important}.z-d.q3{animation-delay:.1s!important}.z-d.q4{animation-delay:.3s!important}.z-d.q5{animation-delay:.5s!important}
@keyframes z-spray{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-34px);opacity:.1}}
/* fan + vent */
.z-fan{transform-origin:76px 150px}
.azd-svg.z-fan1 .z-fan{animation:z-spin 3s linear infinite}.azd-svg.z-fan2 .z-fan{animation:z-spin 1.3s linear infinite}.azd-svg.z-fan3 .z-fan{animation:z-spin .55s linear infinite}
@keyframes z-spin{to{transform:rotate(360deg)}}
.z-ptr{transform-origin:170px 150px;transition:transform .5s}
.azd-svg.z-fan1 .z-ptr{transform:rotate(-55deg)}.azd-svg.z-fan3 .z-ptr{transform:rotate(55deg)}
.z-fl{opacity:0;stroke-dasharray:8 6}
.azd-svg.z-flow .z-fl{opacity:1;animation:z-dash 1s linear infinite}
.z-fl.q1{animation-delay:.2s!important}.z-fl.q2{animation-delay:.4s!important}
@keyframes z-dash{to{stroke-dashoffset:-28}}
/* glass */
.z-crackg{opacity:0;transition:opacity .4s}.azd-svg.z-crack .z-crackg{opacity:1}
.azd-svg.z-crack .z-crackg path{animation:z-crack .6s ease-out both}
@keyframes z-crack{from{stroke-dasharray:0 200}to{stroke-dasharray:200 0}}
/* seat */
.z-seatg{transition:transform .8s ease}.azd-svg.z-slide .z-seatg{transform:translateX(10px)}
.z-slidem{opacity:0}.azd-svg.z-slide .z-slidem{opacity:1}
/* wheel end */
.z-leakg{opacity:0;transition:opacity .3s}.azd-svg.z-leak .z-leakg{opacity:1}
/* free play */
.azd-svg.z-fpb .azd-fp{transform:translateX(-10px)}.azd-svg.z-fpf .azd-fp{transform:translateX(10px)}
.azd-svg.z-m1 .azd-m1,.azd-svg.z-m2 .azd-m2{opacity:1}
/* cab controls */
.z-key{transform-origin:58px 62px;transition:transform .7s ease}.azd-svg.z-keyon .z-key{transform:rotate(55deg)}
.z-ew{opacity:0}.azd-svg.z-start .z-ew{opacity:1}
.azd-svg.z-start .z-eng{animation:z-shake .18s linear infinite}
@keyframes z-shake{0%,100%{transform:translate(0,0)}25%{transform:translate(1.5px,-1px)}75%{transform:translate(-1.5px,1px)}}
.z-knob{transition:transform .6s ease}.azd-svg.z-kout .z-knob{transform:translateY(14px)}
.z-stem{opacity:0;transition:opacity .3s}.azd-svg.z-kout .z-stem{opacity:1}
.z-pedal{transition:transform .5s ease}.azd-svg.z-press .z-pedal{transform:translateY(8px)}
.z-lever{transition:transform .7s ease}.azd-svg.z-neu .z-lever{transform:translateY(-16px)}
/* truck + trailer */
.z-gear{transition:transform .9s ease;transform:translateY(-18px)}.azd-svg.z-gdn .z-gear{transform:none}
.z-tr{transition:transform 1.4s ease}.azd-svg.z-far .z-tr{transform:translateX(48px)}.azd-svg.z-apart .z-tr{transform:translateX(18px)}
.z-gapg{opacity:0;transition:opacity .4s}.azd-svg.z-apart .z-gapg{opacity:1}
.z-chock{transition:transform .8s ease;transform:translateX(22px)}.azd-svg.z-chk .z-chock{transform:none}
.z-load{opacity:0}.azd-svg.z-load .z-load{opacity:1;animation:azd-wave 1.2s ease-in-out infinite}
.z-cone{opacity:0}.azd-svg.z-block .z-cone{opacity:1}
.azd-svg:not(.z-fwdm) [data-part="fwd"]{display:none}.azd-svg.z-fwdm [data-part="path"]{display:none}
.z-hr{opacity:0}.azd-svg.z-beep .z-hr{opacity:1;animation:azd-wave .5s ease-in-out infinite}
/* fifth wheel */
.z-cb{transition:transform .6s ease;transform:translateX(16px)}.azd-svg.z-cbin .z-cb{transform:none}
/* airbag */
.z-hs{opacity:0}.azd-svg.z-leakb .z-hs{opacity:1;animation:azd-wave .9s ease-in-out infinite}
.z-hs.q1{animation-delay:.2s!important}.z-hs.q2{animation-delay:.4s!important}
.z-cutm{opacity:0}.azd-svg.z-cut .z-cutm{opacity:1}
/* other side of the door */
.azd-svg .azd-art{transition:transform .7s ease}
.azd-svg.z-flip .azd-art{transform:scaleX(-1);transform-origin:162px 0}
/* sound toggle */
.azl-row{gap:8px;flex-wrap:wrap}
.azl-sound{font-size:15px;gap:8px}.azl-sound[aria-pressed="true"]{background:#D9B26A;color:#15110A;border-color:#F6E3B4}
.azl-si{font-size:18px;line-height:1}
/* (d) lesson-level steps: scene extras that must show only on the matching step */
.azl-x .azd-svg:not(.z-leakf) [data-part="under"] .azd-drip{display:none}
.azl-x .azd-svg:not(.z-smk) .azd-smoke{display:none}
.azl-x .azd-svg.z-blk .azd-smoke{fill:#2B2B30;fill-opacity:1;stroke:#9A9AA3;stroke-width:1.2}
.azl-x .azd-svg:not(.z-leakx) .z-xdrip{display:none}
.z-hw0,.z-sn0{opacity:0}.azd-svg.z-heat .z-hw0{opacity:1;animation:azd-wave 1.1s ease-in-out infinite}.azd-svg.z-sniff .z-sn0{opacity:1;animation:azd-wave 1.4s ease-in-out infinite}
.z-hw0.q1,.z-sn0.q1{animation-delay:.25s!important}.z-hw0.q2,.z-sn0.q2{animation-delay:.5s!important}
.azl-x .azd-svg [data-part="window"]{transition:transform .8s ease;transform-origin:50% 100%}.azd-svg.z-wl [data-part="window"]{transform:scaleY(.3)}
.azd-svg.z-xrun [data-part="engine"]{animation:z-shake .3s linear infinite}
.azl-x .azd-svg [data-part="cap"]{transition:transform .6s ease}.azd-svg.z-capoff [data-part="cap"]{transform:translateY(-12px) rotate(-14deg)}
.azl-x .azd-svg [data-part="door"],.azl-x .azd-svg [data-part="lock"],.azl-x .azd-svg [data-part="inner"],.azl-x .azd-svg [data-part="edge"],.azl-x .azd-svg [data-part="reflector"]{transform-box:view-box;transform-origin:92px 98px;transition:transform .8s ease}
.azd-svg.z-dopen [data-part="door"],.azd-svg.z-dopen [data-part="lock"],.azd-svg.z-dopen [data-part="inner"],.azd-svg.z-dopen [data-part="edge"],.azd-svg.z-dopen [data-part="reflector"]{transform:skewY(-5deg) scaleX(.72)}
.azd-svg.z-glow [data-part="reflector"]{animation:azd-blink 1s steps(2,end) infinite}
.azl-x .azd-svg.z-wob [data-part="inner"].on,.azl-x .azd-svg.z-wob [data-part="lock"].on{animation:none}
.azd.azh-off *,.azd.azh-off{animation-play-state:paused!important}
/* reduced motion: static states only (the state classes above still apply, the loops and sweeps do not) */
@media (prefers-reduced-motion:reduce){.azl *,.azl{animation:none!important;transition:none!important}.azl .z-hw,.azl .z-fl,.azl .z-d,.azl .z-hr,.azl .z-hs{transition:none}}
.azl.rm *{animation:none!important;transition:none!important}