/* Style Studio: все стили под .lj-studio, только px (у сайта корневой font-size 1px). Лендинг всегда в тёмной теме сайта.
   Токены: уголь #020201 (фон сайта), графит #181818, тёплый графит #262320, бумага #F5F3EF, красный #B22222 (одно действие), приглушённый #A7A7A7.
   Шрифт сайта Inter Tight; 900 (подмножество латиница+кириллица) — только H1 и «До / Після». Мотив — гребінець: ручка сравнения с зубцами. */

@font-face {
  font-family: "InterTight";
  src: url("/static/studio/fonts/InterTight-Black-subset.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Шкала движения (Task 16): fast — нажатия и чипы, mid — шторка, диалоги, тосты, slow — проявка и морф.
   Выход быстрее входа: уход слоя — на ступень короче его появления. Кривая одна; --ease-x — для ухода.
   Объявлена и на .lj-app: оболочка приложения переносится в <body> и от .lj-studio не наследует. */
.lj-studio,
.lj-app {
  --t-fast: 140ms;
  --t-mid: 240ms;
  --t-slow: 600ms;
  --ease: cubic-bezier(.3,.7,.2,1);
  --ease-x: cubic-bezier(.4,0,1,1);
  /* Единая система кнопок студии: пилюля, обычный регистр, 700. Красная заливка — только главное действие
     (почати, приміряти, записатися); вторичная — контур; деструктив — красный контур и текст; неактивная — пунктир. */
  --btn-h: 52px;
  --btn-r: 999px;
}

@property --p {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.lj-studio {
  --st-coal: #020201;
  --st-graphite: #181818;
  --st-graphite-warm: #262320;
  --st-paper: #f5f3ef;
  --st-paper-dim: rgba(245, 243, 239, 0.78);
  --st-red: #b22222;
  --st-red-hover: #9e1c1c; /* наведение — темнее, не теплее: один оттенок красного на всех экранах */
  --st-muted: #a7a7a7;
  --st-gutter: max(16px, env(safe-area-inset-left, 0px));
  --st-gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --st-head: 96px; /* высота шапки сайта поверх страницы (header absolute) */

  color-scheme: dark;
  box-sizing: border-box;
  min-height: 72svh;
  padding: var(--st-head) 0 0;
  background: var(--st-coal);
  color: var(--st-paper);
  font-family: "InterTight", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
.lj-studio *,
.lj-studio *::before,
.lj-studio *::after { box-sizing: inherit; }

/* ---------- Лендинг ---------- */

.lj-studio__landing { position: relative; }

.lj-studio__stage { margin: 0; }

.lj-studio__caption {
  margin: 0;
  padding: 8px var(--st-gutter-r) 0 var(--st-gutter);
  color: var(--st-muted);
  font-size: 13px;
  line-height: 1.4;
}

.lj-studio__intro { padding: 20px var(--st-gutter-r) 0 var(--st-gutter); }

.lj-studio__title {
  margin: 0 0 12px;
  max-width: 14ch;
  color: var(--st-paper);
  font-size: clamp(28px, 8.7vw, 34px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lj-studio__lead {
  margin: 0;
  max-width: 34em;
  color: var(--st-paper-dim);
  font-size: 17px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Главное действие — в зоне большого пальца. Если его место ещё ниже экрана (320×568), кнопка
   прикреплена к низу экрана (boot.js ставит .is-docked), пока не доскроллили до её места.
   position: sticky не годится: у .big-wrapper сайта overflow: hidden. */
.lj-studio__actions { margin-top: 20px; }
@media (max-width: 899px) {
  .lj-studio__actions.is-docked .lj-studio__dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 400;
    max-height: 25svh; /* не больше четверти экрана, даже с сообщением об ошибке (ландшафт телефона) */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--st-gutter-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--st-gutter);
    background: var(--st-coal); /* сплошной: длинное сообщение читается целиком; мягкий край — тенью вне прокрутки */
    box-shadow: 0 -12px 12px -2px var(--st-coal);
  }
  .lj-studio__actions.is-docked .lj-studio__cta { min-height: 52px; }
}

.lj-studio .lj-studio__cta {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: var(--btn-r);
  background: var(--st-red);
  color: var(--st-paper);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-fast), opacity var(--t-fast);
}
.lj-studio .lj-studio__cta:hover { background: var(--st-red-hover); }
.lj-studio .lj-studio__cta:focus-visible { outline: 2px solid var(--st-paper); outline-offset: 3px; }
.lj-studio .lj-studio__cta.is-busy { cursor: progress; opacity: 0.86; }
@media (prefers-reduced-motion: no-preference) {
  .lj-studio .lj-studio__cta { transition: background-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast) var(--ease); }
  .lj-studio .lj-studio__cta:active { transform: scale(0.98); }
}

.lj-studio__status { margin: 0; color: var(--st-paper); font-size: 15px; line-height: 1.4; }
.lj-studio__status:not(:empty) { margin-bottom: 12px; padding-left: 10px; border-left: 3px solid var(--st-red); }

.lj-studio-demo-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 11px;
  background: rgba(2, 2, 1, 0.62);
  color: var(--st-paper);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}

/* ---------- Сравнение «До / Після» ---------- */

.lj-cmp {
  --p: 50%;
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--st-graphite);
  touch-action: pan-y; /* вертикальная прокрутка страницы остаётся у браузера */
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
/* Пока JS не начал проход, ручка стоит у правого края: без скачка при старте анимации.
   Страховка: если compare.js так и не запустился (сбой сети, ошибка модуля), через 2,5 с CSS сам
   приводит ручку к честным 50/50. compare.js при запуске ставит .is-live и снимает эту анимацию;
   если страховка уже сработала, проход не повторяется (compare.js смотрит вычисленное --p). */
@keyframes lj-cmp-settle { from { --p: 100%; } to { --p: 50%; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .lj-cmp[data-sweep] { --p: 100%; animation: lj-cmp-settle calc(var(--t-slow) * 1.5) var(--ease) 2.5s both; }
  .lj-cmp[data-sweep].is-live { animation: none; }
}

.lj-cmp > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.lj-cmp__before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
/* Герой: лицо модели в кадре стоит на ~60 % ширины — кадр крупнее на четверть и прижат к правому краю (и чуть к верху),
   лицо встаёт по центру: линия «До / Після» на 50 % проходит через нос, «до» и «після» видны на одной голове.
   Картинка шире рамки на 25 %, поэтому срез «До» пересчитан в её ширину: (100 % − p) × 0,8. */
.lj-studio__landing .lj-cmp > img { inset: -5% 0 auto -25%; width: 125%; height: 125%; }
.lj-studio__landing .lj-cmp__before { clip-path: inset(0 calc((100% - var(--p)) * 0.8) 0 0); }

/* Затемнение снизу — под крупные надписи. */
.lj-cmp::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 42%;
  background: linear-gradient(to top, rgba(2, 2, 1, 0.62), rgba(2, 2, 1, 0));
  pointer-events: none;
}

.lj-cmp__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 0 16px 14px;
  color: var(--st-paper);
  font-size: clamp(36px, 11.3cqi, 92px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.035em;
  pointer-events: none;
}
.lj-cmp__label > span { text-shadow: 0 2px 24px rgba(2, 2, 1, 0.35); }
/* Надпись режется той же линией, что и фото: «До» живёт только на своей половине. */
.lj-cmp__label--before { justify-content: flex-start; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.lj-cmp__label--after { justify-content: flex-end; clip-path: inset(0 0 0 var(--p)); }

/* Нативный range: клавиатура и диктор. Указатель обрабатывает кадр целиком (compare.js). */
.lj-cmp__range {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}

/* Ручка-гребінець: корпус двигается translate по --p (без перерасчёта раскладки). */
.lj-cmp__handle {
  position: absolute;
  inset: 0;
  z-index: 3;
  translate: var(--p) 0;
  pointer-events: none;
}
.lj-cmp__comb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5px;
  width: 3px;
  background: var(--st-paper);
  box-shadow: 0 0 14px rgba(2, 2, 1, 0.45);
}
.lj-cmp__comb::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 12px;
  background: repeating-linear-gradient(to bottom, var(--st-paper) 0 2px, transparent 2px 6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  opacity: 0.9;
}
.lj-cmp__grip {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--st-red);
  color: var(--st-paper);
  box-shadow: 0 0 0 3px var(--st-paper), 0 8px 24px rgba(2, 2, 1, 0.45);
  translate: -50% -50%;
}
.lj-cmp__grip svg { display: block; }
.lj-cmp__range:focus-visible ~ .lj-cmp__handle .lj-cmp__grip { outline: 3px solid var(--st-paper); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .lj-cmp__grip { transition: scale var(--t-fast) var(--ease); }
  .lj-cmp.is-dragging .lj-cmp__grip { scale: 1.1; }
}

/* ---------- Короткие экраны телефона: H1 должен читаться над прикреплённой кнопкой ---------- */
@media (max-width: 899px) and (orientation: portrait) {
  /* 320×568: сцена ≈ 46 % высоты, кадр обрезается по высоте с запасом сверху (волосы важнее рубашки). */
  .lj-cmp { aspect-ratio: auto; height: min(100vw, 46svh); }
  .lj-cmp > img { object-position: 50% 30%; }
}
/* 320×568: H1 целиком над прикреплённой кнопкой и её тенью (последняя строка не уходит в растушёвку). */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 640px) {
  .lj-cmp { height: min(100vw, 40svh); }
  .lj-studio__intro { padding-top: 14px; }
}
/* Ландшафт телефона (например 844×390): сцена квадратом слева, текст и кнопка справа. */
@media (max-width: 899px) and (orientation: landscape) {
  .lj-studio { --st-head: 80px; }
  .lj-studio__landing {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 0 var(--st-gutter-r) 0 var(--st-gutter);
  }
  .lj-cmp { width: min(46vw, calc(100svh - 112px)); }
  .lj-studio__caption { padding: 6px 0 0; }
  .lj-studio__intro { padding: 0; }
  .lj-studio__title { font-size: 28px; max-width: 18ch; }
  .lj-studio__lead { font-size: 16px; }
  .lj-studio__actions { margin-top: 16px; }
  .lj-studio .lj-studio__cta { max-width: 400px; }
  .lj-studio__actions.is-docked .lj-studio__dock { left: auto; width: calc(100% - min(46vw, calc(100svh - 112px)) - 24px - var(--st-gutter)); padding-left: 0; }
}

/* ---------- Десктоп: текст слева, сцена справа ---------- */
@media (min-width: 900px) {
  .lj-studio { --st-head: 150px; padding-bottom: 96px; }
  .lj-studio__landing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    align-items: center;
    gap: 72px;
    max-width: 1240px;
    margin-inline: auto;
    padding: 0 40px;
  }
  .lj-studio__stage { order: 2; }
  .lj-cmp { border-radius: 2px; }
  .lj-studio__caption { padding: 10px 0 0; }
  .lj-studio__intro { padding: 0; }
  .lj-studio__title { margin-bottom: 20px; font-size: 64px; line-height: 0.98; }
  .lj-studio__lead { font-size: 19px; max-width: 30em; }
  .lj-studio__actions { margin-top: 32px; }
  .lj-studio .lj-studio__cta { width: auto; min-width: 320px; }
}

/* Оболочка приложения скрыта до открытия; её стили — studio-app.css (boot.js подгружает перед открытием). */
.lj-studio__app[hidden] { display: none; }