/* truck.css — scroll-driven truck scene (pinned) */
.truck-scene{position:relative;height:420vh;background:#0b1220;direction:ltr}
.ts-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ts-bg{position:absolute;inset:0 -4%;background:url(assets/truck/road-bg.webp) center/cover no-repeat;will-change:transform}
.ts-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,18,.18),rgba(7,10,18,0) 30%,rgba(7,10,18,0) 70%,rgba(7,10,18,.28))}
.ts-truck{position:absolute;left:0;bottom:9vh;width:clamp(460px,72vw,1180px);aspect-ratio:1756/730;will-change:transform;transform:translate3d(-110%,0,0)}
.ts-body{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;filter:drop-shadow(0 22px 22px rgba(0,0,0,.35));pointer-events:none;user-select:none}
.ts-wheel{position:absolute;z-index:1;width:10.71%;aspect-ratio:1;top:calc(621/730*100% - 12.88%);will-change:transform;pointer-events:none;user-select:none}
.ts-wheel.rear{left:calc(391/1756*100% - 5.355%)}
.ts-wheel.front{left:calc(1462/1756*100% - 5.355%)}
.ts-shadow{position:absolute;left:2%;right:2%;bottom:0;height:4%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);filter:blur(6px);z-index:0}
@media(prefers-reduced-motion:reduce){
  .truck-scene{height:auto}
  .ts-sticky{position:relative;height:70vh}
  .ts-truck{left:50%;transform:translateX(-50%)!important}
}

/* ===== parallax layers + sky headline ===== */
.ts-bg{inset:-3% -6%}
.ts-clouds{position:absolute;left:-20%;width:140%;pointer-events:none;will-change:transform}
.ts-clouds i{position:absolute;display:block;border-radius:50%;filter:blur(18px);
  background:radial-gradient(ellipse at 50% 55%,rgba(255,255,255,.85),rgba(255,255,255,.35) 45%,transparent 72%)}
.ts-clouds.far{top:2vh;height:34vh;opacity:.55}
.ts-clouds.far i:nth-child(1){left:6%;top:14%;width:26vw;height:9vh}
.ts-clouds.far i:nth-child(2){left:38%;top:4%;width:32vw;height:11vh}
.ts-clouds.far i:nth-child(3){left:66%;top:20%;width:24vw;height:8vh}
.ts-clouds.far i:nth-child(4){left:88%;top:6%;width:20vw;height:7vh}
.ts-clouds.near{top:6vh;height:30vh;opacity:.5;z-index:1}
.ts-clouds.near i{filter:blur(26px)}
.ts-clouds.near i:nth-child(1){left:-2%;top:30%;width:34vw;height:12vh}
.ts-clouds.near i:nth-child(2){left:44%;top:46%;width:40vw;height:13vh}
.ts-clouds.near i:nth-child(3){left:82%;top:24%;width:30vw;height:11vh}

.ts-sky{position:absolute;left:0;right:0;top:calc(5vh + 78px);z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,12px);
  text-align:center;pointer-events:none;will-change:transform,opacity;padding-inline:5vw;
  opacity:var(--sky-o,1);transform:translate3d(var(--sky-x,0px),var(--sky-y,0px),0)}
.ts-kicker{display:inline-flex;align-items:center;gap:14px;font:800 clamp(8px,.85vw,11px) Montserrat,Inter,sans-serif;letter-spacing:.34em;color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(10,40,120,.55);opacity:var(--k-o,1);direction:ltr}
.ts-kicker b{display:block;height:1px;width:calc(var(--k-w,1) * clamp(24px,5vw,70px));background:linear-gradient(90deg,transparent,rgba(255,255,255,.9))}
.ts-kicker b:last-child{transform:scaleX(-1)}
.ts-title{margin:0;display:flex;flex-direction:column;align-items:center;gap:.05em;font-family:Vazirmatn,Inter,sans-serif;font-weight:900;
  font-size:clamp(26px,3.9vw,60px);line-height:1.25;color:#fff;
  text-shadow:0 2px 0 rgba(8,35,110,.28),0 10px 40px rgba(8,40,130,.55),0 0 60px rgba(255,255,255,.25)}
.ts-line{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .32em;direction:rtl}
.ts-line.accent{font-size:1.1em}
.ts-w{display:inline-block;will-change:transform,opacity,filter;
  opacity:var(--o,1);transform:translate3d(0,var(--y,0px),0) scale(var(--s,1));filter:blur(var(--b,0px))}
.ts-line.accent .ts-w{text-shadow:none;background:linear-gradient(180deg,#ffffff 8%,#ffe08a 50%,#ffa51f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:blur(var(--b,0px)) drop-shadow(0 4px 14px rgba(10,40,130,.55))}
.ts-rule{display:block;height:3px;border-radius:3px;width:calc(var(--r,1) * clamp(120px,22vw,320px));background:linear-gradient(90deg,transparent,#ffb43a,transparent);box-shadow:0 0 18px rgba(255,170,50,.7)}

.ts-ground{position:absolute;left:0;right:0;bottom:0;height:9vh;z-index:1;pointer-events:none;overflow:hidden}
.ts-ground:before{content:"";position:absolute;left:-10%;right:-10%;height:3px;top:42%;border-radius:2px;opacity:.55;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 7vw,transparent 7vw 15vw);transform:translate3d(var(--gx,0px),0,0)}
.ts-streaks{position:absolute;left:0;right:0;bottom:0;height:9vh;z-index:3;pointer-events:none;overflow:hidden;opacity:var(--st-o,0)}
.ts-streaks:before{content:"";position:absolute;inset:0 -20%;
  background:
   linear-gradient(90deg,transparent,rgba(255,255,255,.35) 50%,transparent) 0 22%/18vw 1px repeat-x,
   linear-gradient(90deg,transparent,rgba(255,255,255,.28) 50%,transparent) 6vw 52%/26vw 1px repeat-x,
   linear-gradient(90deg,transparent,rgba(255,255,255,.22) 50%,transparent) 12vw 78%/14vw 1px repeat-x;
  transform:translate3d(var(--sx,0px),0,0)}

@media(max-width:700px){
  .ts-sky{top:calc(4vh + 72px)}
  .ts-title{font-size:clamp(24px,7.4vw,38px)}
  .ts-kicker{letter-spacing:.22em}
}
@media(prefers-reduced-motion:reduce){
  .ts-sky{top:12%}
}