/* Главная: сцена камеры, интро знака, направления.
   Без класса .motion (нет JS или reduced-motion) — спокойная статичная вёрстка в потоке. */

/* ── сцена ── */
.scene { position: relative; }
.stage { position: relative; }
.cam { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--blue-deep); }
.world { position: absolute; inset: 0; }
.world img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 35%; }
.l2, .l3 { display: none; }
.cam__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,40,119,.55) 0%, rgba(20,40,119,.22) 38%, rgba(20,40,119,0) 58%); }
.cam__haze { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 80% 90% at 50% 48%, transparent 50%, rgba(31,58,168,.6) 100%); }

.hero-text { position: absolute; left: var(--gutter); bottom: clamp(48px, 12vh, 112px); width: min(640px, calc(100% - 2 * var(--gutter))); color: var(--white); z-index: 2; }
/* Без анимации (iPhone «Уменьшение движения», нет JS): .stage вмещает и первый экран, и карточки направлений,
   поэтому текст первого экрана держим в высоте первого экрана, а не у низа всего блока (баг 14.10: текст ложился на карточку). */
html:not(.motion) .hero-text { top: 0; bottom: auto; height: 100vh; height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 12vh, 112px); pointer-events: none; }
html:not(.motion) .hero-text__inner { pointer-events: auto; }
@media (max-width: 900px) { html:not(.motion) .hero-text { padding-bottom: clamp(32px, 6vh, 64px); } }
.hero-text__place { font-size: clamp(15px, 1.25vw, 18px); font-weight: 500; opacity: .92; }
.hero-text__word { font: 300 clamp(68px, 10.8vw, 156px)/0.9 var(--display); letter-spacing: -0.035em; margin: 14px 0 26px -0.04em; }
.hero-text__lead { font-size: clamp(16px, 1.45vw, 21px); line-height: 1.5; max-width: 470px; opacity: .95; }
.hero-text__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4vh, 38px); }

.phrase { display: none; }

/* ── направления ── */
.dirs { padding: clamp(56px, 8vw, 96px) var(--gutter); display: grid; grid-template-columns: minmax(240px, 330px) 1fr; column-gap: clamp(32px, 4vw, 56px); }
.dirs__intro h2 { font: 300 clamp(44px, 4.6vw, 66px)/1.02 var(--display); letter-spacing: -0.03em; }
.dirs__intro p { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 300px; }
.ways { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; align-items: flex-start; }
.cards { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 20px; }
.card { position: relative; border-radius: 28px; overflow: hidden; background: var(--white); display: flex; flex-direction: column;
  box-shadow: 0 30px 60px -40px rgba(47,49,66,.35); transition: transform .35s var(--ease-out), box-shadow .35s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(47,49,66,.45); }
.card__media { position: relative; height: clamp(150px, 27vh, 262px); background: var(--pearl-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--empty { display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, #fff 0, rgba(255,255,255,0) 55%), linear-gradient(135deg, #EDE4E0, #DCD3E3); }
.card__media--empty span { font: 500 13px/1.4 var(--text); color: #8A8296; text-align: center; padding: 0 24px; }
.card__body { padding: clamp(16px, 2.2vh, 24px) 24px clamp(18px, 2.4vh, 26px); display: flex; flex-direction: column; flex: 1; }
.card__name { font: 300 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: -0.02em; }
.card__prices { list-style: none; margin-top: 12px; font-size: 15px; }
.card__prices li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #ECE6E3; }
.card__prices b { font-weight: 500; white-space: nowrap; }
.card--wide { grid-column: 1 / -1; flex-direction: row; }
.card--wide .card__media { flex: none; width: clamp(180px, 26%, 300px); height: auto; min-height: clamp(112px, 15vh, 150px); }
.card--wide .card__media img { position: absolute; inset: 0; object-position: 50% 30%; }
.card--wide .card__prices { max-width: 460px; }
.card--wide .card__body { justify-content: center; }
.card--wide .card__more { margin-top: 0; }
.card__more { margin-top: auto; padding-top: 14px; font-weight: 500; font-size: 15px; color: var(--blue); }
.telo-link { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; border-radius: 20px; border: 1px solid var(--line); font-size: 16px; color: var(--ink-2); transition: border-color .2s; }
.telo-link:hover { border-color: var(--ink-2); }
.telo-link strong { font: 300 22px/1.1 var(--display); color: var(--ink); margin-right: 12px; }
.telo-link > span:last-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.more { display: none; }

/* ── интро знака ── */
.intro { display: none; }
.has-intro .intro { display: grid; position: fixed; inset: 0; z-index: 70; place-items: center; pointer-events: none; perspective: 900px; }
.intro__glow { position: absolute; width: min(70vmin, 620px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(247,180,208,.18) 40%, rgba(255,255,255,0) 70%); opacity: 0; }
.intro__mark { width: min(36vmin, 300px); aspect-ratio: 1; opacity: 0; transform-origin: 50% 50%; }
.intro__mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(20,40,119,.45)); }
.has-intro .header__logo { opacity: 0; }
.has-intro .hero-text__inner { opacity: 0; }

/* ── режим движения ── */
.motion .stage { height: 100vh; height: 100svh; overflow: hidden; background: var(--pearl); }
.motion .cam { position: absolute; inset: 0; height: auto; will-change: clip-path; }
.motion .world { inset: auto; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.motion .world img { object-position: 50% 50%; }
.motion .l2, .motion .l3 { display: block; position: absolute; opacity: 0;
  /* мягкий стык: кадр проявляется овалом, по мере приближения маска уходит за края */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
  -webkit-mask-size: var(--ms, 100%) var(--ms, 100%); mask-size: var(--ms, 100%) var(--ms, 100%); }
/* 03 проступает из молекулы: центр маски — молекула на кадре 03 */
.motion .l3 { -webkit-mask-position: 52% 40%; mask-position: 52% 40%; }
/* сцена v2 — фильм по прокрутке: холст поверх постера (первый кадр) */
.film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film { display: none; }
.motion .film { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
/* (ниже — стили сцены v2 на картинках, сейчас не используются; версия в backup/) */
.molecule, .ripple, .deep, .flash, .callouts, .chapters { display: none; }
.motion .molecule { display: block; position: absolute; aspect-ratio: 1; height: auto; mix-blend-mode: screen; pointer-events: none; will-change: transform; }
.motion .ripple { display: block; position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; }
.motion .ripple i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,236,250,.85);
  box-shadow: 0 0 18px rgba(230,200,255,.8), inset 0 0 12px rgba(230,200,255,.6);
  transform: scale(calc(.9 + var(--t, 0) * 3.4)); opacity: calc(1 - var(--t, 0)); }
.motion .ripple i:nth-child(2) { transform: scale(calc(.9 + max(0, var(--t, 0) - .18) * 3.4)); }
.motion .ripple i:nth-child(3) { transform: scale(calc(.9 + max(0, var(--t, 0) - .36) * 3.4)); }
.motion .deep { display: block; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; will-change: transform, opacity; background: #F2D9CC; }
.motion .deep > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.motion .deep__b { opacity: 0; }
.motion .drops { position: absolute; inset: 0; }
.motion .drop { position: absolute; aspect-ratio: 1; height: auto; mix-blend-mode: screen; opacity: 0; }
.motion .wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: screen; filter: drop-shadow(0 0 8px rgba(255,255,255,.9)); }
.motion .wave path { fill: none; stroke: url(#wave-g); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .3 1.3; }
.motion .flash { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #F6EEFF 32%, rgba(214,196,255,.85) 58%, rgba(120,140,230,.6) 100%); }
/* подписи слоёв: линия-выноска с точкой, текст — пилюлей поверх светлого кадра */
.motion .callouts { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.motion .co { position: absolute; left: var(--gutter); display: flex; align-items: center; gap: 0; margin-top: -16px; transform-origin: left center; }
.motion .co span { flex: none; font: 500 clamp(13px, 1.05vw, 15px)/1 var(--text); color: var(--ink); background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 9px 14px; border-radius: 999px;
  opacity: var(--v, 0); filter: blur(calc((1 - var(--v, 0)) * 8px)); transform: translateX(calc((1 - var(--v, 0)) * -14px)); }
.motion .co i { flex: 1; height: 1.5px; background: linear-gradient(90deg, rgba(47,49,66,.5), rgba(47,49,66,.75)); position: relative;
  transform-origin: left center; transform: scaleX(var(--v, 0)); }
.motion .co i::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(31,58,168,.35), 0 0 14px rgba(255,255,255,.9); }
/* оглавление глав сцены справа */
.motion .chapters { display: block; position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); list-style: none; counter-reset: ch;
  z-index: 2; color: rgba(255,255,255,.62); font: 500 13px/1 var(--text); transition: color .4s; pointer-events: none; }
.motion .chapters li { counter-increment: ch; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 9px 0; transition: color .3s, opacity .3s; opacity: .7; }
.motion .chapters li::before { content: '0' counter(ch); font-size: 11px; opacity: .8; }
.motion .chapters li::after { content: ''; width: 18px; height: 1.5px; background: currentColor; transition: width .35s var(--ease-out); }
.motion .chapters li.is-on { color: var(--white); opacity: 1; }
.motion .chapters li.is-on::after { width: 38px; }
.motion .is-deep .chapters { color: rgba(47,49,66,.55); }
.motion .is-deep .chapters li.is-on { color: var(--ink); }

.motion .phrase { display: block; position: absolute; left: var(--gutter); bottom: clamp(56px, 11vh, 96px); width: min(620px, calc(100% - 2 * var(--gutter)));
  color: var(--white); font: 300 clamp(34px, 4.2vw, 60px)/1.08 var(--display); letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(20,40,119,.45); opacity: 0; z-index: 2; }
.motion .dirs { position: absolute; inset: var(--header-h) 0 0 0; padding-top: clamp(16px, 3vh, 36px); padding-bottom: 24px; align-content: start; }
.motion .dirs [data-fade] { opacity: 0; }
.motion [data-cards] .card:first-child .card__media img { opacity: 0; } /* только карточка в сцене: её картинку подменяет кадр */
.motion .card { box-shadow: 0 30px 60px -40px rgba(47,49,66,.35); }

@media (max-width: 900px) {
  .dirs { grid-template-columns: 1fr; row-gap: 28px; }
  .cards { grid-template-columns: 1fr; }
  .dirs__intro p { max-width: none; }
  .hero-text { bottom: clamp(32px, 6vh, 64px); }
  .hero-text__actions .btn { flex: 1 1 auto; }
  .cam__shade { background: linear-gradient(0deg, rgba(20,40,119,.78) 0%, rgba(20,40,119,.35) 42%, rgba(20,40,119,0) 64%); }
  /* в сцене на телефоне — заголовок и первая карточка; остальное идёт следом в потоке */
  .motion .dirs { row-gap: 18px; }
  .motion .dirs .ways { display: none; }
  .card--wide { flex-direction: column; }
  .card--wide .card__media { width: auto; height: clamp(150px, 27vh, 262px); }
  .card--wide .card__more { margin-top: auto; }
  .motion .dirs .card:not(:first-child) { display: none; }
  .motion .card__media { height: clamp(200px, 38svh, 340px); }
  .motion .more { display: block; padding: 0 var(--gutter) 64px; }
  /* главы на телефоне: точки у правого края, подпись только у текущей */
  .motion .chapters { right: 12px; font-size: 12px; }
  .motion .chapters li { gap: 6px; padding: 7px 0; }
  .motion .chapters li:not(.is-on) { font-size: 0; }
  .motion .chapters li:not(.is-on)::before { content: none; }
  .motion .chapters li::after { width: 10px; }
  .motion .chapters li.is-on::after { width: 22px; }
  .motion .co span { padding: 7px 11px; }
  .more .cards { gap: 18px; }
}
@media (max-width: 900px) and (max-height: 759px) {
  /* Низкий экран (большинство телефонов): текст «С чего начать» остаётся — его не было видно (правки 12.10),
     место под него даёт картинка карточки пониже. */
  .motion .dirs { row-gap: 14px; }
  .motion .dirs__intro h2 { font-size: min(44px, 11vw); } /* на 360–375 px заголовок в одну строку */
  .motion .dirs__intro p { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .motion .card__media { height: clamp(140px, 26svh, 260px); }
  .more .ways { flex-direction: row; flex-wrap: wrap; margin-top: 22px; }
}