/* ЛИГА Павловния — система движения.
   Слой поверх style.css: ничего не переопределяет через !important.
   Правило проекта: анимируем только transform, opacity, clip-path и цвет.
   background-attachment:fixed не используется — параллакс собран на слоях. */

/* ═══════════════════════════════════════════════════════════════
   1. ТОКЕНЫ ДВИЖЕНИЯ — одна рука на весь сайт
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* длительности: пять ступеней, больше не заводим */
  --mo-tap:120ms;    /* нажатие, отклик под пальцем */
  --mo-fast:200ms;   /* наведение, цвет, поля ввода */
  --mo-ui:320ms;     /* модалка, меню, панель */
  --mo-in:640ms;     /* появление блока в кадре */
  --mo-film:1600ms;  /* кинематографичные, редкие вещи: вход в герой */

  /* кривые: резкий старт, долгое успокоение — «дорого» это про тормоз, а не про разгон */
  --mo-enter:cubic-bezier(.22,1,.36,1);  /* появление, подъём */
  --mo-move:cubic-bezier(.25,1,.5,1);    /* сдвиг, рост линии */
  --mo-soft:cubic-bezier(.32,.72,0,1);   /* крупные плавные ходы */

  /* шкала задержек: задержка = --i × --mo-step. Темп меняем на контейнере */
  --mo-step:70ms;
  --mo-rise:26px;    /* базовый подъём при появлении */
}

/* полоса прокрутки зарезервирована всегда: открытие модалки не дёргает вёрстку */
html{scrollbar-gutter:stable}

/* ═══════════════════════════════════════════════════════════════
   2. ПОЯВЛЕНИЕ БЛОКОВ — общий закон для всей страницы
   ═══════════════════════════════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(var(--mo-rise));
  filter:blur(5px);
  transition:
    opacity var(--mo-in) var(--mo-enter),
    transform var(--mo-in) var(--mo-enter),
    filter var(--mo-in) linear;
}
.reveal.on{opacity:1;transform:none;filter:none}
/* ступенька по шкале; :nth-child(n) — чтобы перебить прежние точечные задержки */
.reveal:nth-child(n){transition-delay:calc(var(--i,0) * var(--mo-step))}

/* темп группы: чем крупнее и важнее блок, тем шире шаг */
.stats-grid{--mo-step:110ms}
.feats--row,.steps{--mo-step:80ms}
.team--lead{--mo-step:90ms}
.team--rest{--mo-step:60ms}
.risks{--mo-step:90ms}
.plans--duo{--mo-step:120ms}

/* если JS не выполнился вовсе — контент обязан остаться видимым */
@media (scripting:none){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   3. ВХОД В ГЕРОЙ — чистый CSS, без JS: не мигает и не зависит от скрипта
   ═══════════════════════════════════════════════════════════════ */
@keyframes moRise{
  from{opacity:0;transform:translateY(22px);filter:blur(6px)}
  to  {opacity:1;transform:none;filter:none}
}
@keyframes moWipe{
  from{clip-path:inset(0 100% 0 0)}
  to  {clip-path:inset(0 0 0 0)}
}
@keyframes moBgSettle{        /* кадр «успокаивается» после загрузки */
  from{scale:1.06}
  to  {scale:1}
}

.hero .kicker   {animation:moRise 760ms var(--mo-enter) 120ms both}
.hero-h .hl1    {animation:moRise 820ms var(--mo-enter) 180ms both}
.hero-h .hl3    {animation:moRise 820ms var(--mo-enter) 290ms both}
.hero__rule     {animation:moWipe 900ms var(--mo-move) 480ms both}
.hero__sub      {animation:moRise 780ms var(--mo-enter) 430ms both}
.hero__actions  {animation:moRise 780ms var(--mo-enter) 560ms both}
.hero__foot     {animation:moRise 780ms var(--mo-enter) 700ms both}

/* метка «далее ↓» уходит, как только человек тронулся с места */
.hero__next{transition:opacity var(--mo-ui) var(--mo-enter),transform var(--mo-ui) var(--mo-enter)}
html.lp-scrolled .hero__next{opacity:0;transform:translateY(8px)}

/* ═══════════════════════════════════════════════════════════════
   4. СВЯЗЬ С ПРОКРУТКОЙ
   ═══════════════════════════════════════════════════════════════ */
/* 4.1 слои фоновых фотографий (создаются из motion.js).
   Слой-обойма строго по границам секции и режет всё лишнее: декоративная
   подложка не имеет права расширять документ и давать горизонтальную прокрутку.
   Запас под движение и «оседание» кадра живёт ВНУТРИ обоймы. */
.lp-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lp-bg__i{
  position:absolute;inset:-8% 0;   /* запас по высоте: сдвиг не открывает край кадра */
  background-size:cover;background-repeat:no-repeat;background-position:center;
}
/* фон должен лечь под градиентные шторки секции, а не поверх них */
.hero::before,.section--photo::before{z-index:1}
/* подстраховка: секция с фотослоем не растягивает страницу вширь */
.hero,.section--photo{overflow-x:clip}
/* «оседание» кадра — отдельным свойством scale, чтобы не спорить
   с transform, которым motion.js двигает тот же слой для параллакса */
.hero .lp-bg--settle .lp-bg__i{animation:moBgSettle var(--mo-film) var(--mo-soft) both}

/* 4.2 крупные заголовки чуть плывут, пока секция проходит кадр.
   Только там, где нет анимации появления — иначе два хозяина у transform. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes moDrift{from{transform:translateY(16px)}to{transform:translateY(-16px)}}
    .h-sect:not(.reveal),.finale__left h2{
      animation:moDrift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    /* герой уезжает медленнее страницы и гаснет — кинематографичный выход из кадра */
    @keyframes moHeroPark{to{transform:translateY(-52px);opacity:.34}}
    .hero__body{
      animation:moHeroPark linear both;
      animation-timeline:scroll(root);
      animation-range:12vh 88vh;
    }
  }
}

/* 4.3 шапка приподнимается над контентом, когда под ней появился текст */
.nav__in{transition:box-shadow var(--mo-ui) var(--mo-enter),border-color var(--mo-ui) linear}
html.lp-scrolled .nav__in{box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.22)}

/* ═══════════════════════════════════════════════════════════════
   5. ЛЕНТА ЭТАПОВ И РЕЛЬС — движение от посадки к рубке
   ═══════════════════════════════════════════════════════════════ */
/* контейнер не появляется целиком: работу делают узлы, иначе два движения спорят */
html.lp-motion .tl.reveal,
html.lp-motion .rail.reveal,
html.lp-motion .nursery-shot.reveal{opacity:1;transform:none;filter:none;transition:none}

/* 5.1 лента «Посадка → Уход → Рубка → Новый цикл» —
   одно дерево в четырёх стадиях жизни. Отыгрывается один раз, при входе секции.
   --t0 — момент старта узла на общей шкале, дальше внутри узла своя ступенька. */
html.lp-motion .tl{--mo-step:200ms}
html.lp-motion .tl .tl__i{--t0:calc(var(--i,0) * var(--mo-step))}

/* узел-плитка */
html.lp-motion .tl .tl__ico{
  opacity:0;transform:translateY(10px) scale(.9);
  transition:opacity 340ms var(--mo-enter) var(--t0),
             transform 480ms var(--mo-enter) var(--t0);
}
html.lp-motion .tl.on .tl__ico{opacity:1;transform:none}

/* связь между узлами тянется вправо: это дорога во времени, а не четыре значка */
html.lp-motion .tl .tl__i::before{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 620ms var(--mo-move) calc(var(--t0) + 120ms);
}
html.lp-motion .tl.on .tl__i::before{transform:scaleX(1)}

/* подписи узла идут сразу за плиткой — читать можно, не дожидаясь рисунка */
html.lp-motion .tl .tl__i>h4,
html.lp-motion .tl .tl__i>p{
  opacity:0;transform:translateY(8px);
  transition:opacity 420ms var(--mo-enter) calc(var(--t0) + 170ms),
             transform 420ms var(--mo-enter) calc(var(--t0) + 170ms);
}
html.lp-motion .tl.on .tl__i>h4,
html.lp-motion .tl.on .tl__i>p{opacity:1;transform:none}

/* ── графика стадии ──
   Штриховые линии прорисовываются: длину пути --len меряет motion.js.
   Формы (листья, побеги, кольца) не «рисуются», а раскрываются от места крепления. */
html.lp-motion .tlico path,
html.lp-motion .tlico ellipse{transform-box:fill-box}

/* земля — визуальная константа всех четырёх стадий, входит первой */
html.lp-motion .tlico__soil{
  stroke-dasharray:var(--len,40);stroke-dashoffset:var(--len,40);
  transition:stroke-dashoffset 300ms var(--mo-move) calc(var(--t0) + 60ms);
}
/* стадия 1: посадочная ямка */
html.lp-motion .tlico__hole{
  stroke-dasharray:var(--len,24);stroke-dashoffset:var(--len,24);
  transition:stroke-dashoffset 240ms var(--mo-move) calc(var(--t0) + 180ms);
}
/* росток и ствол растут снизу вверх — пути начинаются от земли */
html.lp-motion .tlico__stem,
html.lp-motion .tlico__trunk{
  stroke-dasharray:var(--len,50);stroke-dashoffset:var(--len,50);
  transition:stroke-dashoffset 460ms var(--mo-move) calc(var(--t0) + 200ms);
}
html.lp-motion .tlico--1 .tlico__stem{transition-delay:calc(var(--t0) + 300ms)}
/* Проявляем формы через stroke-opacity, а не opacity: у части элементов
   в style.css своя заданная прозрачность, и она должна остаться за дизайном. */
/* листья раскрываются от стебля: первый — вправо, второй — влево */
html.lp-motion .tlico__leaf{
  stroke-opacity:0;transform:scale(.12);transform-origin:0% 100%;
  transition:stroke-opacity 240ms linear calc(var(--t0) + 560ms),
             transform 420ms var(--mo-enter) calc(var(--t0) + 560ms);
}
html.lp-motion .tlico__leaf ~ .tlico__leaf{
  transform-origin:100% 100%;
  transition-delay:calc(var(--t0) + 640ms);
}
/* стадия 2: стрелка роста идёт следом за деревом */
html.lp-motion .tlico__arrow{
  stroke-dasharray:var(--len,40);stroke-dashoffset:var(--len,40);
  transition:stroke-dashoffset 460ms var(--mo-move) calc(var(--t0) + 520ms);
}
/* стадия 3: пропил проходит поперёк, затем на срезе проявляются кольца от сердцевины */
html.lp-motion .tlico__saw{
  stroke-opacity:0;transform:scaleX(0);transform-origin:0% 50%;
  transition:stroke-opacity 120ms linear calc(var(--t0) + 480ms),
             transform 360ms var(--mo-move) calc(var(--t0) + 480ms);
}
html.lp-motion .tlico__ring,
html.lp-motion .tlico__cut{
  stroke-opacity:0;transform:scale(.2);transform-origin:50% 50%;
  transition:stroke-opacity 200ms linear calc(var(--t0) + 700ms),
             transform 320ms var(--mo-enter) calc(var(--t0) + 700ms);
}
html.lp-motion .tlico__ring ~ .tlico__ring{transition-delay:calc(var(--t0) + 620ms)} /* сердцевина */
html.lp-motion .tlico--3 .tlico__cut{transition-delay:calc(var(--t0) + 780ms)}       /* внешняя кромка */
/* стадия 4: пень уже есть, от него выходят побеги, стрелка замыкает круг */
html.lp-motion .tlico--4 .tlico__cut{transition-delay:calc(var(--t0) + 320ms)}
html.lp-motion .tlico__shoot{
  stroke-opacity:0;transform:scale(.12);transform-origin:100% 0%;
  transition:stroke-opacity 240ms linear calc(var(--t0) + 520ms),
             transform 420ms var(--mo-enter) calc(var(--t0) + 520ms);
}
html.lp-motion .tlico__shoot ~ .tlico__shoot{
  transform-origin:0% 0%;
  transition-delay:calc(var(--t0) + 600ms);
}
html.lp-motion .tlico__cycle{
  stroke-dasharray:var(--len,50);stroke-dashoffset:var(--len,50);
  transition:stroke-dashoffset 520ms var(--mo-move) calc(var(--t0) + 640ms);
}
/* конечное состояние — одно на всю графику */
html.lp-motion .tl.on .tlico__soil,
html.lp-motion .tl.on .tlico__hole,
html.lp-motion .tl.on .tlico__stem,
html.lp-motion .tl.on .tlico__trunk,
html.lp-motion .tl.on .tlico__arrow,
html.lp-motion .tl.on .tlico__cycle{stroke-dashoffset:0}
html.lp-motion .tl.on .tlico__leaf,
html.lp-motion .tl.on .tlico__shoot,
html.lp-motion .tl.on .tlico__ring,
html.lp-motion .tl.on .tlico__cut,
html.lp-motion .tl.on .tlico__saw{stroke-opacity:1;transform:none}

/* 5.2 рельс «Гектара»: линия прочерчивается, шаги подтягиваются следом */
html.lp-motion .rail{--mo-step:90ms}
html.lp-motion .rail::before{transform:scaleX(0);transform-origin:left center;
  transition:transform 900ms var(--mo-move) 60ms}
html.lp-motion .rail.on::before{transform:scaleX(1)}
html.lp-motion .rail .rail__i{
  opacity:0;transform:translateY(14px);
  transition:opacity 480ms var(--mo-enter) calc(var(--i,0) * var(--mo-step) + 200ms),
             transform 480ms var(--mo-enter) calc(var(--i,0) * var(--mo-step) + 200ms);
}
html.lp-motion .rail.on .rail__i{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════
   6. ФОТОМОДУЛЬ ПИТОМНИКА — каждый элемент входит со своей стороны
   ═══════════════════════════════════════════════════════════════ */
html.lp-motion .nursery-shot{--mo-step:110ms}
html.lp-motion .nursery-shot__main,
html.lp-motion .nursery-shot .tag-note,
html.lp-motion .nursery-shot__leaf,
html.lp-motion .nursery-shot__badge{
  opacity:0;
  transition:opacity 700ms var(--mo-enter) calc(var(--i,0) * var(--mo-step)),
             transform 780ms var(--mo-enter) calc(var(--i,0) * var(--mo-step));
}
html.lp-motion .nursery-shot__main{transform:scale(1.035)}       /* кадр садится в рамку */
html.lp-motion .nursery-shot .tag-note{transform:translateY(22px)}
/* сбоку бирка приходит только там, где она и стоит сбоку: в одну колонку
   горизонтальный ход бессмыслен и вылезает за край экрана */
@media (min-width:1024px){
  html.lp-motion .nursery-shot .tag-note{transform:translateX(26px)}
}
html.lp-motion .nursery-shot__leaf{transform:translateY(24px)}
html.lp-motion .nursery-shot__badge{transform:translateY(12px) scale(.94)}
html.lp-motion .nursery-shot.on .nursery-shot__main,
html.lp-motion .nursery-shot.on .tag-note,
html.lp-motion .nursery-shot.on .nursery-shot__leaf,
html.lp-motion .nursery-shot.on .nursery-shot__badge{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════
   7. ФИРМЕННЫЙ МОТИВ: кольца растут от сердцевины к краю
   ═══════════════════════════════════════════════════════════════ */
html.lp-motion .ring-corner.reveal::after{
  clip-path:circle(88% at 50% 50%);
  transition:clip-path 1100ms var(--mo-enter) calc(var(--i,0) * var(--mo-step) + 220ms);
}
html.lp-motion .ring-corner.reveal:not(.on)::after{clip-path:circle(0% at 50% 50%)}

/* ═══════════════════════════════════════════════════════════════
   8. МИКРОВЗАИМОДЕЙСТВИЯ
   ═══════════════════════════════════════════════════════════════ */
/* 8.1 кнопки: отклик под пальцем важнее красоты наведения */
.btn{
  transition:transform var(--mo-tap) var(--mo-enter),
             box-shadow var(--mo-ui) var(--mo-enter),
             background-color var(--mo-fast) linear,
             border-color var(--mo-fast) linear;
}
.btn svg{transition:transform var(--mo-ui) var(--mo-move)}
.btn:active,.btn--lime:active,.btn--gold:active,.btn--ghost:active{
  transform:translateY(0) scale(.985);transition-duration:var(--mo-tap)
}
@media (hover:hover) and (pointer:fine){
  .btn:hover svg{transform:translateX(4px)}   /* стрелка тянет дальше — смысл кнопки */
}
/* на тач-устройствах наведение залипает после тапа — гасим подъёмы */
@media (hover:none){
  .glass:hover,.card-l:hover,.feats--row .feat:hover,
  .plans--duo .plan:hover,.btn--lime:hover,.btn--gold:hover{transform:none}
}

/* 8.2 карточки: тот же вход, что у всего сайта */
.glass,.card-l,.feats--row .feat,.plans--duo .plan{
  transition:transform var(--mo-ui) var(--mo-enter),box-shadow var(--mo-ui) var(--mo-enter)
}
/* модалка, форма и плита контактов не ездят под курсором:
   поверхность, в которую печатают, не должна прыгать от наведения */
.gate__box:hover,.contacts:hover,.finale__form:hover{transform:none}

/* 8.3 ссылки: подчёркивание вырастает от курсора */
.nav__menu a,.foot-links a,.c-line a{
  position:relative;transition:color var(--mo-fast) linear,opacity var(--mo-fast) linear
}
.nav__menu a::after,.foot-links a::after,.c-line a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:currentColor;opacity:.55;
  transform:scaleX(0);transform-origin:right center;
  transition:transform var(--mo-ui) var(--mo-move);
}
@media (hover:hover) and (pointer:fine){
  .nav__menu a:hover::after,.foot-links a:hover::after,.c-line a:hover::after{
    transform:scaleX(1);transform-origin:left center
  }
}

/* 8.4 поля ввода: спокойная подсветка вместо рывка */
.form-row input[type=text],.form-row input[type=tel],.form-row input[type=email],
.finale__form input,.finale__form textarea,
.gate__form input[type=text],.gate__form input[type=tel],.gate__form input[type=email]{
  transition:border-color var(--mo-fast) linear,background-color var(--mo-fast) linear,
             box-shadow var(--mo-fast) var(--mo-enter);
}
.section--light .form-row input:focus{
  border-color:rgba(113,137,31,.55);background:rgba(255,255,255,.96)
}
/* форма финала стоит на тёмном стекле — подсветка своя */
.finale__form input:focus,.finale__form textarea:focus{
  border-color:rgba(198,224,107,.6);background:rgba(255,255,255,.11)
}
.gate__form input:focus{
  border-color:rgba(198,224,107,.6);background:rgba(255,255,255,.11)
}
.check input,.gate__radio input{transition:transform var(--mo-tap) var(--mo-enter)}
.check input:active,.gate__radio input:active{transform:scale(.9)}
.form-msg{transition:opacity var(--mo-ui) var(--mo-enter)}

/* ═══════════════════════════════════════════════════════════════
   9. ФОРМА-ГЕЙТ, COOKIE, МОБИЛЬНОЕ МЕНЮ
   ═══════════════════════════════════════════════════════════════ */
/* 9.1 модалка: подложка проявляется, окно поднимается из центра.
   Класс lp-open ставит motion.js, увидев снятие атрибута hidden. */
html.lp-motion .gate .gate__back{opacity:0;transition:opacity var(--mo-ui) var(--mo-enter)}
html.lp-motion .gate.lp-open .gate__back{opacity:1}
html.lp-motion .gate .gate__box{
  opacity:0;transform:translateY(18px) scale(.965);
  transition:opacity var(--mo-ui) var(--mo-enter) 40ms,
             transform 420ms var(--mo-enter) 40ms;
}
html.lp-motion .gate.lp-open .gate__box{opacity:1;transform:none}

/* 9.2 cookie-баннер приходит после того, как герой успокоился */
@supports (transition-behavior:allow-discrete){
  .cookiebar{
    opacity:0;transform:translateY(16px);
    transition:opacity 160ms var(--mo-enter),transform 160ms var(--mo-enter),
               display 160ms allow-discrete;
  }
  .cookiebar.open{
    opacity:1;transform:none;
    transition:opacity var(--mo-ui) var(--mo-enter) 900ms,
               transform var(--mo-ui) var(--mo-enter) 900ms,
               display var(--mo-ui) allow-discrete 900ms;
  }
  @starting-style{.cookiebar.open{opacity:0;transform:translateY(16px)}}

  /* 9.3 мобильное меню разворачивается от кнопки-бургера */
  @media (max-width:1023px){
    .nav .nav__menu{
      opacity:0;transform:translateY(-10px) scale(.98);transform-origin:top right;
      transition:opacity 140ms var(--mo-enter),transform 140ms var(--mo-enter),
                 display 140ms allow-discrete;
    }
    .nav.open .nav__menu{
      opacity:1;transform:none;
      transition:opacity var(--mo-ui) var(--mo-enter),transform var(--mo-ui) var(--mo-enter);
    }
    @starting-style{.nav.open .nav__menu{opacity:0;transform:translateY(-10px) scale(.98)}}
  }
}

/* ═══════════════════════════════════════════════════════════════
   10. ПРОИЗВОДИТЕЛЬНОСТЬ
   ═══════════════════════════════════════════════════════════════ */
/* бесконечные петли не крутятся за пределами экрана */
.hero.lp-off::after,
.hero.lp-off .hero__fly i,
.hero.lp-off .hero__next i{animation-play-state:paused}
/* слой поднимается на GPU только пока он в кадре — снимается в motion.js */
.lp-bg__i{backface-visibility:hidden}

/* ═══════════════════════════════════════════════════════════════
   11. PREFERS-REDUCED-MOTION — движение выключено, содержание на месте
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .hero .kicker,.hero-h .hl1,.hero-h .hl3,.hero__rule,
  .hero__sub,.hero__actions,.hero__foot,.hero__body,
  .h-sect,.cta-card h2,.lp-bg--settle{animation:none}
  .hero__next{transition:none}
  html.lp-scrolled .hero__next{opacity:1;transform:none}
  /* лента, рельс, фотомодуль, кольца — сразу в конечном состоянии */
  .tl .tl__ico,.tl .tl__i>h4,.tl .tl__i>p,
  .rail .rail__i,
  .nursery-shot__main,.nursery-shot .tag-note,
  .nursery-shot__leaf,.nursery-shot__badge,
  .gate .gate__back,.gate .gate__box{opacity:1;transform:none;transition:none}
  .tl .tl__i::before,.rail::before{transform:none;transition:none}
  .tlico__soil,.tlico__hole,.tlico__stem,.tlico__trunk,
  .tlico__arrow,.tlico__cycle{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .tlico__saw{stroke-dasharray:3 3}
  .tlico__leaf,.tlico__shoot,.tlico__ring,.tlico__cut,.tlico__saw{
    stroke-opacity:1;transform:none;transition:none
  }
  .ring-corner.reveal::after{clip-path:none;transition:none}
  .cookiebar,.cookiebar.open,.nav .nav__menu,.nav.open .nav__menu{
    opacity:1;transform:none;transition:none
  }
  .btn,.btn svg,.glass,.card-l,.feats--row .feat,.plans--duo .plan,
  .nav__menu a::after,.foot-links a::after,.c-line a::after{transition:none}
  .btn:active,.btn--lime:active,.btn--gold:active,.btn--ghost:active{transform:none}
  .nav__menu a:hover::after,.foot-links a:hover::after,.c-line a:hover::after{transform:scaleX(1)}
}