/* ================================================================
   ЛЕНДИНГ — четыре экрана
   ================================================================ */

.landing{ background:var(--cream); }

.scr{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:48px 28px;
  position:relative;
}
.scr--light{ background:var(--cream); color:var(--ink); }

.scr-body{ width:100%; }

/* ---------- Шапка ----------
   Обе строки одним шрифтом и кеглем, различаются только цветом:
   верхняя тёмная, нижняя залита фирменным градиентом. Так же, как
   в практикуме «Проектирование жизни мечты». */
.site-head{
  padding-top:20px; padding-bottom:18px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.site-head .kind,
.site-head .name{
  display:block;
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  /* Кегль подобран под самую длинную строку — «Бесплатный авторский
     практикум»: на 320px она должна остаться в одну строку, иначе
     шапка вырастает и первый экран перестаёт помещаться целиком. */
  font-size:clamp(11.6px,3.6cqw,14px);
  letter-spacing:-.01em;
  /* Строки прижаты друг к другу: у Unbounded свой запас по высоте,
     и при обычном межстрочном между ними зиял провал. */
  line-height:1.15;
}
.site-head .kind{ color:var(--ink); }
.site-head .name{
  margin-top:1px;
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Экран 1 ----------
   Экран липкий и держится, пока по периметру плашки прочерчивается
   обводка. Высота обёртки задаёт, сколько прокрутки на это уходит.
   Из высоты самого экрана вычитается шапка — иначе он не помещался
   бы целиком и снизу торчал бы кусок следующего. Высоту шапки
   замеряет скрипт. */
.hero-wrap{ position:relative; height:260svh; }
.hero{
  position:sticky; top:0;
  min-height:calc(100svh - var(--head, 76px));
  display:flex; flex-direction:column;
  padding:clamp(28px,7cqw,44px) 28px;
  background:var(--cream);
}
.hero-body{ margin:auto 0; text-align:center; }

.s1-h{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:clamp(25px,7.2cqw,31px);
  line-height:1.14;
  text-wrap:balance;
}
.s1-h em{ font-style:normal; }

/* Подзаголовок вынесен в отдельную плашку: рядом с плотным
   заголовком обычный текст читался как подпись под ним, а не как
   самостоятельная мысль. Плашка отделяет его физически. */
.lead-box{
  position:relative;
  /* Во всю ширину колонки, как заголовок над ней: на компьютере
     плашка по ширине текста выходила заметно уже заголовка, и пара
     читалась криво. */
  display:block;
  margin:clamp(30px,8cqw,46px) 0 0;
  padding:clamp(18px,5cqw,26px) clamp(20px,5.5cqw,28px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Обводка по периметру плашки. Она же индикатор: пока линия идёт —
   экран держится, замкнулась — отпускает. Без неё человек делает
   движение пальцем, картинка не меняется, и кажется, что сайт завис.
   Размеры прямоугольника ставит скрипт в пикселях: в процентах SVG
   считает скругление углов от обеих сторон сразу, и на вытянутой
   карточке углы разъезжаются. */
.lead-ring{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
  pointer-events:none;
}
.lead-ring rect{
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--ring,0));
}
.lead{
  position:relative; z-index:1;
  font-size:clamp(18px,5.2cqw,22px);
  line-height:1.45;
  color:var(--ink-soft);
  transition:color .4s ease;
}
.lead.is-grown{ color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .hero-wrap{ height:auto; }
  .hero{ position:static; }
  .lead-ring rect{ stroke-dashoffset:0; }
  .lead{ color:var(--ink); }
}

/* ---------- Экран 3 · набор по прокрутке ----------
   Высота блока задаёт темп: чем он длиннее, тем больше прокрутки
   приходится на ту же букву. Меняя это число, меняем скорость всего
   экрана разом. */
.story-wrap{ position:relative; height:520svh; }
.story-stage{
  position:sticky; top:0;
  min-height:100svh;
  display:flex; align-items:center;
  padding:44px 28px;
  background:var(--cream);
}
/* Высота фиксированная, текст прижат к верху: порции разной длины, и
   при выравнивании по центру каждая начиналась бы со своей строки —
   текст прыгал бы вверх-вниз от порции к порции. Теперь все начинают
   с одной линии и растут вниз. */
.story{
  height:44svh;
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:clamp(21px,5.9cqw,25px);
  line-height:1.32;
  letter-spacing:-.02em;
  color:var(--ink);
  white-space:pre-wrap;
}

.caret{
  display:inline-block;
  width:3px; height:.86em;
  margin-left:3px;
  vertical-align:-.08em;
  background:var(--orange-2);
  animation:blink 1s steps(1) infinite;
}
.caret.is-off{ opacity:0; animation:none; }

/* ---------- Экран 4 · что ты получишь ----------
   Пункты проступают по одному по мере прокрутки, следом главное
   обещание. Кнопки здесь нет намеренно — она ждёт в финале, после
   стрелки. */
.gain-wrap{ position:relative; height:340svh; }

.gain-stage{
  --g0:0; --g1:0; --g2:0; --g3:0;   /* пункты */
  --gm:0;                            /* главное обещание */
  --gz:0;                            /* оно же — раздаётся вширь */
  position:sticky; top:0;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(32px,8cqw,52px) 28px;
  background:var(--cream);
}

.gain-h{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:clamp(24px,6.8cqw,30px);
  line-height:1.16;
  letter-spacing:-.02em;
  text-align:center;
}

.gain-list{
  margin:clamp(24px,6cqw,34px) 0 0;
  list-style:none;
  display:flex; flex-direction:column; gap:clamp(12px,3.2cqw,16px);
}
.gain-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:clamp(15px,4.2cqw,17px);
  line-height:1.45;
  color:var(--ink);
  opacity:var(--v,0);
  transform:translateY(calc((1 - var(--v,0)) * 10px));
}
.gain-list i{
  flex:none;
  width:9px; height:9px; margin-top:.45em;
  border-radius:50%;
  background:var(--gradient);
}

/* Главное обещание — отдельная плотная карточка: оно должно весить
   больше, чем весь список над ним. */
.gain-main{
  margin-top:clamp(24px,6cqw,34px);
  padding:clamp(20px,5.5cqw,28px);
  border-radius:var(--radius);
  background:var(--ink);
  color:var(--cream);
  box-shadow:var(--shadow);
  text-align:center;
  opacity:var(--gm);
  /* Сначала выезжает, потом — на следующем движении пальца — ещё
     чуть раздаётся: карточка будто набирает вес перед тем, как из-под
     неё выйдет стрелка. */
  transform:translateY(calc((1 - var(--gm)) * 16px))
            scale(calc(.96 + .04 * var(--gm) + .045 * var(--gz)));
}
.gain-main-text{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:clamp(19px,5.4cqw,24px);
  line-height:1.25;
  letter-spacing:-.02em;
}
.gain-main-text em{
  font-style:normal;
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (prefers-reduced-motion: reduce){
  .gain-wrap{ height:auto; }
  .gain-stage{
    position:static; min-height:0;
    --g0:1; --g1:1; --g2:1; --g3:1; --gm:1; --gz:1;
  }
}


/* ---------- Финал · стрелка, кнопка, вывод ----------
   Блок НЕ липкий: стрелка должна выходить прямо из-под карточки
   предыдущего экрана. Липкая сцена рвала бы эту связь — стрелка
   читалась бы отдельной картинкой, а не продолжением мысли. */
.fin-wrap{
  position:relative;
  /* Наезд на предыдущий экран: он держит высоту экрана целиком, и без
     этого стрелка начиналась бы далеко под карточкой, оторванной от
     неё. Больше — и кремовый фон блока срежет карточке низ: здесь
     карточка выше, чем в первом практикуме, и запас меньше. */
  margin-top:-11svh;
  /* Запас снизу не для красоты: без него страница заканчивается
     раньше, чем стрелка успевает подняться по экрану, и на высоких
     окнах линия не дочерчивается, а кнопка так и не появляется. */
  padding:0 0 42svh;
}
.fin-stage{
  --sp:0;   /* прочерчивание стрелки */
  --ar:0;   /* наконечник */
  --fb:0;   /* кнопка */
  --ga:0;   /* вывод под кнопкой */
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px,3cqw,18px);
  padding:0 28px;
  background:var(--cream);
}
.fin-spiral{
  width:auto;
  height:clamp(360px,92cqw,520px);
  display:block;
  overflow:visible;
}
.fin-line{
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--sp));
}
.fin-tip{ opacity:var(--ar); }

.fin-cta{
  width:100%;
  max-width:460px;
  opacity:var(--fb);
  transform:translateY(calc((1 - var(--fb)) * 14px));
}
.fin-cta .btn{
  padding:19px 28px;
  font-size:17px;
}

/* Вне рамки и другим шрифтом: рядом с тезисами, набранными тем же
   Manrope, этот вывод терялся бы среди них. Заголовочный Unbounded
   отделяет его — читается как отдельная реплика, а не пятый пункт
   списка. */
.gain-after{
  margin-top:clamp(20px,5.5cqw,28px);
  font-family:'Unbounded', sans-serif;
  font-weight:500;
  font-size:clamp(15px,4.3cqw,18px);
  line-height:1.35;
  letter-spacing:-.02em;
  color:var(--ink);
  text-align:center;
  max-width:34ch;
  opacity:var(--ga);
  transform:translateY(calc((1 - var(--ga)) * 12px));
}
.gain-after em{
  font-style:normal;
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (prefers-reduced-motion: reduce){
  .fin-stage{ --sp:1; --ar:1; --fb:1; --ga:1; }
}

/* ---------- Экран 2 · зум внутрь ----------
   Полёт сквозь три кольца. Скрипт ставит --hd (заголовок) и
   позиции колец; масштаб растёт степенью, в CSS такого не посчитать,
   поэтому transform кольцам ставится напрямую. */
.zoom-wrap{ position:relative; height:560svh; }

.zoom-stage{
  --hd:1;                     /* заголовок: 1 — стоит, 0 — ушёл */
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
  background:var(--cream);
}

/* Заголовок стоит один, без колец, и уходит вперёд — будто камера
   проваливается сквозь него. */
.zoom-intro{
  position:absolute; left:28px; right:28px; top:50%;
  z-index:4;
  text-align:center;
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:clamp(22px,6.4cqw,28px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
  opacity:var(--hd);
  transform:translateY(-50%) scale(calc(1 + (1 - var(--hd)) * .3));
  pointer-events:none;
}
.zoom-intro em{ font-style:normal; }

.zoom-rings{ position:absolute; inset:0; }

/* Кольцо. Размер задан и шириной, и кеглем: подписи внутри считаются
   в em, поэтому текст масштабируется вместе с кольцом.
   Кольцо чуть меньше, чем позволяет экран, — над ним и под ним
   должны поместиться подписи уровня и глубины. */
.zoom-ring{
  position:absolute; left:50%; top:50%;
  width:min(72cqw, 56svh);
  aspect-ratio:1;
  font-size:min(72cqw, 56svh);
  transform:translate(-50%,-50%);
  will-change:transform, opacity;
}
.zoom-ring svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.zoom-ball{
  position:absolute; inset:14%;
  opacity:0;
  border-radius:50%;
  background:var(--gradient);
  box-shadow:0 0 22cqw rgba(255,141,0,.45), 0 10cqw 20cqw -8cqw rgba(255,109,0,.55);
}

.zoom-label{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:72%;
  text-align:center;
  pointer-events:none;
}
/* Вся подпись — одной фразой, одним шрифтом и одним кеглем.
   Кегль подобран так, чтобы самая длинная из трёх («Определи свои
   истинные желания») укладывалась внутрь окружности. */
.zoom-name{
  font-family:'Unbounded', sans-serif;
  font-weight:800;
  font-size:.076em;
  line-height:1.16;
  letter-spacing:-.03em;
  text-wrap:balance;
}

@media (prefers-reduced-motion: reduce){
  .zoom-wrap{ height:100svh; }
  .zoom-stage{ --hd:0; position:static; }
}