/* KGS Shifting FX — truck + page transition (GPU-friendly: only transform/opacity animate) */

html.kgs-xfer-in body::after{
  content:"";position:fixed;inset:0;z-index:99999;
  background:linear-gradient(160deg,#0b1b4a,#1a56db 60%,#2f6bf0);
}
html.kgs-xfer-lock{overflow:hidden}

.kgs-xfer{position:fixed;inset:0;z-index:100000;overflow:hidden;pointer-events:all;
  --tw:clamp(230px,34vw,400px);--tile:clamp(520px,58vw,880px);contain:strict}
.kgs-xfer-curtain{position:absolute;top:0;bottom:0;left:0;background:#1a56db;will-change:transform;
  clip-path:polygon(0 0,100% 0,calc(100% - 180px) 100%,0 100%)}
.kgs-xfer.reveal .kgs-xfer-curtain{clip-path:polygon(180px 0,100% 0,100% 100%,0 100%)}
.kgs-xfer-inner{position:absolute;top:0;left:0;height:100%;will-change:transform;
  background:linear-gradient(160deg,#0b1b4a 0%,#1a56db 60%,#2f6bf0 100%);overflow:hidden}
.kgs-xfer-city{position:absolute;left:0;right:0;bottom:calc(42% - 4px);height:34%;opacity:.3}
.kgs-xfer-city svg{width:100%;height:100%;display:block}
.kgs-xfer-road{position:absolute;left:0;right:0;top:58%;height:78px;background:linear-gradient(#0d1636,#050a1c);
  border-top:3px solid #3a4c80;overflow:hidden}
.kgs-xfer-dash{position:absolute;left:0;top:44px;height:4px;width:calc(100% + 60px);will-change:transform;
  background:repeating-linear-gradient(90deg,#f6c667 0 30px,transparent 30px 60px);animation:kgsDash .2s linear infinite}
.kgs-xfer-near{position:absolute;left:0;bottom:calc(42% - 40px);display:flex;width:max-content;pointer-events:none;
  animation:kgsNear .5s linear infinite;will-change:transform}
.kgs-xfer-near>div{flex:0 0 var(--tile);width:var(--tile);line-height:0}
.kgs-xfer-near svg{width:100%;height:auto;display:block}
.kgs-xfer-streaks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kgs-xfer-streaks i{position:absolute;left:100%;height:2px;width:22vw;border-radius:2px;will-change:transform;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5));animation:kgsStreak .3s linear infinite}
.kgs-xfer-streaks i:nth-child(1){top:30%;animation-delay:0s}
.kgs-xfer-streaks i:nth-child(2){top:40%;animation-delay:.1s;width:30vw}
.kgs-xfer-streaks i:nth-child(3){top:72%;animation-delay:.06s;width:26vw}
.kgs-xfer-streaks i:nth-child(4){top:84%;animation-delay:.18s}
.kgs-xfer-msg{position:absolute;left:0;right:0;top:calc(58% + 104px);text-align:center;color:rgba(255,255,255,.9);
  font:600 15px/1.4 var(--font,'DM Sans',sans-serif);letter-spacing:.2px}
.kgs-xfer-msg{animation:kgsPulse .8s ease-in-out infinite alternate}
@keyframes kgsPulse{from{opacity:.55}to{opacity:1}}
.kgs-xfer-msg b{color:#fcd34d;font-weight:800}
.kgs-xfer-truck{position:absolute;left:0;top:calc(58% + 62px - var(--tw) * .372);width:var(--tw);will-change:transform}
@keyframes kgsDash{to{transform:translate3d(-60px,0,0)}}
@keyframes kgsNear{to{transform:translate3d(calc(var(--tile) * -1),0,0)}}
@keyframes kgsStreak{from{transform:translate3d(0,0,0)}to{transform:translate3d(-140vw,0,0)}}

/* ── Truck (wrap = bob + tilt, wheels are separate composited layers) ── */
.kt-wrap{position:relative;width:100%;aspect-ratio:394/150;animation:ktBob .4s ease-in-out infinite alternate;will-change:transform}
.kt-wrap.kt-fast{animation-duration:.26s}
.kt-svg{display:block;width:100%;height:100%;overflow:visible}
.kgs-xfer-truck .kt-wrap{transform:perspective(700px) rotateY(-12deg);transform-origin:50% 100%}
@keyframes ktBob{from{translate:0 0}to{translate:0 -1.6px}}
.kt-wheel{position:absolute;top:71.33%;width:10.66%;aspect-ratio:1;will-change:transform;animation:ktSpin .5s linear infinite}
.kt-wheel.w1{left:23.1%}.kt-wheel.w2{left:66.75%}
.kt-wheel svg{display:block;width:100%;height:100%}
.kt-wrap.kt-fast .kt-wheel{animation-duration:.26s}
.kt-wrap.kt-js .kt-wheel{animation:none}
@keyframes ktSpin{to{transform:rotate(360deg)}}
.kt-puff{opacity:0;transform-box:fill-box;transform-origin:center;animation:ktPuff 1.4s ease-out infinite}
.kt-puff.p2{animation-delay:.7s}.kt-puff.p3{display:none}
@keyframes ktPuff{0%{opacity:.45;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-26px,-16px) scale(2.2)}}

.kt-item{transform:translateY(-46px);opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}
.kt-item.on{transform:none;opacity:1}

.kt-worker{opacity:0;transform:translateX(-26px);transition:opacity .4s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.has-labour .kt-worker{opacity:1;transform:none}
.kt-worker-in{animation:ktWalk .5s ease-in-out infinite alternate}
@keyframes ktWalk{from{transform:translateY(0)}to{transform:translateY(-1.8px)}}
.kt-leg{transform-box:fill-box;transform-origin:50% 0;animation:ktLeg .5s ease-in-out infinite alternate}
.kt-leg.l2{animation-direction:alternate-reverse}
@keyframes ktLeg{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}

@media (prefers-reduced-motion:reduce){
  .kt-wrap,.kt-wheel,.kt-puff,.kt-worker-in,.kt-leg,.kgs-xfer-msg,.kgs-xfer-dash,.kgs-xfer-near,.kgs-xfer-streaks i{animation:none !important}
  .kt-item{transition:none}
}