/* Точный порт с CodePen (без препроцессоров) */

/* base */
html, body{
  padding:0; margin:0; width:100%; height:100%; min-height:853px;
  background-color:#fff;
  background-image:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* фон и земля */
.background-stuff{
  position:absolute; top:0; left:0; width:100%; height:100%; min-height:853px;
  overflow:hidden; background:transparent;
}
.background-stuff::before{
  content:"";
  position:absolute;
  left:0;
  width:16000px;
  height:773px;
  background:url('back2.jpg') repeat-x top left;
  background-size:4500px 773px;
  animation:bgMove 38s linear infinite;
  will-change:transform;
  bottom:80px;
}
.background-stuff .ground{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 80px;
  background:#061b3a;
  z-index:2;
  overflow:hidden;
}
.background-stuff .ground::before{
  content:"";
  position:absolute;
  top:calc(50% - 15px);
  left:0;
  width:16000px;
  height:12px;
  transform:translateY(-50%);
  background-image:
    linear-gradient(to right, transparent 0, transparent 30px, #fff 30px 150px, transparent 150px 180px),
    radial-gradient(circle at 30px 6px, #fff 0 6px, transparent 6px),
    radial-gradient(circle at 150px 6px, #fff 0 6px, transparent 6px);
  background-size:180px 12px, 180px 12px, 180px 12px;
  background-repeat:repeat-x;
  animation:bgMove 38s linear infinite;
  will-change:transform;
  opacity:0.85;
}

/* центрирование */
.container{ height:100%; width:100%; display:table; overflow:hidden; }
.container .car-wrapper{ display:table-cell; vertical-align:middle; width:100%; }
.car-wrapper_inner{ position:relative; z-index:4; }

/* машина (корпус) */
.car{
  width:320px; height:200px; position:relative; opacity:1; margin:0 auto; z-index:4;
  animation:carMove 0.3s infinite;
  top: 435px;
}
.car .body{
  position:absolute; top:0; left:14px; width:230px; height:160px; background:#fff;
}
.car .body:before{
  content:""; position:absolute; left:-14px; border-radius:10px 10px 0 0;
  width:254px; height:12px; background:#3190dd; z-index:2;
}
.car .body > div{
  position:absolute; background:#fff; width:290px; height:60px; bottom:-10px; border-radius:0 0 10px 10px;
}
.car .body > div:before{
  content:""; position:absolute; top:-29px; right:0; width:80px; height:40px; background:#fff; z-index:1;
  border-radius:0 14px 0 0; transform:rotate(17deg);
}
.car .body > div:after{
  content:""; position:absolute; top:-82px; right:17px; width:90px; height:40px; background:#fff; z-index:1;
  border-radius:10px 0 0 0; transform:rotate(75deg);
}

/* колёса */
.car .wheel{
  position:absolute; width:60px; height:60px; background:#3c464c; border-radius:50%;
  bottom:0; left:48px; z-index:14; animation:carMove 0.3s 0.2s;
}
.car .wheel:before{
  content:""; position:absolute; left:50%; top:50%; width:24px; height:24px; background:#fff; border-radius:50%;
  transform:translate(-50%, -50%);
}
.car .wheel:nth-of-type(2){ left:210px; }

/* декорный слой */
.car .decos{
  width:290px; height:168px; position:absolute; z-index:12; top:0; left:14px;
}

/* нижняя линия борта */
.car .line-bot{
  position:absolute; bottom:9px; height:3px; width:100%; background:#e1e8ef;
}

/* дверь + ручка + внутренние полосы */
.car .door{
  position:absolute; left:120px; bottom:0; width:60px; height:141px; border-radius:10px 10px 0 0;
  border:3px solid #e1e8ef; border-bottom:0; background:#fff;
}
.car .door:after{
  content:""; position:absolute; top:6px; left:7px; width:46px; height:40px; border-radius:4px; background:#5bc2ef;
}
.car .door .handle{
  position:absolute; right:10px; top:70px; width:10px; height:10px; background:#e1e8ef; border-radius:50%;
}
.car .door .handle:after{
  content:""; position:absolute; top:50%; left:-5px; width:20px; height:4px; margin-top:-2px; border-radius:10px; background:#e1e8ef;
}
.car .door .bottom{
  position:absolute; bottom:6px; left:11px; width:38px; height:12px;
}
.car .door .bottom:before,
.car .door .bottom:after{
  content:""; display:block; width:100%; height:4px; border-radius:10px; background:#e1e8ef; margin-bottom:4px;
}

/* окно кабины (со скосами из :before/:after) */
.car .window{
  position:absolute; top:18px; left:200px; width:32px; height:72px; background:#5bc2ef; border-radius:10px 10px 0 10px;
}
.car .window:before{
  content:""; position:absolute; left:0; bottom:0; width:47px; height:20px; background:#5bc2ef; border-radius:0 10px 10px 10px;
}
.car .window:after{
  content:""; position:absolute; top:17px; left:-13px; width:67px; height:20px; background:#5bc2ef; border-radius:10px;
  transform-origin:bottom; transform:rotate(74deg);
}

/* огни */
.car .light{
  position:absolute; width:10px; height:10px; background:#ff8c40; right:60px; bottom:50px; border-radius:3px;
}
.car .light-front{
  position:absolute; width:8px; height:8px; background:#ff8c40; right:-3px; bottom:57px; border-radius:3px;
}
.car .light-front:after{
  content:""; position:absolute; top:100%; left:0; width:100%; height:15px; margin-top:2px; background:#ff8c40; border-radius:3px;
}

/* антенна */
.car .antenna{
  position:absolute; width:26px; height:10px; background:#fff; bottom:100%; left:17px; border-radius:4px 4px 0 0;
}
.car .antenna:before{
  content:""; position:absolute; width:38px; height:4px; background:#fff; bottom:0; left:-22px;
  transform:rotate(55deg); transform-origin:right; border-radius:4px;
}

/* «мороженка» на борту */
.car .ice-cream{
  position:absolute;
  left:28px;
  top:26px;
  width:72px;
  height:72px;
}

.car .ice-cream .cone{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:72px;
  height:72px;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

/* ветер (важно: отдельный слой, не .car .wind) */
.wind{
  position:absolute; z-index:-1; right:100%; height:100%; margin-right:-20px;
}
.wind .p{ position:absolute; background:#fff; border-radius:6px; height:12px; }
.wind .p1{ width:70px; right:0; top:0; animation:wind 1s -1s linear infinite; }
.wind .p2{ width:100px; right:40px; top:35px; animation:wind 1s -2s linear infinite; }
.wind .p3{ width:50px;  right:0;  top:80px; animation:wind 1s -1s linear infinite; }
.wind .p4{ width:60px;  right:100px; top:110px; animation:wind 1s 1s linear infinite; }
.wind .p5{ width:70px;  right:30px;  top:120px; animation:wind 1s -1.5s linear infinite; }

/* движение машины по экрану */
.car_outter{
  position:relative;
  transform:translateX(0);
}

/* анимации */
@keyframes carMove{
  0%{transform:translateY(0)} 50%{transform:translateY(-1px)} 100%{transform:translateY(0)}
}
@keyframes wind{
  0%{transform:translateX(100%); opacity:1}
  100%{transform:translateX(-400%); opacity:0}
}
@keyframes carDrive{
  0%{transform:translateX(-100%)}
  25%{transform:translateX(0)}
  70%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}
@keyframes bgIn{ 0%{left:100%} 100%{left:-100%} }
@keyframes wrapperIn{ 0%{transform:scale(0);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes bgMove{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}