@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');

:root{
  --container: 1200px;
  --accent:#FF9B00;
  --presents-w: 150px; /* макс ширина ленты подарков на десктопе */
}



*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0C0B0B;
  background:#fff; /* без общего фона */
  overflow-x:hidden;
}

.container{ width:min(100% - 32px, var(--container)); margin-inline:auto; }

/* Шапка: лого по центру */
.header{ position:relative; z-index:4; padding:14px 0 6px; text-align:center; }
.logo{ width:132px; height:auto; display:inline-block; }

@media (max-width: 991px) {
  .logo{
    width: 120px;
  }}

/* Главный блок: держим всё в 1 экране (с учётом шапки) */
.main {
    position: relative;
    z-index: 3;
    min-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-bottom: 14px;
}


@media (max-width: 1025px) 

/* Заголовок */
.headline{ display:grid; place-items:center; margin:6px 0 6px; }
.headline__img{ width:min(980px, 84vw); height:auto; display:block; }

/* Инфо-блок — кликабельный */
.info{
  position:relative;
  display:block;
  width:min(900px, 84vw);
  margin:0 auto;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  border-radius:18px;
}
.info__img{
  display:block; width:100%; height:auto;
  border-radius:18px;
}
.info__badge {
    position: absolute;
    right: -186px;
    top: 8px;
    background: url(/img/elem.svg);
    border-radius: 16px;
    transform: skewX(-6deg);
    z-index: 1;
    width: 400px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
}
.info__badge-inner{
  padding:8px 14px;
  transform:skewX(6deg);
  font-weight:800;
  font-size: clamp(14px, 2vw, 18px);
  line-height:1.15;
  text-align:center;
  color:#1a1a1a;
  white-space:nowrap;
}

/* Таймер + гирлянда сверху */
.timer{ width:100%; display:flex; justify-content:center; position:relative; z-index:3; }
.timer__bar {
    position: relative;
    width: min(470px, 84vw);
    background: #fff7e8;
    border-radius: 8px;
    padding: 24px 14px 12px;
    border: 2px solid rgba(255,184,0,.35);
}
.timer__bar::before{
  content:"";
  position:absolute; left:50%; top:-18px;
  width: calc(100% + 12px);
  height: 36px;
  transform: translateX(-50%);
  background: url('../img/lights.png') center/contain no-repeat;
  pointer-events:none;
}
.timer__lead {
   font-family: "Unbounded", sans-serif;
    text-align: center;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: .3px;
    font-size: 22px;
}


@media (max-width: 991px) {
.timer__lead {
margin-bottom: 2px;
        letter-spacing: .3px;
        font-size: 18px;
        font-family: "Unbounded", sans-serif;
        font-weight: 800;
  }}


.timer__grid {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
     font-family: "Unbounded", sans-serif;
}
.timer__cell{ text-align:center; min-width: 88px; }
.timer__num {
font-size: 28px;
        font-weight: 700;
        color: var(--accent);
        -webkit-text-fill-color: #0000;
        background: linear-gradient(207deg, #ffac00 .12%, #ffac00 42.2%);
        background-clip: text;
        font-family: "Unbounded", sans-serif;
}


@media (max-width: 991px) {
.timer__num {
font-size: 38px;
        font-weight: 700;
        color: var(--accent);
        -webkit-text-fill-color: #0000;
        background: linear-gradient(207deg, #ffac00 .12%, #ffac00 42.2%);
        background-clip: text;
  }}

.timer__cap{ margin-top:2px; font-size:10px; font-weight:800; color:#353535; letter-spacing:.6px; }
.timer__sep {
    transform: translateY(-4px);
    font-size: clamp(28px, 6vw, 44px);
    font-weight: 900;
    color: var(--accent);
    -webkit-text-fill-color: #0000;
    background: linear-gradient(207deg, #f5a612 .12%, #f0a416 42.2%, #d49b3d 64.43%, #d59c3b 99.69%);
    background-clip: text;
}

/* Машины — фикс по углам, поверх контента, без box-shadow (только легкий drop-shadow можно убрать при необходимости) */
.car{
  position:fixed; z-index:5; pointer-events:none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.18));
}
.car--lt{ left:-16px; top:84px;  width:min(220px, 22vw); transform:rotate(-2deg); }
.car--lb{ left:-16px; bottom:-6px; width:min(260px, 26vw); }
.car--rt{     right: -114px;
    top: -96px;
    width: min(351px, 49vw);}

.car--rb{ right:-18px; bottom:-6px; width:min(300px, 30vw); }

/* Подарки — узкие ленты, object-fit: contain, ближе к инфо (привязка к краям контейнера), под всем */
.presents{
  position:fixed; top:0; bottom:0; height:100vh;
  width: var(--presents-w);
  z-index:0; /* за всеми элементами */
  pointer-events:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.presents--left{
  left: max(0px, calc((100vw - var(--container)) / 2 - var(--presents-w)));
}
.presents--right{
  right: max(0px, calc((100vw - var(--container)) / 2 - var(--presents-w)));
  transform: scaleX(-1);
}
.presents__poster,
.presents__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain; /* как просили */
  background: transparent;
}
.presents__video{ opacity:0; transition:opacity .5s ease; }
.presents--ready .presents__video{ opacity:1; }
.presents--ready .presents__poster{ opacity:0; transition:opacity .4s ease; }

/* Мобильная компоновка — компактнее */
@media (max-width: 768px){
  :root{ --presents-w: 84px; }

  .headline__img{ width:min(640px, 92vw); }

  .info{ width:min(720px, 92vw); border-radius:14px; }
  .info__img{ border-radius:14px; }
  .info__badge{ right:10px; top:6px; }
  .info__badge-inner{ padding:6px 10px; font-size:14px; }

  .timer__bar{ width:min(680px, 92vw); padding-top:22px; }
  .timer__bar::before{ top:-14px; height:28px; }

  /* Машины чуть компактнее */
  .car--lt{ width:36vw; top:110px; }
  .car--rt{ width:32vw; top:0; }
  .car--rb{ width:44vw; }
  .car--lb{ width:44vw; }
}

@media (max-width: 480px){
  :root{ --presents-w: 72px; }

  .headline__img{ width:min(380px, 92vw); }
  .info{ width:min(380px, 92vw); border-radius:12px; }
  .info__img{ border-radius:12px; }
  .info__badge-inner{ font-size:13px; padding:6px 8px; }

  .timer__bar{ width:min(380px, 92vw); padding-top:14px; padding-bottom: 6px; }
  .timer__bar::before{ top:-12px; height:26px; }

  /* Сильнее уменьшаем авто, чтобы не перекрывали контент */
  .car--lt{ width:42vw; top:120px; }
  .car--rt{ width:38vw; 
  display: none;}
  .car--rb{ 
            width: 50vw;
        z-index: 3;
        position: absolute;
        right: 0;
  }
  .car--lb{ width:50vw;
  display: none; }
}

/* 1) Лого слева на десктопе */
@media (min-width: 1025px){
  .header{
    text-align: left;              /* вместо центрирования */
  }
  .logo{
    margin-left: 0;                /* на всякий случай убираем возможное центрирование */
    display: inline-block;
  }
}

/* 2 Подарки — непрерывные ленты на десктопе, за всем контентом */
:root{
  --presents-w: 150px;             /* ширина ленты на десктопе */
}

/* контейнеры лент остаются фиксированными и тянутся по высоте окна */
.presents {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100svh;
    width: 500px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

/* позиционирование у краёв контейнера (ближе к блоку info) */
.presents--left{
  left: max(0px, calc((100vw - var(--container)) / 2 - var(--presents-w)));
}


@media (max-width: 768px){
.presents--left{
   width: 100%;
     margin: 0;
  }
}

@media (min-width: 1025px){
.presents{

  }
}

.presents--right{
  right: max(0px, calc((100vw - var(--container)) / 2 - var(--presents-w)));
  transform: scaleX(-1);
}



@media (max-width: 680px) {
.presents--right{
       display: none;
    }
}

/* медиа: на десктопе видео/постер «накрывают» всю высоту ленты без просветов */
.presents__poster,
.presents__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
        object-fit: scale-down;
  background: transparent;
}
@media (min-width: 1025px){
  .presents__poster,
  .presents__video{
    object-fit: cover;             /* на десктопе — без «полос» сверху/снизу */
  }
}

@media (max-width: 1025px){
.info__badge {
   position: absolute;
        top: -209px;
        right: -78px;
}}

/* плавная замена постера на видео (как было) */
.presents__video{ opacity: 0; transition: opacity .5s ease; }
.presents--ready .presents__video{ opacity: 1; }
.presents--ready .presents__poster{ opacity: 0; transition: opacity .4s ease; }



@media (max-width: 680px) {
    .car--lt {
        width: 42vw;
        top: 0;
        left: -30px;
        z-index: 3;
    }
}

.page {
    overflow: hidden;
}



@media (max-width: 991px){
.headline {
    margin-top: 84px;
}}

.car.car--lt {
  /* Базовые стили для элемента */
  transform-origin: center; /* Точка вращения - центр (можно настроить под вашу модель) */
  
  /* Анимация встряски */
  animation: carShake 0.5s ease-in-out infinite;
}


@media (max-width: 680px) {
  .main {
       min-height: calc(95vh - 120px);
    }
}