/* Вариант для заказчика: первый экран и «Подход» на фоне главной (WebGL — assets/js/stage-live.js), девушка — кадрами видео */
.vr-again { z-index: 3; }
.vr-floor, .vr-face, .vr-flat, .vr-bg { display: none; }

/* под увеличением (только на странице с #pores — копия для заказчика): «линза» со снимком кожи — круг с мягким краем
   (маска) и тонкий стеклянный ободок; размер и место — CSS-сдвиг и масштаб из variant.js (updateLens) */
.vr-pores { height: 300vh; }
.vr-lens { position: fixed; left: 0; top: 0; z-index: 1; width: 600px; height: 600px; overflow: hidden; visibility: hidden; pointer-events: none;
  transform-origin: 50% 50%; will-change: transform;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 76%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(circle closest-side, #000 76%, rgba(0, 0, 0, 0) 100%); }
.vr-lens-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.vr-lens-in img { display: block; width: 1672px; height: 941px; max-width: none; }
/* прицел и показание увеличения — разметка и вид главной (.scope, .zoom в home.css); место прицела ведёт variant.js
   (setScope), показание стоит рядом с ним (прицел к раскрытию линзы — на 46 % высоты) */
.vr-scope { left: 0; top: 0; margin: 0; visibility: hidden; transform-origin: 50% 50%; will-change: transform, opacity; }
.vr-zoom { top: calc(46% - 30px); will-change: opacity; }
@media (max-width: 760px) { .vr-zoom { top: calc(46% - 104px); } }

/* Телефон — своя раскадровка «лицо — текст — лицо» (variant.js, phoneKeys): голова в верхней части, текст — внизу на светлой
   «бумаге» студии (.vr-floor), без карточек поверх девушки. Тексты первого экрана и «Подхода» — подписи, закреплённые
   внизу экрана: они не едут по прокрутке, а только проявляются и тают (прозрачность — в variant.js, phoneText) —
   сдвиг против прокрутки на телефоне дрожит, а улетающий вверх блок налетает на лицо. Привязка — к низу экрана без
   панели адреса (100svh) и к верху холста, а не к низу окна: панель прячется при прокрутке, и прижатое к низу окна прыгало
   бы. Камера ставит подбородок над верхом подписи (по её настоящей высоте). Поля 22 px, ритм отступов 6 / 14 / 18 / 22 px */
@media (max-width: 760px) {
  .variant .s-hero::before { display: none; }
  /* телефон — без WebGL (stage-flat.js): кадр с прозрачным фоном на обычном холсте, камера — CSS-сдвиг обёртки;
     за ней — студия (мягко светлее к середине) и тёплое свечение за головой, которое медленно «дышит» */
  .variant .stage { display: none; }
  /* студия чуть глуше к краям — свечение за головой видно по контрасту (как подсвет на главной) */
  .variant { background: radial-gradient(140% 80% at 58% 24%, #f2e9e0 0%, #eadfd5 42%, #dfd1c4 100%) fixed #e9ded4; }
  .vr-bg { display: block; position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; z-index: 0; pointer-events: none; }
  .vr-flat { display: block; position: fixed; left: 0; top: 0; z-index: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; }
  .vr-flat canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .vr-glow { position: absolute; border-radius: 50%; opacity: 0; will-change: transform, opacity;
    background: radial-gradient(circle, rgba(255, 252, 245, 0.9) 0%, rgba(255, 246, 232, 0.66) 18%, rgba(255, 239, 220, 0.32) 38%, rgba(255, 236, 214, 0.1) 58%, rgba(255, 234, 212, 0) 72%);
    animation: vr-breathe 7s ease-in-out infinite alternate; }
  @keyframes vr-breathe { from { transform: scale(0.97); } to { transform: scale(1.05); } }
  /* момент «только лицо» — свои 0,3 экрана прокрутки между первым экраном и «Подходом»; «Подход» длиннее, чем
     на компьютере (раскадровка телефона — variant.js, phoneKeys) */
  .vr-face { display: block; height: 30svh; }
  .vr-pores { height: 260svh; }
  .variant .s-manifest { height: 260svh; }
  /* лицо доходит до шапки — логотип всегда на светлой плашке, а не на волосах. Плашки шапки и кнопка «повторить»
     на телефоне — без размытия фона: размытие пересчитывается каждый кадр поверх живой сцены и на телефоне тормозит;
     вместо него — плотнее светлая заливка */
  .variant .brand, .variant .glass-pill, .variant .vr-again { background-color: rgba(250, 247, 243, 0.86); border-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 #fff, 0 10px 30px -18px rgba(22, 41, 74, 0.45); }
  .variant .manifest-text .w { filter: none; will-change: opacity; }
  /* подложка — только под текстом: верхний край — сразу под подбородком (variant.js сдвигает её за камерой, transform),
     плотная уже через ~100 px — текст ложится на светлое, а не на шею */
  .vr-floor { display: block; position: fixed; left: 0; right: 0; top: 0; height: 100lvh; z-index: 1; pointer-events: none; opacity: 0;
    will-change: transform, opacity;
    background: linear-gradient(to bottom, rgba(242, 236, 229, 0) 0, rgba(242, 236, 229, 0.78) 52px, rgba(242, 236, 229, 0.95) 108px, rgba(242, 236, 229, 0.97) 100%); }

  /* первый экран: подпись внизу экрана — заголовок, три пункта, кнопка в одну строку */
  .variant .s-hero { overflow: visible; }
  .variant .th-copy { position: fixed; left: 22px; right: 22px; top: calc(100svh - 20px - env(safe-area-inset-bottom)); bottom: auto;
    width: auto; height: auto; margin: 0; transform: translateY(-100%); align-items: stretch; }
  .variant .th-title { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.02; letter-spacing: -0.04em; }
  .variant .th-list { margin-top: 14px; gap: 6px; }
  .variant .th-list li { font-size: 13.5px; line-height: 1.4; padding-left: 24px; }
  .variant .th-list li::before { width: 14px; height: 14px; top: 0.18em; }
  .variant .th-go { margin-top: 18px; width: 100%; height: 52px; min-height: 0; padding: 0 16px; font-size: 12.5px; letter-spacing: 0.035em;
    white-space: nowrap; line-height: 1; }

  /* «Подход»: не карточка поверх фигуры, а спокойная подпись на той же подложке */
  /* «Подход» — у самого нижнего края видимого экрана (к этому времени панель адреса обычно спрятана; привязка к 100svh
     оставляла под кнопкой пустую полосу) */
  .variant .manifest.glass { position: fixed; left: 22px; right: 22px; top: auto; bottom: calc(14px + env(safe-area-inset-bottom));
    width: auto; height: auto; margin: 0; padding: 0; transform: none; opacity: 0; visibility: hidden;
    background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .variant .manifest.glass::before { display: none; }
  /* блок «Подхода» — самый высокий текст: по нему камера ставит голову (одна крупность на всю страницу), поэтому он
     компактный и сжимается по высоте экрана — на телефоне с панелями браузера голове остаётся место */
  .variant .manifest .label { margin-bottom: clamp(10px, 1.6svh, 12px); }
  .variant .manifest-text { font-size: clamp(18px, min(5.4vw, 2.7svh), 22px); line-height: 1.2; text-wrap: pretty; }
  /* три пункта — две короткие строки: значок и слово рядом, без колонок (лицу над текстом нужно место) */
  .variant .points { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: clamp(12px, 1.6svh, 14px); padding-top: clamp(10px, 1.4svh, 12px); }
  .variant .points li { flex: none; flex-direction: row; align-items: center; gap: 6px; padding: 0; }
  .variant .points li + li { border-left: 0; }
  .variant .points svg { width: 17px; height: 17px; margin: 0; flex: none; }
  .variant .points b { font-size: 12.5px; line-height: 1.2; white-space: nowrap; }
  .variant .manifest .more { margin-top: clamp(12px, 2.2svh, 20px); }

  /* «повторить вход» — маленький круглый значок под шапкой справа */
  .vr-again { position: absolute; top: calc(var(--hdr) + 10px); right: 16px; bottom: auto; width: 40px; height: 40px; padding: 0; justify-content: center; }
  .vr-again span { display: none; }
}

/* узкий телефон (до 374 px): надпись кнопки в одну строку не помещается — две строки, компактно */
@media (max-width: 374px) {
  .variant .th-go { height: auto; min-height: 52px; padding: 10px 16px; white-space: normal; line-height: 1.3; }
}

/* невысокий телефон (iPhone SE и т. п.): подписи компактнее, чтобы голове осталось место */
@media (max-width: 760px) and (max-height: 700px) {
  .variant .th-title { font-size: clamp(28px, 8vw, 31px); }
  .variant .th-list { margin-top: 10px; gap: 4px; }
  .variant .th-list li { font-size: 12.5px; }
  .variant .th-go { margin-top: 14px; height: 48px; }
}