/* ============================================================
   scene.css — мокапы как кадры из студии.

   Устройство стоит не во весь кадр, а в воздухе: заметно меньше рамки,
   под небольшим углом, с мягким светом по стене и длинной тенью на полу.
   Общий файл: карточки на главной (.shot) и первый кадр страниц
   проектов (.scene). Цвет сцены у каждого проекта свой, но светлый и
   тихий: тёмный экран должен читаться на нём, а не сливаться.
   ============================================================ */
.shot, .scene {
  --wall: #e9e5df;
  --wall-2: #cfc9c0;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; isolation: isolate; container-type: size;
  background:
    radial-gradient(120% 90% at 18% 0%, var(--wall) 0%, var(--wall-2) 100%);
}
/* свет из окна: наклонная полоса, и затемнение к полу */
.shot::before, .scene::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.34) 36%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.12) 100%);
}
/* тень на полу под устройством */
.shot::after, .scene::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset-inline-start: 50%; inset-block-end: 11%; inline-size: 54%; block-size: 9%;
  translate: -44% 0; transform: skewX(-24deg);
  background: radial-gradient(closest-side, rgba(20, 14, 10, 0.55), rgba(20, 14, 10, 0) 100%);
  filter: blur(6px);
}
.shot--phones::after, .scene--phones::after { inline-size: 46%; block-size: 7%; inset-block-end: 9%; }

/* цвета сцен: светлая стена с оттенком проекта */
.shot--pda,   .scene--pda   { --wall: #f3d2bf; --wall-2: #cf8a68; }
.shot--arivin,.scene--arivin{ --wall: #cfe6e8; --wall-2: #5d9fae; }
.shot--leaf,  .scene--leaf  { --wall: #eef3e4; --wall-2: #a9c7a4; }
.shot--aong,  .scene--aong  { --wall: #f4fbb6; --wall-2: #c2dc4c; }
.shot--wish,  .scene--wish  { --wall: #ffd7e8; --wall-2: #e98ec0; }
.shot--lw,    .scene--lw    { --wall: #d8d2ff; --wall-2: #7a6de0; }
/* старые фоновые правила главной ниже перебиваются: у них та же специфичность, но этот файл идёт после */
.shot--pda, .shot--arivin, .shot--leaf, .shot--aong, .shot--wish, .shot--lw,
.scene--pda, .scene--arivin, .scene--leaf, .scene--aong, .scene--wish, .scene--lw {
  background: radial-gradient(120% 90% at 18% 0%, var(--wall) 0%, var(--wall-2) 100%);
}

/* ноутбук: меньше кадра, чуть повёрнут, экран с бликом */
.shot .mac, .scene .mac {
  position: relative; z-index: 1; inline-size: 54%;
  transform: perspective(1600px) rotateX(4deg) rotateY(-16deg) rotate(0.5deg);
  transform-origin: 50% 70%;
  filter: drop-shadow(0 22px 24px rgba(30, 20, 14, 0.30)) drop-shadow(0 3px 5px rgba(30, 20, 14, 0.22));
}
.shot .mac__lid::after, .scene .mac__lid::after {
  content: ''; position: absolute; inset: 2% 2% 2.6%; border-radius: 3px; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 38%);
}

/* телефоны: целиком в кадре, две-три штуки в воздухе, без обрезки снизу */
.shot--phones, .scene--phones { align-items: center; gap: 3%; }
.shot--phones .phone, .scene--phones .phone {
  position: relative; z-index: 1; inline-size: 17%; margin-block-end: 0;
  box-shadow: 0 0 0 1.5px #48484c, 0 26px 34px rgba(30, 20, 14, 0.30);
  transform: perspective(1400px) rotateY(14deg) rotate(1deg);
}
.shot--phones .phone + .phone, .scene--phones .phone + .phone { transform: perspective(1400px) rotateY(-14deg) rotate(-1deg) translateY(-6%); }
.shot--phones .phone--solo, .scene--phones .phone--solo { inline-size: 20%; transform: perspective(1400px) rotateY(-14deg) rotate(-1deg); }
.shot--phones .phone--tab, .scene--phones .phone--tab { inline-size: 21%; }
.shot--lw .phone:first-child, .scene--lw .phone:first-child { transform: perspective(1400px) rotateY(14deg) rotate(-3deg); }
.shot--lw .phone:last-child, .scene--lw .phone:last-child { transform: perspective(1400px) rotateY(-14deg) rotate(3deg) translateY(-6%); }
.shot--lw, .scene--lw { gap: 4%; }

@media (max-width: 900px) {
  .shot .mac, .scene .mac { inline-size: 60%; }
  .shot--phones .phone, .scene--phones .phone { inline-size: 21%; }
  .shot--phones .phone--solo, .scene--phones .phone--solo { inline-size: 25%; }
  .shot--phones .phone--tab, .scene--phones .phone--tab { inline-size: 26%; }
}
@media (prefers-reduced-motion: reduce) {
  .shot, .scene { transition: none; }
}

/* ------------------------------------------------------------
   Телефоны в сценах: база (рамка, остров, экран). Размеры и повороты выше.
   ------------------------------------------------------------ */
.shot .phone, .scene .phone { position: relative; display: block; flex: none; aspect-ratio: 390 / 800; padding: 0.42cqw; background: #0b0b0c; border-radius: 15% / 7%; }
.shot .phone img, .scene .phone img { display: block; inline-size: 100%; block-size: 100%; box-sizing: border-box; padding-block-start: 11%; background: var(--scr, #fff); object-fit: cover; object-position: 50% 0; border-radius: 12.5% / 5.8%; }
.shot .phone::after, .scene .phone::after { content: ''; position: absolute; inset-block-start: 3.6%; inset-inline-start: 50%; inline-size: 26%; block-size: 2.3%; margin-inline-start: -13%; background: #000; border-radius: 99px; }
.shot .phone--tab, .scene .phone--tab { aspect-ratio: 744 / 1030; padding: 0.46cqw; border-radius: 7% / 5%; }
.shot .phone--solo, .scene .phone--solo { padding: 0.48cqw; }
.shot .phone--tab img, .scene .phone--tab img { padding-block-start: 0; border-radius: 5.4% / 3.8%; }
.shot .phone--tab::after, .scene .phone--tab::after { display: none; }
.scene--phones { container-type: size; }

@media (max-width: 900px) {
  .shot .phone, .scene .phone { padding: 0.5cqw; }
  .shot .phone--solo, .scene .phone--solo { padding: 0.6cqw; }
  .shot .phone--tab, .scene .phone--tab { padding: 0.57cqw; }
}

/* ------------------------------------------------------------
   Готовые фотографии-мокапы (ноутбук в сцене): картинка заполняет кадр целиком.
   ------------------------------------------------------------ */
.shot--photo, .scene--photo { background: #1e2126; }
.shot--photo::before, .shot--photo::after, .scene--photo::before, .scene--photo::after { display: none; }
.shot--photo > img, .scene--photo > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.shot--pda > img, .scene--pda > img { object-position: 50% 45%; }
.shot--arivin > img, .scene--arivin > img { object-position: 50% 50%; }
.shot--leaf > img, .scene--leaf > img { object-position: 60% 50%; }

/* ============================================================
   Сцены приложений в работе: чисто и по-яблочному. Мягкий фон цвета проекта, устройства целиком, без реквизита,
   лёгкая перспектива и тень на полу. Размеры в cqw/cqh сцены: на карточке и в начале страницы композиция одна.
   ============================================================ */
.shot--art, .scene--art { container-type: size; }
.sc-ph, .sc-ip { position: absolute; z-index: 3; }
.sc-ph .dev, .sc-ip .ipd { inline-size: 100%; }
.sc-floor { position: absolute; z-index: 1; inset-inline: 18cqw; inset-block-end: 4cqh; block-size: 8cqh; background: radial-gradient(closest-side, rgba(30, 22, 38, 0.30), rgba(30, 22, 38, 0)); filter: blur(1.4cqw); pointer-events: none; }
.shot--art::before, .scene--art::before { opacity: 0.55; }
.shot--art::after, .scene--art::after { display: none; }

.shot--aong, .scene--aong { background: radial-gradient(110% 100% at 25% 0%, #f6f4ee 0%, #e4e0d7 62%, #d3cec3 100%); }
.shot--aong .sc-ph--a, .scene--aong .sc-ph--a { inline-size: 23cqw; inset-inline-start: 26.5cqw; inset-block-start: 11cqh; transform: perspective(1800px) rotateY(10deg) rotateX(2deg); }
.shot--aong .sc-ph--b, .scene--aong .sc-ph--b { inline-size: 23cqw; inset-inline-start: 51cqw; inset-block-start: 5cqh; transform: perspective(1800px) rotateY(-10deg) rotateX(2deg); }

.shot--wish, .scene--wish { background: radial-gradient(110% 100% at 25% 0%, #fff2f8 0%, #f6dcec 55%, #e3d9fb 100%); }
.shot--wish .sc-ph--w, .scene--wish .sc-ph--w { inline-size: 26cqw; inset-inline-start: 37cqw; inset-block-start: 4cqh; transform: perspective(1800px) rotateY(-8deg) rotateX(2deg); }

.shot--lw, .scene--lw { background: radial-gradient(110% 100% at 25% 0%, #eceaff 0%, #cfc9f6 58%, #b3a9ee 100%); }
.sc-ip--parent { inline-size: 31cqw; inset-inline-start: 16cqw; inset-block-start: 20cqh; transform: perspective(1800px) rotateY(10deg) rotateX(2deg); }
.sc-ip--child { inline-size: 34cqw; inset-inline-start: 44cqw; inset-block-start: 6cqh; z-index: 4; transform: perspective(1800px) rotateY(-9deg) rotateX(2deg); }
.ipd { container-type: inline-size; }
.ipd__frame { position: relative; padding: 3.4cqw; border-radius: 8cqw; background: #0b0b0c; box-shadow: 0 0 0 0.5cqw #54545a, 0 0 0 1.2cqw #0e0e10, 0 8cqw 12cqw rgba(30, 14, 40, 0.38); }
.ipd__cam { position: absolute; inset-inline-start: 50%; inset-block-start: 1.2cqw; translate: -50% 0; inline-size: 1.7cqw; aspect-ratio: 1; border-radius: 50%; background: #1f2a3a; }
.ipd__screen { aspect-ratio: 744 / 1030; overflow: hidden; border-radius: 3.6cqw; background: #0e1160; }
.ipd__screen img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ============================================================================================
   Телефон-макет (phones.js): как настоящий iPhone. Титановая рамка, маленький динамик-остров,
   строка статуса (время, сигнал, wi-fi, батарея) и полоска «домой». Макет приложения начинается ниже
   строки статуса, а не лезет под остров. Снимок целиком внутри экрана, а если он выше, листается внутри.
   Все размеры в cqw от ширины самого телефона, поэтому он одинаков при любой величине.
   ============================================================================================ */
.devfig { margin: 0; display: grid; justify-items: center; align-content: start; gap: var(--space-24); }
.dev { container-type: inline-size; inline-size: min(100%, 300px); position: relative; }
.dev__frame { position: relative; padding: 2.4cqw; border-radius: 15cqw; background: linear-gradient(145deg, #6a6a70 0%, #1e1e21 26%, #3b3b41 60%, #17171a 100%); box-shadow: 0 0 0 0.3cqw #7c7c82, 0 0 0 0.9cqw #0d0d0f, 0 7cqw 11cqw rgba(0, 0, 0, 0.5), 0 2cqw 4cqw rgba(0, 0, 0, 0.35); }
.dev__frame::before { content: ''; position: absolute; inset-inline-end: -1.5cqw; inset-block-start: 31cqw; inline-size: 1.2cqw; block-size: 16cqw; border-radius: 0 0.6cqw 0.6cqw 0; background: #4a4a50; }
.dev__frame::after { content: ''; position: absolute; inset-inline-start: -1.5cqw; inset-block-start: 24cqw; inline-size: 1.2cqw; block-size: 9cqw; border-radius: 0.6cqw 0 0 0.6cqw; background: #4a4a50; box-shadow: 0 13cqw 0 #4a4a50, 0 24cqw 0 #4a4a50; }
.dev__body { position: relative; aspect-ratio: 393 / 852; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 12.6cqw; background: var(--scr, #fff); color: var(--sb, #0d0d0c); isolation: isolate; }
.dev__body::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 32%); }
.dev__status { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; block-size: 13.4cqw; padding-inline: 8.6cqw 7.4cqw; padding-block-start: 1.6cqw; background: var(--scr, #fff); font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; }
.dev__time { font-size: 4.2cqw; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dev__island { position: absolute; inset-inline-start: 50%; inset-block-start: 3cqw; translate: -50% 0; inline-size: 30cqw; block-size: 8.8cqw; border-radius: 99cqw; background: #000; }
.dev__sys { display: inline-flex; align-items: center; gap: 1.7cqw; }
.dev__sys svg { display: block; block-size: 3.2cqw; inline-size: auto; fill: currentColor; }
.dev__sys .dev__bat { block-size: 3.4cqw; }
.dev__screen { position: relative; min-block-size: 0; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; background: var(--scr, #fff); }
.dev__screen::-webkit-scrollbar { display: none; }
.dev__screen img { display: block; inline-size: 100%; block-size: auto; }
.dev__screen:focus-visible { outline: 3px solid var(--color-accent, #b00c3a); outline-offset: -3px; }
.dev__home { position: absolute; z-index: 4; inset-inline-start: 50%; inset-block-end: 2cqw; translate: -50% 0; inline-size: 34cqw; block-size: 1.3cqw; border-radius: 99cqw; background: var(--sb, #0d0d0c); opacity: 0.55; pointer-events: none; }
.dev__fade { position: absolute; z-index: 4; inset-inline: 0; inset-block-end: 0; display: flex; align-items: flex-end; justify-content: center; block-size: 22cqw; padding-block-end: 6.4cqw; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.55) 100%); color: #fff; font-size: 7cqw; line-height: 0.6; font-weight: 400; pointer-events: none; opacity: 0; transition: opacity 300ms ease; }
.dev.is-scroll:not(.is-end) .dev__fade { opacity: 1; }
.devfig .phone__cap, .devfig figcaption { justify-self: stretch; max-inline-size: 36ch; margin-inline: auto; }
@media (max-width: 900px) { .dev { inline-size: min(100%, 280px); } }

/* Экран телефона: включается кликом. Пока не включён, он не перехватывает ни колесо, ни палец */
.dev.is-scroll:not(.is-active) .dev__screen { cursor: pointer; }
.dev.is-active .dev__screen { overflow-y: auto; cursor: auto; }
.dev.is-active .dev__frame { box-shadow: 0 0 0 0.3cqw #9a9aa2, 0 0 0 1.3cqw rgba(255, 255, 255, 0.28), 0 7cqw 11cqw rgba(0, 0, 0, 0.5), 0 2cqw 4cqw rgba(0, 0, 0, 0.35); }
.dev.is-active .dev__fade { opacity: 0 !important; }

/* ============================================================================================
   Сцены приложений в работе, новая версия: тонированный глубокий фон, экраны под разными углами,
   плавающие карточки-вырезки поверх. Размеры в cqw/cqh сцены, поэтому на карточке и на странице композиция одна.
   ============================================================================================ */
.shot--aong, .scene--aong { background: radial-gradient(95% 120% at 20% 0%, #4d566c 0%, #2b3141 55%, #171a23 100%); }
.shot--wish, .scene--wish { background: radial-gradient(95% 120% at 20% 0%, #5d504e 0%, #392f2d 55%, #1b1716 100%); }
.shot--lw,   .scene--lw   { background: radial-gradient(95% 120% at 20% 0%, #747aa8 0%, #484d78 55%, #232640 100%); }
.shot--art::before, .scene--art::before { opacity: 0.16; }
.sc-floor { inset-inline: 14cqw; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
.sc-card { position: absolute; z-index: 6; display: block; border-radius: 2.2cqw; box-shadow: 0 2.4cqw 5cqw rgba(0, 0, 0, 0.42), 0 0.4cqw 1cqw rgba(0, 0, 0, 0.3); }
.sc-card img { display: block; inline-size: 100%; block-size: auto; border-radius: inherit; }

/* AONG */
.shot--aong .sc-ph--a, .scene--aong .sc-ph--a { inline-size: 23.5cqw; inset-inline-start: 25cqw; inset-block-start: 11cqh; z-index: 4; transform: rotate(-5deg); }
.shot--aong .sc-ph--b, .scene--aong .sc-ph--b { inline-size: 21cqw; inset-inline-start: 48.5cqw; inset-block-start: 3cqh; z-index: 3; transform: rotate(6deg); }
.sc-card--1 { }
.shot--aong .sc-card--1, .scene--aong .sc-card--1 { inline-size: 24cqw; inset-inline-start: 63cqw; inset-block-start: 52cqh; transform: rotate(-4deg); }
.shot--aong .sc-card--2, .scene--aong .sc-card--2 { inline-size: 17cqw; inset-inline-start: 10cqw; inset-block-start: 60cqh; transform: rotate(4deg); }

/* Wishlist */
.shot--wish .sc-ph--d, .scene--wish .sc-ph--d { inline-size: 21cqw; inset-inline-start: 19cqw; inset-block-start: 20cqh; z-index: 3; transform: rotate(-7deg); }
.shot--wish .sc-ph--w, .scene--wish .sc-ph--w { inline-size: 26cqw; inset-inline-start: 37cqw; inset-block-start: 5cqh; z-index: 4; transform: rotate(2deg); }
.shot--wish .sc-card--1, .scene--wish .sc-card--1 { inline-size: 22cqw; inset-inline-start: 65cqw; inset-block-start: 42cqh; transform: rotate(5deg); }

/* Little Wins */
.shot--lw .sc-ip--parent, .scene--lw .sc-ip--parent { inline-size: 27cqw; inset-inline-start: 18cqw; inset-block-start: 26cqh; z-index: 3; transform: rotate(-5deg); }
.shot--lw .sc-ip--child, .scene--lw .sc-ip--child { inline-size: 30cqw; inset-inline-start: 44cqw; inset-block-start: 8cqh; z-index: 4; transform: rotate(4deg); }
.shot--lw .sc-card--1, .scene--lw .sc-card--1 { inline-size: 24cqw; inset-inline-start: 8cqw; inset-block-start: 12cqh; transform: rotate(-4deg); }
.shot--lw .sc-card--2, .scene--lw .sc-card--2 { inline-size: 21cqw; inset-inline-start: 68cqw; inset-block-start: 58cqh; transform: rotate(5deg); }
@media (prefers-reduced-motion: no-preference) {
  .sc-card--1 { animation: sc-float 7s ease-in-out infinite; }
  .sc-card--2 { animation: sc-float 8.5s ease-in-out infinite -3s; }
}
@keyframes sc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqh; } }

/* Без плавающих карточек: только устройства, чуть крупнее и по центру */
.sc-card { display: none; }
.shot--aong .sc-ph--a, .scene--aong .sc-ph--a { inline-size: 25cqw; inset-inline-start: 28cqw; inset-block-start: 10cqh; }
.shot--aong .sc-ph--b, .scene--aong .sc-ph--b { inline-size: 22.5cqw; inset-inline-start: 50cqw; inset-block-start: 4cqh; }
.shot--wish .sc-ph--d, .scene--wish .sc-ph--d { inline-size: 22cqw; inset-inline-start: 28cqw; inset-block-start: 18cqh; }
.shot--wish .sc-ph--w, .scene--wish .sc-ph--w { inline-size: 26.5cqw; inset-inline-start: 46cqw; inset-block-start: 5cqh; }
.shot--lw .sc-ip--parent, .scene--lw .sc-ip--parent { inline-size: 29cqw; inset-inline-start: 19cqw; inset-block-start: 24cqh; }
.shot--lw .sc-ip--child, .scene--lw .sc-ip--child { inline-size: 32cqw; inset-inline-start: 47cqw; inset-block-start: 8cqh; }

/* ============================================================================================
   Раунд 13: приложения лежат на настоящей поверхности (бетон, камень, светлое дерево) в свете из окна,
   как макеты PDA, Arivin и Studio Leaf. Поверхности рисует scripts/make_env.py.
   ============================================================================================ */
.shot--aong, .scene--aong { background: #d6d8de url('assets/img/scenes/env-aong.jpg') center / cover no-repeat; }
.shot--wish, .scene--wish { background: #e6ddcd url('assets/img/scenes/env-wish.jpg') center / cover no-repeat; }
.shot--lw,   .scene--lw   { background: #d4b894 url('assets/img/scenes/env-lw.jpg') center / cover no-repeat; }
.shot--art::before, .scene--art::before { display: none; }
.sc-floor { display: none; }
/* лёгкая тень от устройства на столе: свет слева сверху, тень падает вправо вниз */
.shot--aong .dev__frame, .scene--aong .dev__frame, .shot--wish .dev__frame, .scene--wish .dev__frame {
  box-shadow: 0 0 0 0.3cqw #7c7c82, 0 0 0 0.9cqw #0d0d0f, 1.2cqw 2.2cqw 2.4cqw rgba(40, 32, 24, 0.30), 3.6cqw 7cqw 8cqw rgba(40, 32, 24, 0.22), 7cqw 12cqw 16cqw rgba(40, 32, 24, 0.16);
}
.shot--lw .ipd__frame, .scene--lw .ipd__frame {
  box-shadow: 0 0 0 0.5cqw #54545a, 0 0 0 1.2cqw #0e0e10, 1.6cqw 2.6cqw 3cqw rgba(50, 36, 22, 0.32), 5cqw 8cqw 9cqw rgba(50, 36, 22, 0.24), 9cqw 14cqw 18cqw rgba(50, 36, 22, 0.16);
}
/* сверху вниз, как лежат на столе: больше поворот, без перспективы */
.shot--aong .sc-ph--a, .scene--aong .sc-ph--a { inset-inline-start: 26cqw; inset-block-start: 9cqh; transform: rotate(-9deg); }
.shot--aong .sc-ph--b, .scene--aong .sc-ph--b { inset-inline-start: 50cqw; inset-block-start: 5cqh; transform: rotate(7deg); }
.shot--wish .sc-ph--d, .scene--wish .sc-ph--d { inset-inline-start: 26cqw; inset-block-start: 20cqh; transform: rotate(-11deg); }
.shot--wish .sc-ph--w, .scene--wish .sc-ph--w { inset-inline-start: 47cqw; inset-block-start: 6cqh; transform: rotate(5deg); }
.shot--lw .sc-ip--parent, .scene--lw .sc-ip--parent { inset-inline-start: 17cqw; inset-block-start: 26cqh; transform: rotate(-8deg); }
.shot--lw .sc-ip--child, .scene--lw .sc-ip--child { inset-inline-start: 47cqw; inset-block-start: 8cqh; transform: rotate(5deg); }