/* VK Видео — «Распечатай впечатления». Тач-панель 55" вертикально, 1080×1920.
   Все размеры сняты с макета Figma (страница 395:488, секция RU 401:495):
   стартовый 401:496, таймер 401:552, удаление фона 401:577,
   выбор фона 401:601, печатание 401:636, готово 401:523. */

:root {
  --blue: #07f;
  --sheet-border: #4a4a4a;
  --white: #fff;
  --font: "VK Sans Display Expanded", "VK Sans Display", "Onest", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-text: "VK Sans Display", "Onest", "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

img { -webkit-user-drag: none; user-select: none; }

html, body {
  height: 100%;
  background: #000;
  font-family: var(--font-text);
  color: var(--white);
  overflow: hidden;
  user-select: none;
  cursor: none;                       /* на панели курсор не нужен */
}

body.is-desktop { cursor: default; }

#stage {
  position: absolute;
  top: 50%; left: 50%;
  width: 1080px; height: 1920px;
  transform-origin: center center;
  overflow: hidden;
  background: #000;
}

/* ─────────────────────────────────────────────── экраны и фон */

.screen { position: absolute; inset: 0; display: none; }
.screen.is-active { display: block; }

.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* общий фон — бесшовный «Паттерн общий» из макета, медленно дрейфует по диагонали.
   Плитка 1280×768 показана в масштабе прежнего bg.png (cover ×2.5), двигаем transform'ом
   на один период — на стыке цикла узор совпадает сам с собой */
.bg--pattern {
  position: absolute; top: 0; left: 0;
  width: calc(100% + 3200px); height: calc(100% + 1920px);
  background: url("/static/img/pattern.png") repeat 0 0 / 3200px 1920px #1717c9;
  animation: bg-drift 140s linear infinite;
}

@keyframes bg-drift { to { transform: translate3d(-3200px, -1920px, 0); } }

/* размытые пятна поверх фона на экранах съёмки и обработки (слой «фон», 401:553) */
.bg--ellipses { mix-blend-mode: screen; }

.frame { position: absolute; inset: 0; display: flex; flex-direction: column; }

.frame--edge   { padding: 16px; justify-content: space-between; }
.frame--media  { padding: 120px 80px 0; justify-content: space-between; }
.frame--panel  { padding: 24px 24px 0; justify-content: center; }

/* ─────────────────────────────────────────────── шапка */

.brandbar { flex: none; }
.brandbar--idle { padding: 104px 64px; margin-bottom: -83px; }
.brandbar--done { padding: 104px 64px; margin-bottom: -22px; }

.frame--media .brandbar { filter: drop-shadow(-12px 4px 24px #000c1a); }

.logo { display: block; height: 96px; width: auto; }

/* ─────────────────────────────────────────────── типографика */

.title {
  font-family: var(--font);
  font-size: 80px; line-height: .9; font-weight: 600;
}

.subtitle { font-size: 48px; line-height: 1.3; letter-spacing: 0.48px; }

.textblock { display: flex; flex-direction: column; gap: 48px; }
.textblock--tight { gap: 32px; }

/* ─────────────────────────────────────────────── кнопки */

.btn {
  appearance: none; border: 0; cursor: pointer;
  width: 100%;
  padding: 64px;
  border-radius: 32px;
  background: var(--blue);
  font-family: var(--font); font-size: 64px; line-height: .9; font-weight: 600;
  color: var(--white);
  transition: transform .12s ease, filter .12s ease;
}

.btn:active { transform: scale(.98); filter: brightness(.86); animation: none; }

/* лёгкое «дыхание» главной кнопки, чтобы интерфейс не выглядел статичным */
.btn--pulse { animation: btn-pulse 2.8s ease-in-out .9s infinite; }

@keyframes btn-pulse {
  0%, 100% { transform: none; box-shadow: 0 0 0 rgba(0, 119, 255, 0); }
  50%      { transform: scale(1.015); box-shadow: 0 24px 64px rgba(0, 119, 255, .38); }
}

.btn--grow { flex: 1 0 0; min-width: 0; width: auto; }

.btn--icon {
  width: 171px; height: 171px; flex: none;
  display: grid; place-items: center;
  padding: 0;
  background: transparent;
  border: 3px solid var(--blue);
}

.btn--icon img { width: 64px; height: 64px; }

.btn--ghost { width: auto; padding: 22px 42px; font-size: 28px; background: rgba(255,255,255,.14); border-radius: 20px; }

.btn[disabled] { opacity: .45; pointer-events: none; }

/* ─────────────────────────────────────────────── чёрный лист (стартовый и финальный) */

.sheet--card {
  position: relative;
  flex: none;
  display: flex; flex-direction: column;
  gap: 96px;
  padding: 96px 96px 128px;
  border-radius: 64px;
  background: #000;
  overflow: hidden;
}

/* высота плашки одинаковая на всех языках: английский текст короче русского,
   и без фиксации плашка «дышала» между RU и EN. Кнопка при этом всегда внизу */
[data-screen="idle"] .sheet--card {
  height: 894px;
  justify-content: space-between;
}

/* синее свечение под содержимым листа (KV 4, 401:513) */
.sheet__glow {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 3124px; height: 778px;
  border-radius: 30.101px;
  overflow: hidden;
  filter: blur(18.813px);
  pointer-events: none;
}

.sheet__glow img {
  position: absolute;
  left: calc(50% + 0.63px); bottom: -650.37px;
  transform: translateX(-50%);
  width: 1500px; height: 1293px;
  max-width: none;
}

.sheet--card > *:not(.sheet__glow) { position: relative; z-index: 1; }

/* маскоты */

.idle__art {
  /* тянется ровно до плашки при любой высоте её текста (RU/EN), поэтому обрезка
     низа всегда совпадает с верхом плашки — уезжающие персонажи не выглядывают
     ни в 16px-щелях вокруг неё, ни в зазоре между. Сверху и с боков запас —
     головы и шарф выходят за контейнер */
  position: relative; flex: 1 1 auto; min-height: 0;
  clip-path: inset(-220px -20px 0 -20px);
}

/* лёгкое «дыхание» маскотов; в кейфреймах повторяем базовый translateX,
   иначе анимация его перезапишет и маскот прыгнет в сторону */
@keyframes mascot-breathe-x {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.025); }
}

@keyframes mascot-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

/* ── цикл персонажей на стартовом (фрейм «Анимация стартовый экран (персонажи)», 2014:685):
   правый персонаж → левый с полароидом (чёрный квадрат + руки) → вспышка →
   квадрат проявляется в фото → пауза → все уходят за плашку → цикл. Общий цикл 9 с. */

.hero {
  position: absolute;
  top: -118px; left: calc(50% - 60px);
  transform: translateX(-50%);
  width: 1212px; height: 1192px;
}

.hero__right,
.hero__front {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.hero__right { animation: hero-right 9s cubic-bezier(.22, .61, .36, 1) infinite both; }
.hero__front { animation: hero-front 9s cubic-bezier(.22, .61, .36, 1) infinite both; }

.hero__front img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; }

/* квадрат — полноразмерный слой фрейма, позиционируется как остальные */
.hero__front img.hero__cover { animation: hero-cover 9s ease infinite both; }

.hero__flash {
  position: absolute;
  top: 606px; left: 559px;
  width: 273px; height: 260px;
  border-radius: 32px;
  background: #fff;
  filter: blur(30px);
  opacity: 0;
  animation: hero-flash 9s ease-out infinite both;
}

/* заезд снизу из-за плашки и уход обратно; между 87% и 100% — пауза за плашкой */
@keyframes hero-right {
  0%        { transform: translateY(980px); }
  9%, 79%   { transform: translateY(0); }
  87%, 100% { transform: translateY(980px); }
}

@keyframes hero-front {
  0%, 9%    { transform: translateY(980px); }
  19%, 75%  { transform: translateY(0); }
  83%, 100% { transform: translateY(980px); }
}

@keyframes hero-flash {
  0%, 22%   { opacity: 0; transform: scale(.6); }
  26%       { opacity: .95; transform: scale(1.15); }
  33%, 100% { opacity: 0; transform: scale(1.25); }
}

@keyframes hero-cover {
  0%, 26%   { opacity: 1; }
  42%, 80%  { opacity: 0; }   /* фото проявилось */
  90%, 100% { opacity: 1; }   /* возврат к «непроявленному», пока спрятан за плашкой */
}

.done__body { display: flex; flex-direction: column; }

.done__art { position: relative; height: 856px; }

.done__art img {
  position: absolute;
  top: 0; left: calc(50% - 19px);
  transform: translateX(-50%);
  width: 856px; height: 856px;
  max-width: none;
  animation: mascot-breathe-x 3.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────── съёмка и обработка */

.media { position: relative; height: 1016px; flex: none; }

.media__card {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 1032px; height: 1605px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 96px;
  padding: 96px 96px 128px;
  border: 1px solid var(--sheet-border);
  border-radius: 64px 64px 0 0;
  background: #000;
  overflow: hidden;
}

.media__card video,
.media__card .media__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* затемнение к низу карточки, чтобы текст читался поверх кадра */
.media__fade {
  position: absolute;
  left: 0; bottom: -154px;
  width: 1032px; height: 778px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  filter: blur(16px);
  pointer-events: none;
}

.media__card > .countdown,
.media__card > .media__caption { position: relative; z-index: 2; }

.countdown {
  font-family: var(--font-text);
  font-size: 512px; line-height: 1; font-weight: 500;
  text-shadow: 0 12px 48px rgba(0, 0, 0, .64);
}

.countdown.is-pulse { animation: pulse .9s ease-out; }

@keyframes pulse { from { transform: scale(1.2); opacity: .25; } }

.media__caption {
  width: 100%;
  font-family: var(--font);
  font-size: 80px; line-height: .9; font-weight: 600;
  text-align: center;
  text-shadow: 0 12px 48px rgba(0, 0, 0, .64);
}

/* световая полоса, идущая снизу вверх во время удаления фона (401:600) */
.lightbar {
  position: absolute;
  top: 50%; left: 50%;
  width: 1852.585px; height: 1852.585px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 3;
}

.lightbar span {
  display: block;
  width: 300px; height: 2319.95px;
  filter: blur(64px);
  background: radial-gradient(ellipse 150px 1160px at 50% 50%, rgba(153, 201, 255, 1) 0%, rgba(153, 201, 255, 0) 100%);
  animation: lightbar-sweep 2.6s ease-in-out infinite alternate;
}

@keyframes lightbar-sweep {
  from { transform: rotate(45deg) translateX(1100px); }
  to   { transform: rotate(45deg) translateX(-1100px); }
}

/* ─────────────────────────────────────────────── чёрная панель (выбор фона и печать) */

.panel {
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  width: 1032px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 96px;
  border: 1px solid var(--sheet-border);
  border-radius: 64px 64px 0 0;
  background: #000;
}

.panel--center { justify-content: center; gap: 96px; }

/* ─────────────────────────────────────────────── выбор фона */

.choose__top { display: flex; flex-direction: column; gap: 96px; width: 100%; }

.choose__stage { position: relative; height: 413.302px; width: 100%; }

.polaroid {
  position: absolute;
  top: -219.7px; right: -30.25px;
  width: 525.136px; height: 793.302px;
  display: flex; align-items: center; justify-content: center;
}

.polaroid__card {
  transform: rotate(5deg);
  padding: 12px 12px 64px;
  border-radius: 24px;
  background: var(--blue);
}

.polaroid__inner {
  position: relative;
  width: 437px; height: 680px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

.polaroid__inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.polaroid__spinner { position: absolute; inset: 0; display: none; background: rgba(0, 0, 0, .55); }
.polaroid__spinner.is-on { display: block; }

.polaroid__spinner::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border: 8px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.choose__bottom {
  display: flex; flex-direction: column;
  gap: 64px;
  width: 100%;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .96));
}

/* карусель уходит за правый край листа на синюю подложку — как в макете */
.thumbs {
  display: flex; gap: 12px;
  align-items: flex-end;
  margin: -40px -120px;
  padding: 40px 120px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  cursor: grab;
}

.thumbs.is-dragging { cursor: grabbing; }

.thumbs::-webkit-scrollbar { display: none; }

.thumb {
  position: relative;
  flex: none;
  width: 414px; height: 643px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  border: 1px solid #fff;
  border-radius: 36px;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--font-text);
  cursor: pointer;
  transition: width .18s ease, height .18s ease, margin .18s ease;
}

.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* мягкая тёмная подложка под подписью — размытый овал, а не градиентная полоса */
.thumb__blur {
  position: absolute;
  left: -31px; bottom: -21px;
  width: 308px; height: 130px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .72);
  filter: blur(32px);
}

.thumb__label {
  position: relative;
  font-size: 48px; line-height: 1; letter-spacing: 0.48px;
  text-align: left;
}

.thumb.is-active {
  width: 422px; height: 651px;
  margin-bottom: 32px;
  border: 4px solid var(--blue);
  border-radius: 40px;
  box-shadow: 0 32px 64px rgba(0, 119, 255, .64), inset 0 0 0 4px #000;
}

.choose__actions { display: flex; gap: 12px; align-items: flex-start; width: 100%; }

/* ─────────────────────────────────────────────── печать */

/* обёртка нужна, чтобы анимация появления (data-anim) и пульс не спорили за transform */
.printing__artbox { flex: none; margin: 0 -98px; }

/* без пульса: маскот печати запечён на чёрном, при масштабировании видно края картинки */
.printing__art {
  display: block;
  width: 1036px; height: 1036px;
  object-fit: cover;
}

.printing__body { display: flex; flex-direction: column; gap: 96px; width: 100%; }

.printing__body .textblock { filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .96)); }

.spinner { width: 192px; height: 192px; animation: spin 1.1s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* бегущее многоточие «Убираем фон…»: точки загораются по одной и цикл начинается заново */
.dots span:nth-child(2) { animation: dot-2 1.35s infinite; }
.dots span:nth-child(3) { animation: dot-3 1.35s infinite; }

@keyframes dot-2 { 0%, 32% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes dot-3 { 0%, 65% { opacity: 0; } 66%, 100% { opacity: 1; } }

/* ─────────────────────────────────────────────── язык, тост, угол админа */

.langbar {
  /* центр тумблера на одной оси с логотипом (168px); translateY здесь нельзя —
     его перезаписала бы анимация появления anim-down */
  position: absolute; top: 116px; right: 80px;
  z-index: 6;
  display: flex; gap: 8px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.langbar button {
  appearance: none; border: 0; cursor: pointer;
  padding: 22px 44px;
  border-radius: 999px;
  font-family: var(--font); font-size: 40px; font-weight: 600;
  color: #fff; background: transparent;
}

.langbar button.is-active { background: #fff; color: #000; }

.langbar.is-hidden { display: none; }

.admin-hotspot { position: absolute; top: 0; left: 0; width: 190px; height: 190px; z-index: 9; }

.toast {
  position: absolute; left: 48px; right: 48px; bottom: 48px;
  z-index: 20;
  padding: 32px 40px;
  border-radius: 28px;
  background: rgba(210, 30, 45, .96);
  font-size: 34px; line-height: 1.25;
  opacity: 0; transform: translateY(30px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.toast.is-on { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────── экран настроек */

.settings { background: #0c0d12; overflow-y: auto; cursor: default; }
.settings__inner { padding: 72px 64px 96px; }
.settings__title { font-family: var(--font); font-size: 64px; font-weight: 600; }
.settings__hint { margin-top: 16px; font-size: 28px; line-height: 1.4; opacity: .6; }

.set-group { margin-top: 48px; padding: 40px; border-radius: 32px; background: #14161e; }

.set-group h2 { font-family: var(--font); font-size: 38px; font-weight: 600; margin-bottom: 26px; }

.set-group label { display: block; margin-bottom: 20px; font-size: 26px; opacity: .8; }

.set-group .row { display: flex; gap: 24px; }
.set-group .row label { flex: 1; }

.set-group input[type="text"],
.set-group input[type="number"],
.set-group select {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 20px 22px;
  border: 2px solid #262b39;
  border-radius: 18px;
  background: #0c0d12;
  color: #fff;
  font-family: var(--font-text); font-size: 30px;
}

.set-group label.check { display: flex; align-items: center; gap: 16px; font-size: 28px; opacity: .9; }
.set-group label.check input { width: 30px; height: 30px; }

.methods { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }

.set-group label.method {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "radio name" "radio desc";
  gap: 4px 18px;
  margin: 0;
  padding: 26px 28px;
  border: 2px solid #262b39;
  border-radius: 22px;
  opacity: 1;
}

.set-group label.method:has(input:checked) { border-color: var(--blue); background: rgba(0, 119, 255, .12); }
.set-group label.method input { grid-area: radio; width: 30px; height: 30px; align-self: center; }
.method__name { grid-area: name; font-size: 32px; font-weight: 600; }
.method__desc { grid-area: desc; font-size: 24px; opacity: .6; }

.cam-preview {
  position: relative;
  margin: 24px auto 0;
  width: 340px; height: 604px;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
}
.cam-preview video { position: absolute; width: 100%; height: 100%; object-fit: cover; }

.settings__status { margin-top: 32px; font-size: 28px; min-height: 36px; color: #7ef0a4; }
.settings__status.is-error { color: #ff8a95; }

.settings__actions { display: flex; gap: 24px; margin-top: 40px; }
.settings__actions .btn { flex: 1; padding: 30px 0; font-size: 34px; border-radius: 22px; }


/* ─────────────────────────────────────────────── переходы между экранами */

/* уходящий экран просто гаснет — новый в это время уже собирается из блоков */
.screen.is-fade-out { animation: screen-fade-out .26s ease both; z-index: 4; }

@keyframes screen-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* появление блоков внутри экрана: сверху, снизу или проявлением */
.screen.is-play [data-anim] { animation-delay: var(--d, 0s); }

.screen.is-play [data-anim="down"] { animation: anim-down .55s cubic-bezier(.22, .61, .36, 1) both; }
.screen.is-play [data-anim="up"]   { animation: anim-up .6s cubic-bezier(.22, .61, .36, 1) both; }
.screen.is-play [data-anim="fade"] { animation: anim-fade .7s ease both; }

@keyframes anim-down { from { opacity: 0; transform: translateY(-90px); } to { opacity: 1; transform: none; } }
@keyframes anim-up   { from { opacity: 0; transform: translateY(120px); } to { opacity: 1; transform: none; } }
@keyframes anim-fade { from { opacity: 0; } to { opacity: 1; } }

/* langbar живёт вне экранов, поэтому анимируется отдельно */
.langbar.is-play { animation: anim-down .55s cubic-bezier(.22, .61, .36, 1) .1s both; }