/* ── KioGo · механика Multivideo ─────────────────────────────────
   Вёрстка 1:1 с фреймом Figma "creative" 1090 × 614
   (слайды 3181:1019 / 3189:34 / 3189:295). Все размеры — px макета.
   Растровые слои бара — исходники из «Creative Multivideo» (@2x, блюры
   запечены), показаны ровно в половину натурального размера; позиции
   найдены попиксельным сопоставлением с рендером слоёв Figma.
   Масштаб всей сцены делает движок (transform: scale, с полями). */

@font-face {
  font-family: 'Montserrat';
  font-weight: 500;
  src: url(assets/montserrat-500.woff2) format('woff2');
  font-display: block;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.frame {
  position: relative;
  flex: none;
  width: 1090px;
  height: 614px;
  overflow: hidden;
  overflow: clip;                /* не прокручивается фокусом/scrollIntoView — свечение выходит за кадр */
  background: #000;
  transform-origin: center center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.frame > * { position: absolute; display: block; }
.frame img { pointer-events: none; }

/* ── ролики ── */
.video {
  left: 0; top: 0;
  width: 1090px; height: 614px;
  object-fit: cover;
  pointer-events: none;
}

/* ── свечение: обёртка несёт matrix() формы слайда, внутри — 3 цветовые
   версии (кроссфейд). Размытие r120 Figma = stdDeviation 60, поле 120 ── */
.glow {
  left: 0; top: 0;
  width: 794px; height: 394px;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
.glow svg {
  position: absolute;
  left: -120px; top: -120px;
  overflow: visible;
  will-change: opacity;
}

/* ── слои бара: will-change — каждый слой на своём композитном слое ── */
[data-depth] { will-change: translate, opacity; }

.s1-backcity  { left: -30px; top: 468px;   width: 592px;   height: 146px; }
.s1-frontcity { left: -30px; top: 248px;   width: 527px;   height: 366px; }
.s1-spidy     { left: 59px;  top: 258px;   width: 339px;   height: 232px; }
.s1-people    { left: -5px;  top: 398px;   width: 468px;   height: 216px; }
.s1-logo      { left: 99px;  top: 507.8px; width: 258.5px; height: 92.5px; }

.s2-tree       { left: 6px;    top: 292px; width: 455px;   height: 322px; }
.s2-backknight { left: -110px; top: 318px; width: 689px;   height: 296px; }
.s2-frontknight{ left: -16px;  top: 249px; width: 653px;   height: 365px; }
.s2-odessey    { left: 113px;  top: 321px; width: 279px;   height: 293px; }
.s2-logo       { left: 104px;  top: 534px; width: 257px;   height: 34px; }

.s3-wavebg  { left: -47px; top: 322px;   width: 788.5px; height: 292px; }
.s3-wave    { left: 36px;  top: 344px;   width: 393.5px; height: 270px; }
.s3-pictmen { left: 22px;  top: 159.5px; width: 421px;   height: 454.5px; }
.s3-logo    { left: 109px; top: 513px;   width: 247px;   height: 75px; }

/* ── логотип фильма между стрелками: при наведении чуть растёт,
   за ним разгорается подсветка цвета слайда ── */
.film { pointer-events: auto; }
.film img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transition: scale .45s cubic-bezier(.2,.8,.2,1);
}
.film-halo {
  position: absolute;
  inset: -34px -44px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo) 0%, transparent 100%);
  filter: blur(10px);
  opacity: 0;
  transition: opacity .45s ease, scale .45s cubic-bezier(.2,.8,.2,1);
  scale: .85;
  pointer-events: none;
}
.film:hover img { scale: 1.06; }
.film:hover .film-halo { opacity: 1; scale: 1; }
.s1-logo { --halo: rgba(255, 115, 40, .75); }
.s2-logo { --halo: rgba(190, 205, 230, .6); }
.s3-logo { --halo: rgba(105, 200, 237, .75); }

/* ── блик: мягкая диагональная полоса, пробегает по кнопке слева направо ── */
.shine { overflow: hidden; border-radius: 10px; }
.shine::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 42%,
    rgba(255,255,255,.5) 50%, rgba(255,255,255,.18) 58%, rgba(255,255,255,0) 70%);
  transform: translateX(-110%);
  pointer-events: none;
}
@keyframes shine-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
/* главная кнопка без наведения: блик раз в 4 с (пробег в конце цикла —
   после ухода курсора первый блик через ~3 с, а не мгновенно) */
@keyframes shine-idle {
  0%, 77% { transform: translateX(-110%); }
  100%    { transform: translateX(110%); }
}

/* ── общее ── */
.bt {
  left: 786px; top: 520px;
  width: 264px; height: 64px;
  transition: scale .35s cubic-bezier(.2,.8,.2,1);
}
.bt img { display: block; }
.bt::after { animation: shine-idle 4s ease-in-out infinite; }
.bt:hover { scale: 1.04; }
.bt:hover::after { animation: shine-sweep .9s ease-in-out; }

.ar {
  top: 520px;
  width: 52px; height: 64px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  outline: none;
  transition: scale .3s cubic-bezier(.2,.8,.2,1);
}
.ar img { display: block; }
.ar-next { left: 373px; }
.ar-prev { left: 40px; }
.ar-prev img { transform: scaleX(-1); }            /* ar 2 в Figma — зеркальная копия ar 1 */
.ar:hover { scale: 1.08; }
.ar:hover::after { animation: shine-sweep .8s ease-in-out; }
.ar:active { scale: .94; }

.txt {
  left: 564px; top: 533px;           /* центр строк совпадает с Figma (сверено попиксельно) */
  width: 200px;
  font: 500 16px/19.5px 'Montserrat', sans-serif;   /* "Auto" Figma для Montserrat 16 */
  color: #fff;
  opacity: .6;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
}

.big-logo { left: 40px; top: 30px; width: 112px; height: 66px; }