/*
 * Рамки устройств для концептов сайта soqqa.club. Размеры — в em: 1em = 10 точек экрана, поэтому
 * экраны из макетов (812 × 375, 951 × 669, 678 × 466) встают без искажений. Масштаб всей рамки —
 * font-size (переменная --size). Материал — переменные --f1…--f3. Разметку собирает devices.js.
 */

.dev {
  --size: 6px;
  --b: 1.4;
  --r: 6;
  --sr: 4.8;
  --rb: var(--r);
  --srb: var(--sr);
  --f1: #2b2b2d;
  --f2: #6b6b70;
  --f3: #1a1a1c;
  --fit: cover;
  position: relative;
  display: block;
  flex: none;
  box-sizing: content-box;
  font-size: var(--size);
  width: calc(var(--sw) * 1em);
  height: calc(var(--sh) * 1em);
  padding: calc(var(--b) * 1em);
  border-radius: calc(var(--r) * 1em) calc(var(--r) * 1em) calc(var(--rb) * 1em) calc(var(--rb) * 1em);
  background: linear-gradient(135deg, var(--f1) 0%, var(--f2) 38%, var(--f1) 52%, var(--f2) 78%, var(--f3) 100%);
  box-shadow:
    inset 0 0 0 0.12em rgba(255, 255, 255, 0.28),
    inset 0 0 0 0.42em var(--f3),
    inset 0 0 0 0.62em #050506,
    0 4em 7em -1.5em rgba(0, 0, 0, 0.55),
    0 1.2em 2.4em -0.6em rgba(0, 0, 0, 0.45);
}

.dev-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--sr) * 1em) calc(var(--sr) * 1em) calc(var(--srb) * 1em) calc(var(--srb) * 1em);
  background: #51694e url('texture.webp') center / cover;
  isolation: isolate;
}

.dev-screen img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--fit);
  transition: opacity 0.6s ease;
}

/* Отражение стекла. */
.dev-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 26%, rgba(255, 255, 255, 0) 42%);
}

/* Детали корпуса. */
.dev .island {
  position: absolute;
  z-index: 2;
  left: 1.1em;
  top: 50%;
  width: 3.4em;
  height: 11.6em;
  transform: translateY(-50%);
  border-radius: 2em;
  background: #000;
}

.dev .punch {
  position: absolute;
  z-index: 2;
  left: 1.7em;
  top: 50%;
  width: 1.5em;
  height: 1.5em;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #33465a 0 18%, #05070a 46%);
  box-shadow: 0 0 0 0.25em #000;
}

.dev .cam {
  position: absolute;
  z-index: 2;
  top: calc(var(--b) * 0.5em - 0.32em);
  left: 50%;
  width: 0.64em;
  height: 0.64em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b5068 0 20%, #07090c 55%);
}

.dev .btn {
  position: absolute;
  z-index: -1;
  height: 0.5em;
  top: -0.36em;
  border-radius: 0.4em 0.4em 0 0;
  background: linear-gradient(180deg, var(--f2), var(--f1));
}

.dev .btn-a { left: 13em; width: 5.4em; }
.dev .btn-b { left: 20em; width: 5.4em; }
.dev .btn-c { left: auto; right: 22em; width: 8em; top: auto; bottom: -0.36em; border-radius: 0 0 0.4em 0.4em; }

/* Складка раскрытого iPhone Duo. */
.dev .hinge {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4em;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 44%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.14) 56%, rgba(0, 0, 0, 0) 100%);
}

/* Модели. */
.dev.iphone {
  --sw: 81.2; --sh: 37.5; --b: 1.35; --r: 6.2; --sr: 4.9;
  --f1: #4a4640; --f2: #b5ab9b; --f3: #2c2a26;
}

.dev.ipad {
  --sw: 95.1; --sh: 66.9; --b: 2.6; --r: 4.6; --sr: 2.1;
  --f1: #2f3033; --f2: #7d7f85; --f3: #1c1d1f;
}

.dev.duo {
  --sw: 95.1; --sh: 66.9; --b: 1.25; --r: 3.4; --sr: 2.3;
  --f1: #5a5a5f; --f2: #d6d6da; --f3: #343437;
}

/*
 * Внешний экран iPhone Duo в горизонтальном положении (Figma «Пояснения: iPhone Duo», 2835:7035): 678 × 466,
 * сверху — сторона камеры и строки состояния (сильно скруглённые углы, камера — вырез слева), снизу — сгиб
 * (углы почти прямые). Игра рисуется в масштабе 0,96, прижата к низу и заходит под полоску «Домой».
 */
.dev.duo-cover {
  --sw: 67.8; --sh: 46.6; --b: 1.35; --r: 7.6; --sr: 6.2; --rb: 3; --srb: 1.8;
  --f1: #5a5a5f; --f2: #d6d6da; --f3: #343437;
}
.dev.duo-cover .dev-screen img { inset: auto 2% 0; width: 96%; height: 96%; }
.dev .ccam {
  position: absolute;
  z-index: 2;
  left: 3.7em;
  top: 5em;
  width: 1.75em;
  height: 1.75em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #3a4656 0 16%, #06080b 50%);
  box-shadow: 0 0 0 0.3em #000;
}

.dev.android {
  --sw: 83.6; --sh: 37.5; --b: 1.05; --r: 4.4; --sr: 3.7;
  --f1: #1d2124; --f2: #565c62; --f3: #0f1113;
}

.dev.atab {
  --sw: 107; --sh: 66.9; --b: 2.3; --r: 3.3; --sr: 1.7; --fit: contain;
  --f1: #3a3d41; --f2: #8a8e94; --f3: #222427;
}

/* Сложенный и раскрытый iPhone Duo в одном месте: .dev-duo.is-folded показывает сложенный. */
.dev-duo {
  --size: 6px;
  position: relative;
  display: block;
  flex: none;
  font-size: var(--size);
  width: calc((95.1 + 2.5) * 1em);
  height: calc((66.9 + 2.5) * 1em);
  perspective: 160em;
}

.dev-duo > .dev {
  position: absolute;
  font-size: 1em;
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.6s ease;
}

.dev-duo > .duo {
  inset: 0;
  transform-origin: 50% 50%;
}

.dev-duo > .duo-cover {
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) rotateY(-70deg) scale(0.9);
}

.dev-duo.is-folded > .duo {
  opacity: 0;
  transform: rotateY(70deg) scaleX(0.5);
}

.dev-duo.is-folded > .duo-cover {
  opacity: 1;
  transform: translate(-50%, -50%) rotateY(0) scale(1);
  transition-delay: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  .dev-duo > .dev,
  .dev-screen img {
    transition: none;
  }
}

/*
 * Чистый корпус (.dev.clean): почти чёрная рамка вокруг экрана, тёмно-серый корпус и тонкий светлый кант
 * по внешнему краю, без кнопок и металлических бликов. Нарисован здесь, без чужой графики.
 */
.dev.clean {
  background: #050506;
  box-shadow:
    inset 0 0 0 max(1.5px, 0.16em) #5c5c62,
    inset 0 0 0 max(3px, 0.32em) #2a2a2e,
    inset 0 0 0 max(5px, 0.62em) #161618,
    inset 0 max(1px, 0.2em) max(3px, 0.6em) rgba(255, 255, 255, 0.06),
    0 4em 8em -2em rgba(0, 0, 0, 0.75),
    0 1.2em 2.6em -0.8em rgba(0, 0, 0, 0.55);
}
.dev.clean .btn { display: none; }
.dev.clean .dev-screen::after {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 32%);
}
.dev.clean .cam {
  width: 0.7em;
  height: 0.7em;
  background: radial-gradient(circle at 38% 38%, #39424f 0 18%, #0a0b0d 52%);
  box-shadow: 0 0 0 0.12em #111113;
}
/* Пропорции ближе к нынешним устройствам: шире рамка у планшетов, скругления крупнее. */
.dev.clean.ipad { --b: 2.9; --r: 5.4; --sr: 2.6; }
.dev.clean.atab { --b: 2.7; --r: 4.4; --sr: 2.2; }
.dev.clean.iphone { --b: 1.45; --r: 6.6; --sr: 5.2; }
.dev.clean.android { --b: 1.25; --r: 5; --sr: 3.9; }
.dev.clean.duo { --b: 1.35; --r: 3.8; --sr: 2.6; }
.dev.clean.duo-cover { --b: 1.45; --r: 8.2; --sr: 6.6; --rb: 3.4; --srb: 2; }