/* ═══ scenes.css ═══ */
/* SCENES */
.scene{position:absolute;inset:0;opacity:0}
#scene1{background:linear-gradient(180deg,#c87820 0%,#a85010 18%,#7a2808 38%,#3a1004 62%,#140600 80%,#000 100%)}
#scene2{background:radial-gradient(ellipse at 50% 60%,#1a1005 0%,#000 70%)}
#scene3{background:#000}
#scene4{background:#fff}
#scene5{background:#f0ede8}

/* ROAD */
#road{
  position:absolute;bottom:0;left:0;right:0;height:18%;
  background:linear-gradient(180deg,#120e06 0%,#080500 60%,#000 100%);
  opacity:0;
}
/* road markings */
#road::after{
  content:'';position:absolute;top:30%;left:-10%;right:-10%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0px,rgba(255,255,255,.12) 60px,transparent 60px,transparent 130px);
}

/* TRUCK */
#truck-wrap{
  position:absolute;
  bottom:0;left:0;right:0;
  height:70%;
  pointer-events:none;
  overflow:visible;
}
#truck-img{
  position:absolute;
  bottom:0; left:0;
  width:75%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:bottom left;
  filter:drop-shadow(0 30px 80px rgba(0,0,0,.9));
  transition:none;
  display:block;
  transform: translateX(-115%);
  will-change: transform, opacity;
}

/* HEADLIGHT GLOW */
#headlight{
  position:absolute;
  bottom:0;            /* прямо на дороге */
  right:0;
  width:35%;
  height:55%;
  background:radial-gradient(ellipse at 85% 100%,
    rgba(242,145,0,.35) 0%,
    rgba(242,145,0,.08) 30%,
    transparent 60%);
  opacity:0;
  pointer-events:none;
}

/* STARS */
#stars{position:absolute;inset:0;pointer-events:none;opacity:0}
.star{position:absolute;border-radius:50%;background:#fff}

/* WIREFRAME OVERLAY */
#wire-wrap{position:absolute;inset:0;pointer-events:none;opacity:0}

/* BIG TEXT */
#big-text{
  position:absolute;top:18vh;left:0;right:0;
  padding:0 6vw;
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(36px,4.8vw,72px);
  font-weight:400;letter-spacing:2px;
  color:rgba(255,255,255,0.92);line-height:1.05;
  pointer-events:none;
  opacity:0;
  text-shadow:0 2px 20px rgba(0,0,0,0.8), 0 0 60px rgba(0,0,0,0.5);
}
#big-text .hi{color:#F29100}

/* SCROLL HINT */
#hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:rgba(255,255,255,.45);
  display:flex;align-items:center;gap:12px;
  animation:bob 2s ease-in-out infinite;
}
#hint::before{content:'';width:24px;height:1px;background:rgba(255,255,255,.4)}
@keyframes bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-58%)}}