/* =============================================================
   Телефон — фотография корпуса, переписка рисуется поверх.

   Обтравка сделана один раз и зашита в файл: фон снимка вырезан
   по яркости, поэтому по краю рамки нет ни белой каймы, ни
   шахматки. Экран — не картинка, а живой блок: сообщения
   появляются, текст остаётся резким на ретине и читается поиском.

   Геометрия снята с самого снимка, а не подобрана на глаз.
   Файл 658×1316. Стекло внутри рамки:
     слева 27px, справа 26px, сверху 22px, снизу 22px,
     радиус скругления 85px.
   Отсюда все проценты ниже. Меняешь картинку — пересними числа,
   иначе переписка наедет на рамку.
   ============================================================= */

.phone {
  position: relative;
  /* Размер задаём по высоте, а не по ширине: телефон должен
     влезать в первый экран целиком на любом ноутбуке, иначе
     переписка — главный аргумент страницы — оказывается за краем. */
  height: min(620px, 68vh);
  width: auto;
  aspect-ratio: 658 / 1316;
  transform-style: preserve-3d;
  transition: transform .9s var(--ease-soft);

  /* корпус — снимок. webp для скорости, png для старых браузеров */
  background:
    image-set(url(/v3/phone.webp) type("image/webp"),
              url(/v3/phone.png)  type("image/png"))
    center / contain no-repeat;

  /* Тень идёт по контуру самой фотографии, а не по прямоугольнику —
     потому фильтром, а не box-shadow. */
  filter:
    drop-shadow(0 34px 44px rgba(14,18,32,.30))
    drop-shadow(0 8px 14px rgba(14,18,32,.18));
}

/* Свечение под телефоном — фирменное, вместо серой тени */
.phone::after {
  content: ''; position: absolute; z-index: -1;
  left: 8%; right: 8%; bottom: -6%; height: 22%;
  background: radial-gradient(50% 60% at 50% 50%, rgba(59,73,223,.4), transparent 70%);
  filter: blur(26px);
}

/* Боковые кнопки нарисованы на самой фотографии */
.phone .btn-side { display: none }

/* Экран — точно по стеклу на снимке (см. числа в шапке файла). */
.screen {
  position: absolute; z-index: 2;
  left: 4.1%; right: 3.95%; top: 1.67%; bottom: 1.67%;
  border-radius: 14% / 6.7%;
  overflow: hidden;
  background: linear-gradient(180deg, #12162A, #0B0E1A);
  display: flex; flex-direction: column;
}

/* Блик на стекле: узкая полоса под углом, едва заметная.
   Именно она отличает «экран» от «чёрного прямоугольника». */
.screen::after {
  content: ''; position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  background: linear-gradient(122deg,
    rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 22%,
    transparent 42%, transparent 100%);
}

/* Вырез камеры */
.notch {
  position: absolute; z-index: 4;
  top: 2.4%; left: 50%; transform: translateX(-50%);
  width: 32%; height: 3.4%;
  background: #05070C;
  border-radius: 999px;
}
.notch::after {
  content: ''; position: absolute; right: 13%; top: 50%;
  width: 15%; aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2A3550, #070A12 70%);
}

.scr-top { padding: 9% 5% 3.4%; }