/* az-motion.css v1 (PREVIEW) - additive motion layer for az.kngx.ca. Loads LAST (after kngx-trucks.css).
   Everything is gated behind html.azm-on, which az-motion.js sets only when JS runs AND prefers-reduced-motion is
   not "reduce". No class, no motion: the site renders exactly as today. No inline styles, no @import, no fonts.
   Hidden "before" states exist only under .azm-on; transform/opacity/translate only (two documented paint-only
   exceptions: the gold text shimmer and the CTA glow, both on one small element). Logical props + --azm-dir for RTL. */
:root{--azm-dir:1;--azm-e:cubic-bezier(.22,1,.36,1)}
html[dir=rtl]{--azm-dir:-1}
.azm-d1{--azm-dly:.08s}.azm-d2{--azm-dly:.16s}.azm-d3{--azm-dly:.24s}.azm-d4{--azm-dly:.32s}.azm-d5{--azm-dly:.4s}
.azm-d6{--azm-dly:.48s}.azm-d7{--azm-dly:.56s}.azm-d8{--azm-dly:.64s}.azm-d9{--azm-dly:.72s}

/* ---- 1. hero headline: word-by-word rise + gold shimmer on "AZ test" ---- */
html.azm-on .lp .hero h1.azm-h1>span,html.azm-on .lp .hero h1.azm-h1>em{animation:none}
html.azm-on .azm-h1 .azm-w{display:inline-block;animation:azm-word .9s var(--azm-e) calc(.22s + var(--azm-dly,0s)) both}
html.azm-on:not(.lang-ur) .azm-h1 .accent .azm-w{
  background-image:linear-gradient(105deg,transparent 38%,rgba(255,250,232,.95) 50%,transparent 62%),var(--gold-grad);
  background-size:250% 100%,100% 100%;background-repeat:no-repeat;background-position:100% 0,0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:azm-word .9s var(--azm-e) calc(.22s + var(--azm-dly,0s)) both,azm-shim 7s ease-in-out calc(1.7s + var(--azm-dly,0s)) infinite}
html.azm-on .azm-h1 em.accent{background:none}
html.azm-on .azm-h1 .accent .azm-w:last-of-type{padding-inline-end:.07em}
html.azm-on.lang-ur .azm-h1 .accent{color:var(--gold,#D9B26A);-webkit-text-fill-color:currentColor}
@keyframes azm-word{from{opacity:0;transform:translate3d(0,.4em,0) rotate(1.2deg)}to{opacity:1;transform:none}}
@keyframes azm-shim{0%{background-position:100% 0,0 0}16%,100%{background-position:0 0,0 0}}
/* kicker rule draws in from the inline-start side; late hero pieces (steps, email form) follow the lede/CTAs */
html.azm-on .lp .hero .kicker::before{transform-origin:0 50%;animation:azm-line .8s var(--azm-e) .15s both}
html[dir=rtl].azm-on .lp .hero .kicker::before{transform-origin:100% 50%}
@keyframes azm-line{from{transform:scaleX(0)}to{transform:none}}
html.azm-on .azm-hl{animation:azm-rise .9s var(--azm-e) calc(.85s + var(--azm-dly,0s)) both}
@keyframes azm-rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* ---- 2. CTA buttons: pulse-glow on the main Subscribe, arrow nudge, press ripple ---- */
html.azm-on .btn.azm-pulse.azm-live{animation:azm-glow 3.2s ease-in-out 1.6s infinite}
html.azm-on .btn.azm-pulse.azm-live:is(:hover,:focus-visible,:active){animation:none}
@keyframes azm-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.18),0 0 0 1px rgba(217,178,106,.45),0 12px 32px -14px rgba(217,178,106,.6),0 0 0 0 rgba(217,178,106,.32)}
  55%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.18),0 0 0 1px rgba(217,178,106,.7),0 14px 40px -10px rgba(217,178,106,.85),0 0 0 11px rgba(217,178,106,0)}}
html.azm-on .btn.azm-pulse.azm-live .ic.flip{animation:azm-nudge 3.2s ease-in-out 1.6s infinite}
html.azm-on .btn.azm-pulse.azm-live:is(:hover,:focus-visible,:active) .ic.flip{animation:none}
@keyframes azm-nudge{0%,62%,100%{translate:0 0}74%{translate:calc(var(--azm-dir) * 4px) 0}86%{translate:0 0}}
html.azm-on .azm-rip{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.4);
  transform:scale(0);opacity:1;animation:azm-ripple .65s var(--azm-e) both}
html.azm-on .btn-ghost .azm-rip{background:rgba(217,178,106,.26)}
@keyframes azm-ripple{to{transform:scale(1);opacity:0}}

/* ---- 3. scroll reveals for blocks the site does not already reveal (translate/opacity only) ---- */
html.azm-on .azm-rv:not(.azm-in){opacity:0;translate:0 14px}
html.azm-on .azm-rv.azm-side:not(.azm-in){translate:calc(var(--azm-dir) * -22px) 0}
html.azm-on .azm-rv.azm-pop:not(.azm-in){translate:none;scale:.94}
html.azm-on .azm-rv{transition:opacity .8s var(--azm-e) var(--azm-dly,0s),translate .8s var(--azm-e) var(--azm-dly,0s),scale .9s var(--azm-e) var(--azm-dly,0s)}
/* accents that hang off the site's own reveal class (.in) */
html.azm-on .feat.in .feat-ic{animation:azm-pop .7s var(--azm-e) .15s both}
html.azm-on .step.in .step-n{animation:azm-pop .8s var(--azm-e) .1s both}
html.azm-on .price-card.in::before{transform-origin:50% 50%;animation:azm-line 1.3s var(--azm-e) .3s both}
html.azm-on .price-card.in .chk-dot{animation:azm-pop .6s var(--azm-e) .35s both}
@keyframes azm-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (hover:hover){
  html.azm-on .lp .feat-ic{transition:translate .45s var(--azm-e),scale .45s var(--azm-e)}
  html.azm-on .lp .feat:hover .feat-ic{translate:0 -2px;scale:1.07}
}

/* ---- 4. "See the app in 30 seconds": phone float (translate) + scroll parallax (transform, set by JS) + progress ring ---- */
html.azm-on .cl-demo-frame.azm-live{animation:azm-float 7s ease-in-out infinite}
@keyframes azm-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
.azm-ring{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);overflow:visible;pointer-events:none;transform:scaleX(var(--azm-dir))}
.azm-ring rect{fill:none;stroke-width:1.5;stroke-linecap:round}
.azm-ring-t{stroke:rgba(217,178,106,.13)}
.azm-ring-a{stroke:#D9B26A;stroke-dasharray:1;stroke-dashoffset:.17;filter:drop-shadow(0 0 4px rgba(217,178,106,.55))}
html.azm-on .azm-ring-a{stroke-dashoffset:1}
html.azm-on .azm-rg .azm-ring-a{stroke-dashoffset:.17;transition:stroke-dashoffset 1.8s var(--azm-e) .35s}

/* ---- 5. hero background: green bars breathe like an equalizer; trucks parallax is JS-driven (.kx-fleet translate) ---- */
html.azm-on .kx-scene .kx-city-move rect[fill="#4ade80"]{transform-box:fill-box;transform-origin:50% 100%;animation:azm-eq 2.6s ease-in-out infinite alternate}
html.azm-on .kx-scene .kx-city-move rect[fill="#4ade80"]:nth-child(3n){animation-duration:3.4s;animation-delay:-1.1s}
html.azm-on .kx-scene .kx-city-move rect[fill="#4ade80"]:nth-child(3n+1){animation-duration:2.1s;animation-delay:-.6s}
html.azm-on .kx-scene .kx-city-move rect[fill="#4ade80"]:nth-child(5n){animation-duration:4s;animation-delay:-2.2s}
@keyframes azm-eq{from{transform:scaleY(.84)}to{transform:scaleY(1.05)}}

/* ---- 6. footer + links + closing CTA glow ---- */
html.azm-on .lp .sp-legal-links a{position:relative;text-decoration:none}
html.azm-on .lp .sp-legal-links a::after,html.azm-on .lp .sp-legal-links a::before{content:"";position:absolute;inset-inline:0;bottom:-2px;height:1px;background:currentColor}
html.azm-on .lp .sp-legal-links a::after{opacity:.35}
html.azm-on .lp .sp-legal-links a::before{background:var(--gold-hi,#F2DCA6);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--azm-e);z-index:1}
html[dir=rtl].azm-on .lp .sp-legal-links a::before{transform-origin:100% 50%}
html.azm-on .lp .sp-legal-links a:is(:hover,:focus-visible)::before{transform:none}
html.azm-on .lp .final{isolation:isolate}
html.azm-on .lp .final::before{content:"";position:absolute;z-index:-1;inset-inline:0;bottom:0;height:70%;pointer-events:none;
  background:radial-gradient(520px 260px at 50% 100%,rgba(217,178,106,.16),transparent 70%);opacity:0}
html.azm-on .lp .final.azm-live::before{animation:azm-breathe 5s ease-in-out infinite}
@keyframes azm-breathe{0%,100%{opacity:.25}50%{opacity:1}}
html.azm-on #app>.muted.pad:only-child{animation:azm-breathe 1.6s ease-in-out infinite}

/* ---- 7. language switch: fade the old screen out (JS re-fires the click), the site's own screen-in fades the new one in ---- */
html.azm-on #app.azm-lo .wrap{opacity:0;translate:0 5px;transition:opacity .14s ease-in,translate .14s ease-in}
html.azm-on #app.azm-lo{pointer-events:none}

/* ---- tab hidden: pause every loop of this layer (JS toggles html.azm-idle) ---- */
html.azm-idle :is(.azm-w,.azm-hl,.azm-live,.azm-live .ic,.azm-ring-a,.azm-rip,.kx-city-move rect){animation-play-state:paused!important}

/* ---- reduced motion: no motion at all, final state (JS also never adds .azm-on) ---- */
@media (prefers-reduced-motion:reduce){
  :is(.azm-w,.azm-hl,.azm-live,.azm-live .ic,.azm-rv,.azm-ring-a,.azm-rip,.azm-h1 .accent .azm-w,.lp .hero .kicker::before,.feat-ic,.step-n,.chk-dot,.final::before,.kx-city-move rect){animation:none!important;transition:none!important}
  .azm-rv{opacity:1!important;translate:none!important}
  .azm-ring-a{stroke-dashoffset:.17!important}
  .azm-rip{display:none!important}
}