/* ------------------------------
   Шрифты
------------------------------ */
@font-face {
  font-family: 'Soyuzmult Heroes';
  src: url('assets/fonts/Soyuzmult_Heroes.otf') format('opentype');
  font-weight: 400;
}
@font-face {
  font-family: 'Creata';
  src: url('assets/fonts/Creata-Medium.otf') format('opentype');
  font-weight: 500;
}

/* ------------------------------
 Базовые стили
------------------------------ */
html, body {
margin: 0;
height: 100%;
overflow: hidden;
background: none;
/* background: url('assets/Gradient.svg') center center / cover no-repeat fixed; */
}

html, body {
  touch-action: pan-x pan-y; /* разрешает прокрутку, но не зум */
  overscroll-behavior: contain;
}
body {
  touch-action: manipulation;
}

/* Корневой контейнер для безопасной обрезки при зуме на iOS */
.stage {
position: fixed; inset: 0;
overflow: hidden;
contain: layout paint;
isolation: isolate;            /* новый стек для корректного клипа */
clip-path: inset(0);           /* принудительный клип для iOS 15 */
}

/* Глобальный масштаб фруктов (переопределяется в медиазапросах) */
:root {
--fruits-scale: 1;
}

body::before{
content:"";
position: fixed; inset: 0;
z-index: -1; pointer-events: none;
background: url('assets/Gradient.svg') center / cover no-repeat;
will-change: transform;
transform: translateZ(0); /* подталкиваем GPU и убираем артефакты */
}

/* ------------------------------
 Общие элементы-декорации
------------------------------ */
.decor {
position: absolute;
pointer-events: none;
transform-origin: center center;
will-change: transform;
transform-box: fill-box;
}

/* ------------------------------
 Верхние фрукты
------------------------------ */
.fruits {
position: absolute;
z-index: 4;
--fruit-size: calc(var(--fruits-scale, 1) * clamp(180px, calc(var(--vh, 1svh) * 22), 520px));
width: var(--fruit-size);
height: var(--fruit-size);
top: 0;
left: 0;
 --x: -0.4; /* половина ширины влево */
 --y: -0.4; /* половина высоты вверх */
transform: translate(calc(var(--x) * var(--fruit-size)), calc(var(--y) * var(--fruit-size)));
}
  
.fruits4 {
position: absolute;
z-index: 4;
--fruit-size: calc(var(--fruits-scale, 1) * clamp(180px, calc(var(--vh, 1svh) * 22), 520px));
width: var(--fruit-size);
height: var(--fruit-size);
top: 0;
right: 0;
 --x: 0.25;  /* четверть ширины вправо */
 --y: -0.25; /* четверть высоты вверх */
transform: translate(calc(var(--x) * var(--fruit-size)), calc(var(--y) * var(--fruit-size)));
}

  @media screen and (max-width: 600px) {
    .fruits4 {
      display: none;
    }
  }
/* ------------------------------
 Нижние фрукты
------------------------------ */
.fruits2 {
position: absolute;
z-index: 4;
--fruit-size: calc(var(--fruits-scale, 1) * clamp(180px, calc(var(--vh, 1svh) * 22), 520px));
width: var(--fruit-size);
height: var(--fruit-size);
bottom: 0;
left: 0;
 --x: -0.5; /* половина ширины влево */
 --y: 0.5;  /* половина высоты вниз */
transform: translate(calc(var(--x) * var(--fruit-size)), calc(var(--y) * var(--fruit-size)));
}

/* ------------------------------
 Фрукты справа
------------------------------ */
.fruits3 {
position: absolute;
z-index: 3;
--fruit-size: calc(var(--fruits-scale, 1) * clamp(180px, calc(var(--vh, 1svh) * 22), 520px));
width: var(--fruit-size);
height: var(--fruit-size);
bottom: 0;
right: 0;
 --x: 0.5;  /* половина ширины вправо */
 --y: 0.5;  /* половина высоты вниз */
transform: translate(calc(var(--x) * var(--fruit-size)), calc(var(--y) * var(--fruit-size)));
}

/* ------------------------------
 Внутренний элемент: вращение/масштаб
------------------------------ */
.fruit { width: 100%; height: 100%; display: block; transform-origin: center center; will-change: transform; }

/* ------------------------------
 Анимация вращения (без translate)
------------------------------ */
@keyframes fruitSpinRight {
0%   { transform: rotate(45deg) scale(1); }
50%  { transform: rotate(180deg) scale(var(--fruit-scale-anim, 1.02)); }
100% { transform: rotate(360deg) scale(1); }
}

@keyframes fruitSpinLeft {
0%   { transform: rotate(-35deg) scale(1); }
50%  { transform: rotate(-300deg) scale(var(--fruit-scale-anim, 1.02)); }
100% { transform: rotate(-480deg) scale(1); }
}

/* Привязка анимации к обёрткам */
.fruits .fruit { animation: fruitSpinRight 90s linear infinite; }
.fruits4 .fruit { animation: fruitSpinLeft 90s linear infinite; }
.fruits2 .fruit { animation: fruitSpinLeft 110s linear infinite; }
.fruits3 .fruit { animation: fruitSpinRight 110s linear infinite; }

/* Точечные оверрайды для iOS 15: чуть больше вынос и без дополнительного scale */
.ios15 { --fruit-scale-anim: 1; }
.ios15 .fruits { --x: -0.45; --y: -0.45; }
.ios15 .fruits2 { --x: -0.55; --y: 0.55; }
.ios15 .fruits3 { --x: 0.55; --y: 0.55; }
.ios15 .fruits4 { --x: 0.3; --y: -0.3; }

/* ------------------------------
 Видео Чебурашки
------------------------------ */
.cheba-video {
position: absolute;
top: var(--video-top, auto);
bottom: var(--video-bottom, 0);
left: var(--video-left, 50%);
transform: translateX(var(--video-translate-x, -50%));
z-index: 3;
width: var(--video-w, auto);
height: var(--video-h, min(calc(var(--vh, 1svh) * 50), 480px));
object-fit: contain;
pointer-events: auto;
background: transparent;
opacity: 0;
transition: opacity .6s ease;
margin: 0 0 -18px;
}

/* ------------------------------
 Canvas
------------------------------ */
canvas {
position: relative;
z-index: 5;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}

/* ------------------------------
 Промо-блок
------------------------------ */
.promo {
position: absolute;
top: var(--promo-top-abs, 10%);
left: var(--promo-left, 50%);
transform: translateX(var(--promo-translate-x, -50%));
width: var(--promo-w, 95%);
max-width: 750px;
height: var(--promo-h, auto);
z-index: 20;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--promo-gap, 2px);
/* padding: 0 20px 50px; */
}
.promo-title {
font-family: 'Soyuzmult Heroes', sans-serif;
font-weight: 500;
font-size: clamp(100px, 14vw, 150px);
line-height: 100%;
margin: 0;
letter-spacing: 0.02em;
}
.promo-info {
font-family: 'Creata', sans-serif;
font-weight: 500;
font-size: clamp(30px, 4vh, 55px);
line-height: 100%;
white-space: pre-line;
margin: 0;
letter-spacing: 0.2rem;
}
.qr-code{
    font-family: 'Soyuzmult Heroes', sans-serif;
    font-weight: 500;
    font-size:36px;
    line-height: 100%;
    padding: 25px;
    border: 7px solid white;
    border-radius: 34px;
}
.promo-info--compact { display: none; white-space: pre-line; }

/* ------------------------------
 Логотипы
------------------------------ */
.logos {
position: absolute;
bottom: 20px;                  /* только мобилки — затем переопределим на десктопе */
left: 50%;
transform: translateX(-50%);
z-index: 30;
display: flex;
justify-content: space-evenly; /* равномерный спейс между айтемами */
align-items: center;            /* вертикальное выравнивание */
gap: clamp(8px, 2vw, 24px);
width: clamp(260px, 87.5vw, 385px); /* при 440px → 385px */
height: clamp(64px, 22.3vw, 98px);  /* при 440px → ~98px */
}
.logos .logo {width: auto; display: block; object-fit: contain; }
/* .logos .logo-cross { height: 45%; } */

/* ------------------------------
 Адаптив
------------------------------ */



/* Ниже эталона 440×956: видео чуть больше, тексты чуть меньше */
@media (max-width: 439px), (max-width: 440px) and (max-height: 955px) {
.cheba-video { height: min(calc(var(--vh, 1svh) * 58), 520px); }
.promo-title { font-size: clamp(72px, 12vw, 96px); }
.promo-info, .promo-info--compact { font-size: clamp(18px, 4.5vw, 44px); }
}

@media (max-height:900px) {
.promo-info { display: none; }
.promo-info--compact { display: block; font-size: clamp(15px, 4vh, 25px);
}
.cheba-video { height: min(calc(var(--vh, 1svh) * 62), 540px); }
}

/* Очень низкие экраны (например, 528x702): делаем видео ещё на ~20% выше */
@media (max-height: 710px) {
.cheba-video { height: min(calc(var(--vh, 1svh) * 60), 520px) }
}

@media (max-height: 620px) {
  .cheba-video { height: min(calc(var(--vh, 1svh) * 58), 520px) }
  }

@media (max-width:600px) {
.logos { gap: clamp(6px, 2.5vw, 14px); }
:root { --fruits-scale: 2; }
}

/* Планшеты: увеличиваем фрукты */
@media (min-width:601px) and (max-width:1023px) {
:root { --fruits-scale: 1.8; }
}

/* Десктоп: выносим логотипы из нижнего блока и позиционируем фиксированно */
@media (min-width:601px) {
.logos { 
  position: static; 
  width: auto; 
  height: auto; 
  transform: none; 
  display: block;    /* убираем флекс-блок снизу на десктопе */
}
.logos .logo { position: fixed; z-index: 40; }
.logos .logo-cheba { width: 139px; height: 108px; top: 52px; left: 52px; opacity: 1; transform: none; }
.logos .logo-sber { width: 168px; height: 50px; top: 82px; right: 52px; opacity: 1; transform: none; }
.logos .logo-cross { display: none; }
}

/* iPhone 16 Pro Max ориентир: 440×956 — точные кегли и кернинг */
@media (min-width: 430px) and (max-width: 450px) and (min-height: 940px) and (max-height: 970px) {
.promo-title { font-size: 100px; letter-spacing: 0.02em; }
.promo-info { font-size: 34px; letter-spacing: 0.03em; }
 .promo { --promo-gap: 0px; }
}

/* Десктопы: уменьшаем фрукты на ~30% */
@media (min-width:1024px) {
:root { --fruits-scale: 2.5; }
}

/* ------------------------------
   Мобильный iframe режим
------------------------------ */
.mobile-iframe {
  height: 100%;
  overflow: hidden;
}

.mobile-iframe body {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* visualViewport API в JavaScript автоматически учитывает видимую область
     и корректно работает с safe-area на устройствах с вырезами экрана */
}

.mobile-iframe iframe {
  /* Размеры устанавливаются динамически через JavaScript (visualViewport),
     здесь только базовое позиционирование с учетом safe-area */
  position: fixed;
  border: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
  background: #000;
}