/* ═══ HERO / PREMIUM 2.5D EXPLODED VIEW ═══ */
html:not(.ready){overflow:hidden}

#sc{position:relative;height:650vh}
#pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}

/* Cinematic background */
.cine-bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(ellipse 900px 600px at 62% 40%,rgba(76,141,255,.10),transparent 60%),
  radial-gradient(ellipse 700px 500px at 30% 75%,rgba(255,59,48,.05),transparent 60%),
  linear-gradient(180deg,#0a0c13 0%,var(--bg) 45%,#0b0e16 100%)}
.cine-sheen{position:absolute;top:50%;left:50%;width:1400px;height:1400px;margin:-700px 0 0 -700px;background:conic-gradient(from 0deg,transparent 0deg,rgba(76,141,255,.05) 90deg,transparent 180deg,rgba(255,59,48,.04) 270deg,transparent 360deg);animation:sheen-rotate 30s linear infinite;pointer-events:none}
@keyframes sheen-rotate{to{transform:rotate(360deg)}}
.grain{display:none}
.particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.particle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(76,141,255,.8),transparent 70%);animation:particle-float linear infinite}
@keyframes particle-float{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-70px);opacity:0}}

/* Stage */
.stage{position:relative;z-index:5;width:min(78vw,1180px);aspect-ratio:1196/748;max-height:70vh}

/* Reflection */
.reflection-wrap{position:absolute;top:100%;left:0;width:100%;height:55%;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35),transparent 85%);mask-image:linear-gradient(180deg,rgba(0,0,0,.35),transparent 85%)}
.reflection-wrap img{position:absolute;top:-100%;left:0;width:100%;height:181.8%;transform:scaleY(-1);filter:blur(1px) brightness(.7)}

/* Whole truck */
.truck-whole{position:absolute;inset:0;filter:drop-shadow(0 20px 34px rgba(0,0,0,.45))}
.truck-whole img{width:100%;height:100%;object-fit:contain}

/* Exploded parts */
.truck-parts{position:absolute;inset:0;opacity:0;pointer-events:none}
.expl-piece{position:absolute;will-change:transform;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.expl-piece img{width:100%;height:100%;object-fit:contain}
.expl-dot{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow),0 0 0 4px rgba(255,59,48,.15);opacity:0;z-index:22}
.expl-line{position:absolute;height:1.5px;width:0;margin-top:-0.75px;background:linear-gradient(90deg,var(--accent),rgba(255,59,48,.1));transform-origin:0 50%;opacity:0;z-index:21;box-shadow:0 0 6px var(--accent-glow)}
.expl-chip{position:absolute;display:flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;background:rgba(16,20,32,.92);border:1px solid rgba(255,255,255,.1);border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#fff;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.7);z-index:23;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.expl-chip svg{color:var(--accent);flex-shrink:0}

/* Tech overlay */
.tech-overlay{position:absolute;inset:-8% -8%;z-index:10;pointer-events:none;opacity:0}
.tech-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(76,141,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(76,141,255,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 40%,transparent 100%)}
.tech-corner{position:absolute;width:26px;height:26px;border:1.5px solid rgba(76,141,255,.4)}
.tech-corner.tl{top:6%;left:6%;border-right:none;border-bottom:none}
.tech-corner.tr{top:6%;right:6%;border-left:none;border-bottom:none}
.tech-corner.bl{bottom:6%;left:6%;border-right:none;border-top:none}
.tech-corner.br{bottom:6%;right:6%;border-left:none;border-top:none}
.tech-coord{position:absolute;font-size:9px;color:rgba(76,141,255,.5);letter-spacing:.12em;font-variant-numeric:tabular-nums;font-weight:500}

/* Scan line */
.scan-line{position:absolute;left:2%;right:2%;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(76,141,255,.9),transparent);opacity:0;z-index:16;box-shadow:0 0 20px rgba(76,141,255,.6)}

/* Hero text */
.ht{position:absolute;z-index:30;text-align:center;pointer-events:none;opacity:0}
.ht.s0{top:50%;left:50%;transform:translate(-50%,-50%);width:90%}
.ht.s1{top:8%;right:2%;text-align:right;width:auto;max-width:40%}
.ht.s2{bottom:8%;left:2%;text-align:left;width:auto;max-width:44%}
.ht.s3{top:6%;left:50%;transform:translateX(-50%);text-align:center;width:90%}
.ht.s4{top:8%;left:50%;transform:translateX(-50%);text-align:center;width:85%}
.ht.s5{top:50%;left:50%;transform:translate(-50%,-50%);width:82%}
.htt{font-size:clamp(38px,8.5vw,124px);font-weight:900;letter-spacing:-.05em;line-height:.88;margin-bottom:16px;background:linear-gradient(180deg,#fff 0%,#fff 60%,rgba(255,255,255,.75) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.htt-sm{font-size:clamp(18px,3.2vw,38px)}
.htt-md{font-size:clamp(20px,3.8vw,46px)}
.hts{font-size:clamp(13px,1.5vw,19px);color:var(--text-muted);font-weight:400;margin-bottom:26px;line-height:1.45;max-width:540px}
.ht.s0 .hts,.ht.s3 .hts,.ht.s4 .hts,.ht.s5 .hts{margin-left:auto;margin-right:auto}
.hcta{display:inline-block;padding:14px 36px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;pointer-events:auto;transition:all .25s;box-shadow:0 8px 24px rgba(255,59,48,.25)}
.hcta:hover{background:#ff5147;box-shadow:0 8px 32px var(--accent-glow);transform:translateY(-1px)}

/* Scroll dots */
.scroll-dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:13px;opacity:0;transition:opacity .4s}
.scroll-dots.show{opacity:1}
.sdd{width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);background:transparent;transition:all .3s;cursor:pointer}
.sdd.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow);transform:scale(1.3)}

@media(prefers-reduced-motion:reduce){
#sc{height:auto!important}
#pin{position:relative!important}
.ht{opacity:1!important;position:relative!important;inset:auto!important;transform:none!important}
.truck-parts{display:none}
}
@media(max-width:1024px){
.ht.s1,.ht.s2{top:auto;bottom:6%;left:50%;right:auto;transform:translateX(-50%);text-align:center;width:92%;max-width:none}
.stage{width:88vw}
.expl-chip{font-size:9px;padding:5px 10px 5px 8px}
}
@media(max-width:600px){
.expl-chip span{display:none}
.expl-chip{padding:6px;border-radius:50%}
}