/*
  LENwine — экраны после 3D-блока (тексты: 03-content/LENwine_Landing_English_Copy_for_Developer.docx).
  Архетип B · Paper Editorial (web-design-taste): розовая бумага бренда, серифный дисплей Cormorant Garamond,
  текст Golos Text, линии 1px вместо теней.
  Референсы: 07 Energy (закреплённые шаги, подписка), 09 Norma (ритм), 12 QED (футер-гравюра), 26 Haven (раскрытие заголовков, навигация-пилюля).
*/

:root {
  --paper: #FBE3E1;
  --paper-deep: #F6D6D3;
  --surface: #FFF7F5;
  --rule: rgba(107, 31, 46, 0.16);
  --text-dim: #6A5A55;
  --text-mute: #9A8580;
  --accent: #6B1F2E;
  --accent-ink: #FAF6F0;
  --night: #2E0F16;

  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --t-micro: 140ms;
  --t-ui: 240ms;
  --t-enter: 700ms;
  --stagger: 70ms;

  --container: 1240px;
  --gutter: clamp(24px, 4vw, 40px);
  --section-gap: clamp(96px, 12vw, 160px);
}

.lw-container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* микро-метка над каждой секцией */
.lw-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 11px/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.lw-mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.lw-h2 {
  margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--wine-ink);
  font-size: clamp(2.5rem, 5.2vw, 4.75rem); line-height: 0.98; letter-spacing: -0.02em;
}
.lw-h2 em { font-style: italic; color: var(--accent); }
.lw-lead { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--text-dim); max-width: 44ch; }
.lw-body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-dim); max-width: 42ch; }

/* ---------- шапка: логотип слева, почта и кнопка справа ---------- */
.lw-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(12px, 1.8vw, 22px) clamp(16px, 3vw, 40px);
  transition: background-color var(--t-ui) var(--e-out), box-shadow var(--t-ui) var(--e-out), opacity 900ms var(--e-out), transform 900ms var(--e-out);
}
html.lw-loading .lw-header { opacity: 0; transform: translateY(-8px); }
html.lw-fallback .lw-header { opacity: 1; transform: none; }
/* после 3D-блока шапка получает подложку, чтобы не спорить с текстом страницы */
.lw-header.is-solid {
  background-color: rgba(251, 227, 225, 0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--rule);
}
.lw-header__logo { display: block; flex: none; }
.lw-header__logo img { display: block; height: clamp(40px, 4.2vw, 58px); width: auto; }
.lw-header__actions { display: flex; align-items: center; gap: clamp(10px, 2.2vw, 28px); }
.lw-header__mail {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 15px/1 var(--font-text); color: var(--wine-ink); text-decoration: none;
}
.lw-header__mail svg { width: 18px; height: 18px; flex: none; }
.lw-header__mail span {
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-micro) var(--e-out);
}
.lw-header__mail:hover span { background-size: 100% 1px; }

.lw-btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 15px/1 var(--font-text); text-decoration: none;
  background: var(--accent); color: var(--accent-ink);
  transition: transform var(--t-micro) var(--e-out), background var(--t-micro) var(--e-out);
}
.lw-btn:hover { background: #7E2638; transform: translateY(-1px); }
.lw-btn:active { transform: translateY(0); }
.lw-btn:focus-visible, .lw-header__logo:focus-visible, .lw-header__mail:focus-visible, .lw-link:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.lw-btn--light { background: var(--paper); color: var(--night); }
.lw-btn--light:hover { background: #fff; }
.lw-link {
  display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--font-text); color: var(--wine-ink); text-decoration: none;
}
.lw-link span { transition: transform var(--t-micro) var(--e-out); }
.lw-link:hover span { transform: translateX(4px); }

/* ---------- закреплённая панель шагов ---------- */
.lw-preview { padding: clamp(48px, 8vw, 96px) 0 var(--section-gap); overflow-x: clip; }   /* clip, а не hidden: не ломает sticky на десктопе */
.lw-preview__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.lw-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 36px; }
.lw-steps::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.lw-step {
  position: relative; min-height: 78vh; display: grid; align-content: center; gap: 14px;
  opacity: 0.42; transition: opacity var(--t-ui) var(--e-out);
}
.lw-step::before {
  content: ""; position: absolute; left: -36px; top: 50%; width: 11px; height: 11px; margin-top: -5px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--rule);
  transition: background var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out), transform var(--t-ui) var(--e-out);
}
.lw-step.is-active { opacity: 1; }
.lw-step.is-active::before { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.lw-step__num { font: 500 13px/1 var(--font-text); color: var(--text-mute); font-variant-numeric: tabular-nums; }
.lw-step__title { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--wine-ink);
  font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }

/* Закреплённая колонка с экранами. Размер композиции считается и от ширины, и от высоты колонки (cqw/cqh),
   поэтому телефоны не заходят на текст при любой ширине окна.
   Выравнивание — по корпусу телефона, а не по краям PNG: у каждой картинки своя геометрия корпуса
   (--bx/--by/--bh из css/screens.css, файл собирается скриптом 05-tech/tools/measure-screens.sh),
   поэтому экраны, снятые в разных кадрах и с разным полем вокруг, стоят одинаково.
   --H — высота корпуса; --x/--y — смещение центра корпуса в долях --H; --s — масштаб; --r — поворот. */
.lw-stage-media { position: sticky; top: 9vh; height: 82vh; container-type: size; }
.lw-shot {
  --H: min(84cqh, 100cqw / (var(--phone-ar, 0.484) * 1.08));
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: translateY(12px); transition: opacity var(--t-ui) var(--e-out), transform var(--t-ui) var(--e-out);
  pointer-events: none;
}
.lw-shot.is-active { opacity: 1; transform: translateY(0); }
.lw-shot img {
  position: absolute; left: 50%; top: 50%; display: block;
  height: calc(var(--H) / var(--bh, 0.641)); width: auto; max-width: none;
  transform-origin: calc(var(--bx, 0.377) * 100%) calc(var(--by, 0.341) * 100%);
  transform:
    translate(calc(var(--bx, 0.377) * -100%), calc(var(--by, 0.341) * -100%))
    translate(calc(var(--x, 0) * var(--H)), calc(var(--y, 0) * var(--H)))
    rotate(var(--r, 0deg)) scale(var(--s, 1));
}
/* два телефона рядом: ширина ≈ 0,62 высоты корпуса (разлёт и наклон) + ширина двух корпусов */
.lw-shot--duo { --H: min(82cqh, 100cqw / (0.62 + var(--phone-ar, 0.484) * 0.9)); }
.lw-shot--duo img:nth-child(1) { --x: -0.27; --y: -0.03; --r: -4deg; --s: 0.9; }
.lw-shot--duo img:nth-child(2) { --x: 0.27; --y: 0.035; --r: 4deg; --s: 0.9; }
/* веер из трёх: центральный крупнее, боковые развёрнуты */
.lw-shot--fan { --H: min(78cqh, 100cqw / (0.86 + var(--phone-ar, 0.484) * 0.84)); }
.lw-shot--fan img:nth-child(1) { --x: -0.37; --y: 0.03; --r: -7deg; --s: 0.84; }
.lw-shot--fan img:nth-child(2) { --y: -0.03; z-index: 1; }
.lw-shot--fan img:nth-child(3) { --x: 0.37; --y: 0.03; --r: 7deg; --s: 0.84; }

/* экран внутри шага — только на узких экранах, вместо закреплённой колонки */
.lw-step__media { display: none; }

/* ---------- финальный экран ---------- */
.lw-final { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; border-top: 1px solid var(--rule); overflow: hidden; }
.lw-final__inner { margin-block: auto; padding-top: clamp(104px, 14vh, 150px); display: grid; gap: clamp(20px, 3.4vh, 40px); justify-items: center; text-align: center; }
.lw-final .lw-h2 { font-size: clamp(2.5rem, min(6.4vw, 9vh), 6rem); }
.lw-final__logo { width: clamp(180px, min(22vw, 30vh), 300px); height: auto; display: block; margin-top: clamp(4px, 1.5vh, 20px); }
.lw-final__sign { margin: -12px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(20px, 2vw, 26px); color: var(--gold); }
.lw-hills { display: block; flex: none; width: 100%; height: clamp(120px, min(22vw, 24vh), 280px); margin-top: clamp(24px, 5vh, 64px); }

/* ---------- появление при скролле (motion §1) ---------- */
.lw-reveal-lines .lw-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.lw-reveal-lines .lw-line > span {
  display: inline-block; transform: translateY(105%); transition: transform 800ms var(--e-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.lw-reveal-lines.is-in .lw-line > span { transform: translateY(0); }
.lw-fade { opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity var(--t-enter) var(--e-out), transform var(--t-enter) var(--e-out), filter var(--t-enter) var(--e-out);
  transition-delay: calc(var(--d, 0) * var(--stagger)); }
.lw-fade.is-in { opacity: 1; transform: none; filter: none; }

@media (max-width: 900px) {
  /* закреплённая колонка с телефонами на мобильном перекрывала текст: у каждого шага свой экран над текстом */
  .lw-preview__grid { grid-template-columns: 1fr; }
  .lw-stage-media { display: none; }
  .lw-steps { padding-left: 0; display: grid; gap: clamp(56px, 12vw, 88px); }
  .lw-steps::before, .lw-step::before { display: none; }
  .lw-step { min-height: 0; opacity: 1; gap: 12px; }
  /* Экран внутри шага. Контейнер по высоте равен корпусу телефона — текст стоит прямо под ним,
     тень ниже корпуса гасится маской. Размер ограничен и высотой экрана, и шириной колонки.
     Геометрия корпуса у каждой картинки своя — из css/screens.css. */
  .lw-step__media {
    --ph: min(56vh, 470px, (100vw - 2 * var(--gutter)) / var(--phone-ar, 0.484));
    display: block; position: relative; height: var(--ph); margin: 0 0 28px;
  }
  .lw-step__media img {
    position: absolute; left: 50%; top: 50%; width: auto; max-width: none;
    height: calc(var(--ph) / var(--bh, 0.641));
    transform-origin: calc(var(--bx, 0.377) * 100%) calc(var(--by, 0.341) * 100%);
    transform:
      translate(calc(var(--bx, 0.377) * -100%), calc(var(--by, 0.341) * -100%))
      translate(calc(var(--x, 0) * var(--ph)), calc(var(--y, 0) * var(--ph)))
      rotate(var(--r, 0deg)) scale(var(--s, 1));
    -webkit-mask-image: linear-gradient(180deg, #000 calc((var(--by, 0.341) + var(--bh, 0.641) / 2) * 100%), transparent calc((var(--by, 0.341) + var(--bh, 0.641) / 2 + 0.06) * 100%));
    mask-image: linear-gradient(180deg, #000 calc((var(--by, 0.341) + var(--bh, 0.641) / 2) * 100%), transparent calc((var(--by, 0.341) + var(--bh, 0.641) / 2 + 0.06) * 100%));
  }
  .lw-step__media--duo { --ph: min(50vh, 430px, (100vw - 2 * var(--gutter)) / (0.62 + var(--phone-ar, 0.484) * 0.9)); }
  .lw-step__media--duo img:nth-child(1) { --x: -0.27; --y: -0.03; --r: -4deg; --s: 0.9; }
  .lw-step__media--duo img:nth-child(2) { --x: 0.27; --y: 0.035; --r: 4deg; --s: 0.9; }
  .lw-step__media--fan { --ph: min(46vh, 400px, (100vw - 2 * var(--gutter)) / (0.86 + var(--phone-ar, 0.484) * 0.84)); }
  .lw-step__media--fan img:nth-child(1) { --x: -0.37; --y: 0.03; --r: -7deg; --s: 0.84; }
  .lw-step__media--fan img:nth-child(2) { --y: -0.03; z-index: 1; }
  .lw-step__media--fan img:nth-child(3) { --x: 0.37; --y: 0.03; --r: 7deg; --s: 0.84; }
  .lw-step__title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
}
@media (max-width: 600px) {
  .lw-header { padding: 12px 16px; }
  .lw-header__mail { width: 40px; height: 40px; justify-content: center; border-radius: 50%; border: 1px solid var(--rule); background: rgba(251, 227, 225, 0.6); }
  .lw-header__mail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lw-header .lw-btn { height: 40px; padding: 0 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lw-reveal-lines .lw-line > span, .lw-fade, .lw-shot { transition: opacity 200ms linear; transform: none !important; filter: none !important; }
}