/* ==============================
   ПОДКЛЮЧЕНИЕ ЛОКАЛЬНЫХ ШРИФТОВ
   ============================== */
@font-face { font-family:'Inter'; src:url('fonts/Inter-Regular.otf') format('opentype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Medium.otf')  format('opentype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Bold.otf')    format('opentype'); font-weight:700; font-style:normal; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Black.otf')   format('opentype'); font-weight:900; font-style:normal; }

@font-face { font-family:'SF Pro Text'; src:url('fonts/SFProText-Light.ttf')   format('opentype'); font-weight:300; font-style:normal; }
@font-face { font-family:'SF Pro Text'; src:url('fonts/SFProText-Regular.ttf') format('opentype'); font-weight:400; font-style:normal; }
@font-face { font-family:'SF Pro Text'; src:url('fonts/SFProText-Medium.ttf')  format('opentype'); font-weight:500; font-style:normal; }
@font-face { font-family:'SF Pro Text'; src:url('fonts/SFProText-Bold.ttf')    format('opentype'); font-weight:800; font-style:normal; }

/* === ГЛОБАЛЬНЫЕ НАСТРОЙКИ === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden;scroll-behavior:auto;}
body{background:#E8E8E8;font-family:'Inter',sans-serif;padding:20px;overflow-x:hidden;}
@media (min-width:1200px){body{padding:20px 119px;}}

/* === ШАПКА === */
.black-rects-container{width:100%;background:#fff;border-radius:clamp(8px,2vw,20px);display:flex;justify-content:center;align-items:center;height:clamp(60px,8vw,100px);}
.inner-container{width:100%;max-width:1366px;padding:0 20px;display:flex;justify-content:flex-end;align-items:center;}
.header__logo-rc{height:80%;width:auto;max-width:100%;}

/* === ЗАГОЛОВКИ === */
.title-wrapper,
.angles-title-wrapper,
.scroll-title-wrapper{width:100%;max-width:1366px;margin:clamp(20px,4vw,80px) auto clamp(20px,4vw,30px);padding:0 20px;text-align:center;}
.main-title{color:#514F4F;font-size:clamp(24px,4vw,50px);font-weight:700;line-height:1.2;}
.angles-title,
.scroll-title{color:#514F4F;font-size:clamp(24px,4vw,40px);font-weight:700;line-height:1.2;}

/* === ДАТЫ === */
.title-and-dates-container{width:100%;background:#fff;border-radius:clamp(8px,2vw,20px);margin-bottom:clamp(20px,4vw,40px);display:flex;justify-content:center;align-items:center;}
.title-and-dates-wrapper{width:100%;max-width:1366px;padding:0 20px;}
.dates-bar{width:100%;background:#fff;border-radius:clamp(8px,2vw,20px);display:flex;justify-content:center;align-items:center;padding:clamp(10px,2vw,18px) clamp(20px,5vw,101px);gap:clamp(20px,8vw,128px);}
.blue-rect-left {
  width: clamp(138px, 6vw, 200px); /* например, min=138px, max=200px */
  height: auto;
  aspect-ratio: 138 / 85; /* или aspect-ratio: 1.62; */
}

.blue-rect-right{height:clamp(40px,6vw,87px);}
.dates-container{display:flex;justify-content:center;align-items:center;width:clamp(200px,30vw,445px);height:clamp(50px,8vw,90px);}
.date-text{font-size:clamp(14px,2vw,24px);font-weight:500;text-align:center;}
.date-separator{width:clamp(10px,2vw,25px);height:clamp(15px,3vw,34px);margin:0 10px;}

/* === РАКУРСЫ (двойной блок) === */
.angles-wrapper{width:100%;margin:0 auto clamp(20px,4vw,40px);padding:0 20px;display:flex;gap:40px;}
.angles-block{margin-bottom: 20px;width:100%;background:#fff;border-radius:clamp(8px,2vw,20px);position:relative;overflow:visible;}
.angles-block::before,
.angles-block::after{content:'';position:absolute;top:0;bottom:0;width:50vw;background:#E8E8E8;z-index:2;pointer-events:none;}
.angles-block::before{right:100%;}
.angles-block::after{left:100%;}
.angles-block video{width:100%;height:auto;border-radius:clamp(8px,2vw,20px);object-fit:cover;display:block;transform-origin:center;will-change:transform;position:relative;z-index:1;}

/* === АДАПТИВНЫЕ ОВЕРЛЕИ === */

/* Оверлеи для видео (простая анимация) */
.video-overlay-text{
  position: absolute;
  z-index: 6;
  background: rgba(255,255,255,0.9);
  border-radius: clamp(6px, 1.5vw, 8px);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  /* Уменьшение отступов при сужении */
  padding: clamp(8px, 2vw, 16px);
  /* Адаптивное позиционирование */
  top: clamp(15px, 5vw, 70px);
  right: clamp(15px, 5vw, 70px);
}

.video-overlay-subtitle{
  font-family: "SF Pro Text", sans-serif;
  font-weight: 500;
  /* Уменьшение шрифта на 30% при сужении: 18px -> 13px */
  font-size: clamp(13px, 2.2vw, 18px);
  line-height: 1.2;
  /* Отступ снизу */
  margin-bottom: clamp(4px, 1.2vw, 8px);
  color: #333;
}

.video-overlay-price{
  font-family: "SF Pro Text", sans-serif;
  font-weight: 300;
  /* Уменьшение шрифта на 30% при сужении: 14px -> 10px */
  font-size: clamp(10px, 1.8vw, 14px);
  line-height: 1.2;
  color: #333;
}

/* === ПРАВЫЙ VIEWER === */
.angles-sidebar{background:#fff;border-radius:clamp(8px,2vw,20px);min-height:200px;position:relative;z-index:3;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.angles-sidebar .viewer{position:relative;width:100%;aspect-ratio:1/1;background:#fff;touch-action:none;cursor:grab;user-select:none;overflow:hidden;border-radius:clamp(4px,1vw,8px);}
.angles-sidebar .viewer img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;}

/* Оверлей для sequence (правый блок) */
.sequence-overlay-text{
  position: absolute;
  z-index: 6;
  background: rgba(255,255,255,0.9);
  border-radius: clamp(6px, 1.5vw, 8px);
  backdrop-filter: blur(5px);
  pointer-events: none;
  /* Умеренные отступы */
  padding: clamp(8px, 2vw, 12px);
  /* Позиционирование */
  bottom: clamp(30px, 6vw, 60px);
  right: clamp(30px, 6vw, 65px);
}

.sequence-overlay-price{
  font-family: "SF Pro Text", sans-serif;
  font-weight: 300;
  /* Умеренное увеличение шрифта */
  font-size: clamp(14px, 2.5vw, 16px);
  line-height: 1.2;
  color: #333;
  margin: 0;
}

.angles-sidebar .preloader{position:absolute;inset:0;z-index:10;display:flex;justify-content:center;align-items:center;overflow:hidden;}
.angles-sidebar .preloader::before{content:'';position:absolute;inset:0;background:#f4f4f4;filter:blur(8px);z-index:1;}
.angles-sidebar .preloader-overlay{position:relative;z-index:2;text-align:center;transition:opacity .4s ease;}
.angles-sidebar .preloader-text{font-size:clamp(12px,2vw,16px);margin-bottom:15px;font-weight:600;color:#222;}
.angles-sidebar .preloader-bar-container{width:clamp(120px,80%,160px);height:3px;background:rgba(0,0,0,1);border-radius:2px;overflow:hidden;margin:0 auto;}
.angles-sidebar .preloader-bar{width:0;height:100%;background:#000;transition:width .2s;}

/* === ГОРИЗОНТАЛЬНЫЕ ВИДЕО === */
.yandex-video-wrapper{width:100%;margin:0 auto clamp(20px,4vw,40px);padding:0 20px;}
.yandex-video-block{width:100%;background:#e8e8e8;border-radius:clamp(8px,2vw,20px);position:relative;overflow:hidden;}
.yandex-video-container{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:clamp(8px,2vw,20px);overflow:hidden;}
.yandex-video-container video,
.yandex-video-container iframe{position:absolute;top:-1%;left:-1%;width:102%;height:101%;border-radius:inherit;object-fit:cover;display:block;}

/* Оверлеи для горизонтальных видео (сложная анимация) */
.yandex-overlay-text{
  position: absolute;
  z-index: 6;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border-radius: clamp(6px, 1.5vw, 12px);
  /* Уменьшение отступов при сужении */
  padding: clamp(8px, 2vw, 16px);
  pointer-events: none;
  color: #fff;
  /* Позиционирование */
  top: clamp(10px, 3vw, 20px);
  left: clamp(10px, 3vw, 20px);
}

.yandex-overlay-subtitle{
  font-family: "SF Pro Text", sans-serif;
  font-weight: 500;
  /* Уменьшение шрифта на 30% при сужении: 18px -> 13px */
  font-size: clamp(13px, 2.2vw, 18px);
  line-height: 1.2;
  /* Отступ снизу */
  margin: 0 0 clamp(4px, 1.2vw, 8px) 0;
  color: #fff;
}

.yandex-overlay-price{
  font-family: "SF Pro Text", sans-serif;
  font-weight: 300;
  /* Уменьшение шрифта на 30% при сужении: 14px -> 10px */
  font-size: clamp(10px, 1.8vw, 14px);
  line-height: 1.2;
  margin: 0;
  color: #fff;
}

/* === РЕНДЕРЫ === */
.render-title-wrapper{width:100%;max-width:1366px;margin:clamp(20px,4vw,80px) auto clamp(20px,4vw,30px);padding:0 20px;text-align:center;}
.render-title{color:#514F4F;font-size:clamp(24px,4vw,40px);font-weight:700;}
.render-wrapper{width:100%;margin:0 auto clamp(20px,4vw,40px);padding:0 20px;display:flex;gap:40px;}
.render-block{background:#fff;border-radius:clamp(8px,2vw,20px);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.render-image-container{position:relative;width:100%;aspect-ratio:1/1;background:#fff;border-radius:clamp(4px,1vw,8px);overflow:hidden;}
.render-image{
  width:100%;
  height:100%;
  object-fit:contain;
  /* Адаптивное смещение изображений вправо на маленьких экранах */
  transform: translate(clamp(20px, 15vw, 121px), clamp(10px, 3vw, 20px));
}

/* Оверлеи для рендеров */
.render-overlay-text{
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(255,255,255,0.9);
  border-radius: clamp(6px, 1.2vw, 8px);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Уменьшение отступов при сужении */
  padding: clamp(10px, 2.5vw, 20px);
  /* Уменьшение марджинов при сужении */
  margin: clamp(20px, 4.5vw, 65px);
}

.overlay-title{
  font-family: "SF Pro Text", sans-serif;
  font-weight: 500;
  /* Уменьшение шрифта на 30% при сужении: 32px -> 22px */
  font-size: clamp(22px, 3.8vw, 32px);
  line-height: 1.1;
  /* Отступ снизу */
  margin-bottom: clamp(7px, 1.8vw, 12px);
  color: #333;
}

.overlay-subtitle{
  font-family: "SF Pro Text", sans-serif;
  font-weight: 500;
  /* Уменьшение шрифта на 30% при сужении: 20px -> 14px */
  font-size: clamp(14px, 2.8vw, 20px);
  line-height: 1.1;
  /* Отступ снизу */
  margin-bottom: clamp(6px, 1.6vw, 11px);
  color: #333;
}

.overlay-price{
  font-family: "SF Pro Text", sans-serif;
  font-weight: 300;
  /* Уменьшение шрифта на 30% при сужении: 16px -> 11px */
  font-size: clamp(11px, 2.2vw, 16px);
  line-height: 1.2;
  color: #333;
}

/* === МОБИЛЬНЫЕ === */
@media (max-width:1199px){
  .angles-wrapper{flex-direction:column;gap:0;padding:0;}
  
  .yandex-video-wrapper{padding:0;}
  .yandex-video-container{aspect-ratio:16/9;}
  .render-wrapper{flex-direction:column;gap:20px;padding:0;}
  .render-block{width:100%;}
  .render-image-container{aspect-ratio:unset;height:auto;}
  
  /* СМЕЩЕНИЕ ИЗОБРАЖЕНИЙ ДАЛЬШЕ ВПРАВО И НИЖЕ НА МОБИЛЬНЫХ */
  .render-image{
    width:100%;
    height:auto;
    transform: translate(230px, 70px) !important;
  }
  
  /* УВЕЛИЧЕНИЕ ТЕКСТА НА МОБИЛЬНЫХ */
  
  /* Оверлеи видео увеличиваются */
  .video-overlay-subtitle{
    font-size: 26px !important;
  }
  .video-overlay-price{
    font-size: 20px !important;
  }
  .video-overlay-text{
    padding: 18px 22px !important;
    top: 20px !important;
    right: 20px !important;
  }
  
  /* Оверлеи горизонтальных видео увеличиваются */
  .yandex-overlay-subtitle{
    font-size: 26px !important;
  }
  .yandex-overlay-price{
    font-size: 20px !important;
  }
  .yandex-overlay-text{
    padding: 18px 22px !important;
    top: 20px !important;
    left: 20px !important;
  }
  
  /* Оверлеи рендеров значительно увеличиваются */
  .overlay-title{
    font-size: 42px !important;
    margin-bottom: 18px !important;
  }
  .overlay-subtitle{
    font-size: 28px !important;
    margin-bottom: 16px !important;
  }
  .overlay-price{
    font-size: 22px !important;
  }
  .render-overlay-text{
    padding: 26px !important;
    margin: 30px !important;
    margin-bottom: 150px !important;
  }
}

/* === ДЕСКТОП 1200+ === */
@media (min-width:1200px){
  .angles-wrapper{padding:0;}
  .angles-block,
  .angles-sidebar{flex:1;}
  .yandex-video-wrapper{padding:0;}
  .render-wrapper{padding:0;}
  .render-block{flex:1;}
}

/* === УМЕНЬШЕНИЕ ОВЕРЛЕЕВ НА СРЕДНИХ ЭКРАНАХ === */
@media (max-width: 1600px) {
  /* Оверлеи видео уменьшаются на 30% */
  .video-overlay-subtitle{
    font-size: 13px;
  }
  .video-overlay-price{
    font-size: 10px;
  }
  
  /* Уменьшение отступов от углов для видео-оверлеев */
  .video-overlay-text{
    top: 20px;
    right: 20px;
    padding: 8px 12px;
  }
  
  /* Оверлеи горизонтальных видео уменьшаются на 30% */
  .yandex-overlay-subtitle{
    font-size: 13px;
  }
  .yandex-overlay-price{
    font-size: 10px;
  }
  
  /* Уменьшение отступов от углов для горизонтальных видео */
  .yandex-overlay-text{
    top: 10px;
    left: 10px;
    padding: 8px 12px;
  }
  
  /* Оверлеи рендеров уменьшаются на 30% */
  .overlay-title{
    font-size: 22px;
    margin-bottom: 8px;
  }
  .overlay-subtitle{
    font-size: 14px;
    margin-bottom: 7px;
  }
  .overlay-price{
    font-size: 11px;
  }
  
  /* Уменьшение отступов */
  .render-overlay-text{
    padding: 12px;
    margin: 45px;
  }
}

/* ----- Swipe-hint ---------------------------------------------------- */
#swipe-overlay{position:absolute;inset:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;pointer-events:none;z-index:4;}

@keyframes swipeHint{
  0%   { opacity: 0; transform: translate(-50%, 100px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; transform: translate(-50%, -160px); }
  100% { opacity: 0; transform: translate(-50%, -160px); }
}

#swipe-hint{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  pointer-events: none;
  z-index: 5;
  animation: swipeHint 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
#swipe-hint img{width:48px;height:48px;filter:brightness(0) invert(1);}

/* ========== 30.06.2025 PATCHES ========== */

/* 1. прячем левую дату и разделитель */
.dates-container .date-text:first-child,
.dates-container .date-separator{
  display:none;
}

/* 2. меняем правую дату на 30.06.2025 */
.dates-container .date-text:last-child{
  position:relative;
  color:transparent;                /* скрываем старый текст */
}
.dates-container .date-text:last-child::after{
  content:"08.07.2025";
  position:absolute;
  inset:0;
  color:#000;                       /* наследует шрифт и размер */
}

/* 3. равный зазор между двумя горизонтальными видео */
.yandex-video-container + .yandex-video-container{
  margin-top:clamp(20px,4vw,40px);
}