/* AZ Class – lesson visuals (visuals.js). Premium dark + champagne gold. Animations only play while in view
   (.run), pause off-screen, restart on re-entry/tap, and are disabled for prefers-reduced-motion. */
.azv{margin:2px 0 16px;margin-inline-start:36px;max-width:460px;opacity:0;transform:translateY(8px);animation:azv-in .6s var(--ease,cubic-bezier(.22,1,.36,1)) .05s forwards}
.azv-art{position:relative;direction:ltr;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,rgba(217,178,106,.07),transparent 60%),linear-gradient(180deg,#121216,#0B0B0E);box-shadow:inset 0 0 0 1px rgba(217,178,106,.16),inset 0 1px 0 rgba(255,255,255,.04),0 18px 36px -24px rgba(0,0,0,.9)}
.azv-svg{display:block;width:100%;height:auto;overflow:visible}
.azv-svg text{font-family:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.azv-bg{fill:transparent;stroke:none}
.azv-num{font-size:13px;font-weight:650;letter-spacing:.01em}
.azv-tick{font-size:10.5px;font-weight:500;fill:rgba(244,241,234,.62)}
.azv-unit{font-size:9px;font-weight:600;letter-spacing:.16em;fill:#D9B26A;fill-opacity:.85}
.azv-chips{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
.azv-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;line-height:1.35;padding:6px 11px;border-radius:999px;background:rgba(217,178,106,.08);border:1px solid rgba(217,178,106,.3);color:#F2DCA6}
.azv-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;flex:none}
.azv-chip.ok{background:rgba(125,211,160,.08);border-color:rgba(125,211,160,.32);color:#9FE0B9}
.azv-chip.bad{background:rgba(240,138,128,.08);border-color:rgba(240,138,128,.32);color:#F5A59D}
html.lang-ur .azv-chip{line-height:1.9;padding:3px 12px}
.azv-replay{position:absolute;top:7px;inset-inline-end:7px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(217,178,106,.28);background:rgba(10,10,12,.6);color:#D9B26A;cursor:pointer;opacity:.55;transition:opacity .2s}
.azv-replay::before{content:"";position:absolute;inset:7px;border:1.6px solid currentColor;border-radius:50%;border-top-color:transparent}
.azv-replay::after{content:"";position:absolute;top:5px;left:13px;border:4px solid transparent;border-left-color:currentColor;transform:rotate(-20deg)}
.azv-replay:hover,.azv-replay:focus-visible{opacity:1}
ul.check li:has(.azv) label{border-bottom:0}
ul.check li:has(.azv){border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
ul.check li:has(.azv):last-child{border-bottom:0}
@media (max-width:420px){.azv{margin-inline-start:0}}
@keyframes azv-in{to{opacity:1;transform:none}}

/* play state */
.azv:not(.run) .azv-svg *,.azv:not(.run) .azv-chip{animation-play-state:paused!important}
.azv.azv-reset .azv-svg *,.azv.azv-reset .azv-chip{animation:none!important}
.azv-chip{animation:azv-chip .5s var(--ease,ease) both}.azv-chip:nth-child(2){animation-delay:.15s}.azv-chip:nth-child(3){animation-delay:.3s}
@keyframes azv-chip{from{opacity:0;transform:translateY(4px)}}

/* generic motion */
.azv-needle{transform:rotate(var(--a));animation:azv-sweep 1.9s cubic-bezier(.3,.7,.2,1) .25s both}
@keyframes azv-sweep{0%{transform:rotate(var(--a0))}62%{transform:rotate(calc(var(--a) + 6deg))}80%{transform:rotate(calc(var(--a) - 2deg))}92%{transform:rotate(calc(var(--a) + .6deg))}100%{transform:rotate(var(--a))}}
.azv-needle-loop{animation:azv-build 3.4s cubic-bezier(.45,0,.55,1) .2s infinite both}
@keyframes azv-build{0%,12%{transform:rotate(var(--a0))}82%,100%{transform:rotate(var(--a))}}
.azv-needle-fall{animation:azv-fall 4.4s ease-in-out .2s infinite both}
@keyframes azv-fall{0%,10%{transform:rotate(var(--a0))}22%,30%{transform:rotate(calc(var(--a0) + (var(--a) - var(--a0)) * .3))}42%,50%{transform:rotate(calc(var(--a0) + (var(--a) - var(--a0)) * .62))}62%,92%{transform:rotate(var(--a))}100%{transform:rotate(var(--a0))}}
.azv-pump{animation:azv-pump 4.4s ease-in-out .2s infinite both}
@keyframes azv-pump{0%,10%,22%,30%,42%,50%,62%,100%{transform:rotate(0)}16%,36%,56%{transform:rotate(16deg)}}
.azv-k-lowair .azv-needle-fall~* .azv-blink{animation-delay:0s}
.azv-blink{animation:azv-blink 1.1s steps(1,end) infinite both}
.azv-lamp{animation:azv-lamp 1.1s steps(1,end) infinite both}
.azv-lamp-a{animation:azv-lamp 1.1s steps(1,end) infinite both}
@keyframes azv-blink{0%{opacity:1}50%{opacity:.08}}
@keyframes azv-lamp{0%{fill-opacity:1}50%{fill-opacity:.28}}
.azv-wave{animation:azv-wave 1.6s ease-out infinite both}.azv-wave.w1{animation-delay:.25s}.azv-wave.w2{animation-delay:.5s}
@keyframes azv-wave{0%{opacity:0;transform:translateX(-4px)}30%{opacity:1}100%{opacity:0;transform:translateX(6px)}}
.azv-pulse,.azv-pulse-o{transform-box:fill-box;transform-origin:center}
.azv-pulse{animation:azv-pulse 1.6s ease-in-out infinite both}
@keyframes azv-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.75}}
.azv-pulse-o{animation:azv-pulse-o 1.8s ease-in-out infinite both}
@keyframes azv-pulse-o{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.azv-pulse-x{animation:azv-px 1.4s ease-in-out 1.4s infinite both}
@keyframes azv-px{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.azv-callout{animation:azv-fade .5s ease .8s both}
@keyframes azv-fade{from{opacity:0}}
.azv-draw{stroke-dasharray:1;stroke-dashoffset:0;animation:azv-draw .8s cubic-bezier(.65,0,.35,1) .8s both}
@keyframes azv-draw{from{stroke-dashoffset:1}}
.azv-band{animation:azv-band 2.4s ease-in-out .9s infinite both}
@keyframes azv-band{0%,100%{opacity:1}50%{opacity:.6}}
.azv-ring{stroke-dashoffset:0;animation:azv-ring 3.2s linear .3s both}
@keyframes azv-ring{from{stroke-dashoffset:var(--c)}}
.azv-timer-loop .azv-ring{animation:azv-ringloop 3.4s cubic-bezier(.45,0,.55,1) .2s infinite both}
@keyframes azv-ringloop{0%,12%{stroke-dashoffset:var(--c)}82%,100%{stroke-dashoffset:0}}
.azv-puff{animation:azv-puff 1.3s ease-out infinite both}
.q0{--dx:22px;--dy:-16px}.q1{--dx:28px;--dy:4px;animation-delay:.2s!important}.q2{--dx:18px;--dy:18px;animation-delay:.4s!important}.q3{--dx:30px;--dy:-6px;animation-delay:.6s!important}.q4{--dx:14px;--dy:-24px;animation-delay:.8s!important}.q5{--dx:24px;--dy:22px;animation-delay:1s!important}
@keyframes azv-puff{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.6)}}
.azv-ear{animation:azv-ear 1.6s ease-in-out infinite both;transform-box:fill-box;transform-origin:center}
@keyframes azv-ear{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.azv-fill{animation:azv-fillup 4s cubic-bezier(.3,.6,.2,1) .3s infinite both}
@keyframes azv-fillup{0%{transform:scaleY(0)}55%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.azv-scan{animation:azv-scan 3.2s ease-in-out infinite alternate both}
@keyframes azv-scan{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.azv-orbit{animation:azv-orbit 3.6s linear infinite both}
@keyframes azv-orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.azv-orbit-line{animation:azv-oline 2.6s ease-in-out infinite alternate both}
@keyframes azv-oline{from{stroke-dashoffset:30}to{stroke-dashoffset:-240}}
/* pushrod */
.azv-apply{transform:translateX(20px);animation:azv-apply 4.2s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-apply{0%,18%{transform:translateX(0)}36%,82%{transform:translateX(20px)}96%,100%{transform:translateX(0)}}
.azv-arm{transform:rotate(18deg);animation:azv-arm 4.2s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-arm{0%,18%{transform:rotate(0)}36%,82%{transform:rotate(18deg)}96%,100%{transform:rotate(0)}}
.azv-measure{animation:azv-meas 4.2s ease .2s infinite both}
@keyframes azv-meas{0%,38%{opacity:0}46%,80%{opacity:1}90%,100%{opacity:0}}
.azv-drawmark{animation:azv-mark 2.6s cubic-bezier(.65,0,.35,1) .3s infinite both}
@keyframes azv-mark{0%{transform:scaleY(0)}35%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.azv-caliper{animation:azv-pulse-o 1.8s ease-in-out infinite both}
.azv-swing-tag{animation:azv-tag 2.4s ease-in-out infinite alternate both}
@keyframes azv-tag{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
/* brake buddy */
.azv-extend{transform:translateX(9px);animation:azv-ext 3.6s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-ext{0%,15%{transform:translateX(0)}40%,85%{transform:translateX(9px)}100%{transform:translateX(0)}}
.azv-brakepedal{transform:rotate(-8deg);animation:azv-bped 3.6s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-bped{0%,22%{transform:rotate(0)}42%,85%{transform:rotate(-8deg)}100%{transform:rotate(0)}}
/* tread gauge */
.azv-tg-drop{animation:azv-tgd 5s cubic-bezier(.3,.7,.2,1) .2s infinite both}
@keyframes azv-tgd{0%{transform:translateY(-46px);opacity:0}8%{opacity:1}28%,90%{transform:translateY(0);opacity:1}100%{transform:translateY(-46px);opacity:0}}
.azv-tg-probe{animation:azv-tgp 5s cubic-bezier(.3,.7,.2,1) .2s infinite both}
@keyframes azv-tgp{0%,30%{transform:translateY(-34px)}48%,90%{transform:translateY(0)}100%{transform:translateY(-34px)}}
.azv-tg-ind{animation:azv-tgi 5s cubic-bezier(.3,.7,.2,1) .2s infinite both}
@keyframes azv-tgi{0%,30%{transform:translateY(40px)}48%,90%{transform:translateY(0)}100%{transform:translateY(40px)}}
.azv-glownut{animation:azv-gn 1.8s ease-in-out infinite both}
@keyframes azv-gn{0%,100%{opacity:1}50%{opacity:.55}}
/* inflation */
.azv-sag{transform:scale(1.12,.86);animation:azv-sag 3.4s ease-in-out .2s infinite alternate both}
@keyframes azv-sag{0%,15%{transform:scale(1,1)}85%,100%{transform:scale(1.12,.86)}}
.azv-breathe{animation:azv-br 3.4s ease-in-out infinite alternate both}
@keyframes azv-br{from{transform:scale(1)}to{transform:scale(1.015)}}
/* lug nuts: a hand visits each fastener in turn, each one lights as it is checked */
.azv-hand{animation:azv-hand 6s cubic-bezier(.65,0,.35,1) infinite both}
@keyframes azv-hand{0%,6%{transform:rotate(0deg)}10%,16%{transform:rotate(36deg)}20%,26%{transform:rotate(72deg)}30%,36%{transform:rotate(108deg)}40%,46%{transform:rotate(144deg)}50%,56%{transform:rotate(180deg)}60%,66%{transform:rotate(216deg)}70%,76%{transform:rotate(252deg)}80%,86%{transform:rotate(288deg)}90%,96%{transform:rotate(324deg)}100%{transform:rotate(360deg)}}
@keyframes azv-lug0{0%,2%{opacity:0}5%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l0 circle{animation:azv-lug0 6s linear infinite both}
@keyframes azv-lug1{0%,12%{opacity:0}15%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l1 circle{animation:azv-lug1 6s linear infinite both}
@keyframes azv-lug2{0%,22%{opacity:0}25%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l2 circle{animation:azv-lug2 6s linear infinite both}
@keyframes azv-lug3{0%,32%{opacity:0}35%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l3 circle{animation:azv-lug3 6s linear infinite both}
@keyframes azv-lug4{0%,42%{opacity:0}45%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l4 circle{animation:azv-lug4 6s linear infinite both}
@keyframes azv-lug5{0%,52%{opacity:0}55%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l5 circle{animation:azv-lug5 6s linear infinite both}
@keyframes azv-lug6{0%,62%{opacity:0}65%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l6 circle{animation:azv-lug6 6s linear infinite both}
@keyframes azv-lug7{0%,72%{opacity:0}75%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l7 circle{animation:azv-lug7 6s linear infinite both}
@keyframes azv-lug8{0%,82%{opacity:0}85%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l8 circle{animation:azv-lug8 6s linear infinite both}
@keyframes azv-lug9{0%,92%{opacity:0}95%{opacity:1}94%{opacity:.75}100%{opacity:0}}.azv-k-lugs .azv-lug.l9 circle{animation:azv-lug9 6s linear infinite both}
@keyframes azv-fb0{0%,10%{opacity:0}16%{opacity:1}92%{opacity:.7}100%{opacity:0}}.azv-k-fifthwheel .azv-lug.l0 circle{animation:azv-fb0 5s linear infinite both}
@keyframes azv-fb1{0%,22%{opacity:0}28%{opacity:1}92%{opacity:.7}100%{opacity:0}}.azv-k-fifthwheel .azv-lug.l1 circle{animation:azv-fb1 5s linear infinite both}
@keyframes azv-fb2{0%,34%{opacity:0}40%{opacity:1}92%{opacity:.7}100%{opacity:0}}.azv-k-fifthwheel .azv-lug.l2 circle{animation:azv-fb2 5s linear infinite both}
@keyframes azv-fb3{0%,46%{opacity:0}52%{opacity:1}92%{opacity:.7}100%{opacity:0}}.azv-k-fifthwheel .azv-lug.l3 circle{animation:azv-fb3 5s linear infinite both}
@keyframes azv-fb4{0%,58%{opacity:0}64%{opacity:1}92%{opacity:.7}100%{opacity:0}}.azv-k-fifthwheel .azv-lug.l4 circle{animation:azv-fb4 5s linear infinite both}
@keyframes azv-fb5{0%,70%{opacity:0}76%{opacity:1}92%{opacity:.7}100%{opacity:0}}.azv-k-fifthwheel .azv-lug.l5 circle{animation:azv-fb5 5s linear infinite both}
/* hub oil */
.azv-slosh{animation:azv-slosh 3s ease-in-out infinite alternate both}
@keyframes azv-slosh{0%{transform:rotate(-4deg) translateY(1px)}100%{transform:rotate(4deg) translateY(-1.5px)}}
/* glad hands */
.azv-gh-off{transform:translate(34px,-6px) rotate(-8deg);animation:azv-ghoff 4.4s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-ghoff{0%,20%{transform:none}42%,84%{transform:translate(34px,-6px) rotate(-8deg)}100%{transform:none}}
.azv-k-gladhands .azv-puff{animation-duration:4.4s}
.azv-k-gladhands .azv-puff{animation-name:azv-ghpuff}
@keyframes azv-ghpuff{0%,22%{opacity:0;transform:translate(0,0) scale(.6)}28%{opacity:.85}52%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.8)}}
.azv-gh-on{animation:azv-ghon 4.4s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-ghon{0%,20%{transform:translate(34px,-6px) rotate(-8deg)}46%,100%{transform:none}}
.azv-click{opacity:0;animation:azv-click 4.4s ease-out .2s infinite both}
@keyframes azv-click{0%,46%{opacity:0;transform:scale(.5)}50%{opacity:1}70%,100%{opacity:0;transform:scale(1.7)}}
/* fifth wheel */
.azv-kp-in{animation:azv-kpin 5s cubic-bezier(.3,.7,.2,1) .2s infinite both}
@keyframes azv-kpin{0%{transform:translateY(74px);opacity:0}8%{opacity:1}32%,94%{transform:none;opacity:1}100%{opacity:0}}
.azv-jaw-l{animation:azv-jl 5s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-jl{0%,34%{transform:rotate(-50deg)}46%,100%{transform:none}}
.azv-jaw-r{animation:azv-jr 5s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-jr{0%,34%{transform:rotate(50deg)}46%,100%{transform:none}}
.azv-handle-in{animation:azv-hin 5s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-hin{0%,44%{transform:translateX(-18px)}58%,100%{transform:none}}
.azv-handle-out{transform:translateX(-18px);animation:azv-hout 5s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-hout{0%,10%{transform:none}24%,90%{transform:translateX(-18px)}100%{transform:none}}
.azv-jaw-open-l{transform:rotate(-50deg);animation:azv-jol 5s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-jol{0%,24%{transform:none}36%,90%{transform:rotate(-50deg)}100%{transform:none}}
.azv-jaw-open-r{transform:rotate(50deg);animation:azv-jor 5s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-jor{0%,24%{transform:none}36%,90%{transform:rotate(50deg)}100%{transform:none}}
.azv-kp-out{transform:translateY(74px);opacity:0;animation:azv-kpout 5s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-kpout{0%,38%{transform:none;opacity:1}70%{opacity:0}70%,100%{transform:translateY(74px);opacity:0}}
/* tug test */
.azv-tug{animation:azv-tug 4s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-tug{0%,8%,26%,38%,56%,100%{transform:none}15%,19%,45%,49%{transform:translateX(7px)}}
.azv-nudge{animation:azv-nudge 4s ease .2s infinite both}
@keyframes azv-nudge{0%,8%,26%,38%,56%,100%{opacity:.25;transform:none}15%,45%{opacity:1;transform:translateX(5px)}}
.azv-count{opacity:1}.azv-count.c1{animation:azv-c1 4s ease .2s infinite both}.azv-count.c2{animation:azv-c2 4s ease .2s infinite both}
@keyframes azv-c1{0%,12%{opacity:0}18%,92%{opacity:1}100%{opacity:0}}
@keyframes azv-c2{0%,42%{opacity:0}48%,92%{opacity:1}100%{opacity:0}}
/* free play */
.azv-fp-move{transform:translateX(10px);animation:azv-fpm 6s cubic-bezier(.65,0,.35,1) .2s infinite both}
@keyframes azv-fpm{0%{transform:none}12%,36%{transform:translateX(-10px)}50%,92%{transform:translateX(10px)}100%{transform:none}}
.azv-fp-m1,.azv-fp-m2{transform-box:fill-box;transform-origin:top}
.azv-fp-m1{animation:azv-fpm1 6s ease .2s infinite both}
@keyframes azv-fpm1{0%,16%{transform:scaleY(0)}26%,94%{transform:none;opacity:1}100%{opacity:0}}
.azv-fp-m2{animation:azv-fpm2 6s ease .2s infinite both}
@keyframes azv-fpm2{0%,52%{transform:scaleY(0)}62%,94%{transform:none;opacity:1}100%{opacity:0}}
.azv-fp-br,.azv-k-freeplay .azv-callout{animation:azv-fpb 6s ease .2s infinite both}
@keyframes azv-fpb{0%,62%{opacity:0}70%,94%{opacity:1}100%{opacity:0}}
.azv-k-freeplay .azv-draw{animation:none}
.azv-fp-arrows{animation:azv-fpa 6s ease .2s infinite both}
@keyframes azv-fpa{0%,4%{opacity:.2}10%{opacity:1}36%{opacity:.2}}

@media (prefers-reduced-motion:reduce){.azv,.azv *,.azv-chip{animation:none!important;transition:none!important}.azv{opacity:1;transform:none}}