/* HERO */
.hero{
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background: linear-gradient(to right, #ffffff, #f3f3f3);
}


/* TEXT */
.hero-text{
  animation: textSlide 1s ease forwards;
  opacity:0;
}

@keyframes textSlide{
  from{transform:translateX(-80px); opacity:0;}
  to{transform:translateX(0); opacity:1;}
}

/* CAR CONTAINER */
.car-wrapper{
  position:relative;
  animation: carDrive 1.8s cubic-bezier(.25,.8,.25,1) forwards;
}

/* CAR DRIVE EFFECT */
@keyframes carDrive{
  0%{
    transform:translateX(500px) scale(0.9);
    opacity:0;
  }
  60%{
    transform:translateX(-30px) scale(1.05);
    opacity:1;
  }
  80%{
    transform:translateX(10px) scale(1);
  }
  100%{
    transform:translateX(0);
  }
}

/* ENGINE VIBRATION */
.car-wrapper img{
  width:100%;
  animation: engineVibe 0.08s infinite alternate;
}

@keyframes engineVibe{
  from{transform:translateY(0);}
  to{transform:translateY(1px);}
}

/* SHADOW UNDER CAR */
.car-shadow{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:60%;
  height:20px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent);
  filter:blur(5px);
}

/* SMOKE EFFECT */
.smoke{
  position:absolute;
  right:80%;
  bottom:20%;
  width:150px;
  height:150px;
  background:radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  animation: smokeMove 2s ease-out forwards;
}

@keyframes smokeMove{
  0%{
    transform:translateX(100px);
    opacity:0.6;
  }
  100%{
    transform:translateX(-100px);
    opacity:0;
  }
}

/* BUTTON */
.btn-racing{
  background:#ff0000;
  color:white;
  border:none;
  transition:0.3s;
}

.btn-racing:hover{
  transform:scale(1.08);
  box-shadow:0 0 20px #ff0000;
}

@keyframes speedMove{
  0%{ left:-100%; }
  100%{ left:100%; }
}

.smoke{
  position:absolute;
  right:75%;
  bottom:15%;
  width:200px;
  height:200px;
  pointer-events:none;
}

.smoke::before,
.smoke::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  background:radial-gradient(circle, rgba(0,0,0,0.15), transparent 70%);
  border-radius:50%;
  animation:smokeFlow 2.5s ease-out infinite;
}

.smoke::after{
  animation-delay:1.2s;
}

@keyframes smokeFlow{
  0%{
    transform:translateX(0) scale(0.6);
    opacity:0.6;
  }
  100%{
    transform:translateX(-150px) scale(1.4);
    opacity:0;
  }
}

/* ===== ROAD DIVIDER ===== */
.road-divider{
    position:relative;
    width:100%;
    height:50px;              /* giảm chiều cao */
    background:#1a1a1a;
    overflow:hidden;
}

/* Vạch đường nhỏ lại */
.road-divider-top .road-line{
    position:absolute;
    top:50%;
    left:0;
    width:200%;
    height:3px;               /* nhỏ hơn */
    background: repeating-linear-gradient(
        to right,
        #fff 0 30px,
        transparent 30px 60px
    );  
    transform:translateY(-50%);
    animation: roadMove 1.2s linear infinite;
}

.road-divider-bot .road-line{
    position:absolute;
    top:50%;
    left:0;
    width:200%;
    height:3px;               /* nhỏ hơn */
    background: repeating-linear-gradient(
        to right,
        #fff 0 30px,
        transparent 30px 60px
    );
    transform:translateY(-50%);
    animation: roadMoveAgain 1.2s linear infinite;
}

@keyframes roadMove{
    from{ transform:translate(0,-50%); }
    to{ transform:translate(-60px,-50%); }
}

@keyframes roadMoveAgain{
    from{ transform:translate(-60px,-50%); }
    to{ transform:translate(0,-50%); }
}