/* ============================================================
   Прогресс секции: JS пишет --p (0..1) в [data-pin].
   Шаг: clamp(0, (p - старт) / длительность, 1).
   Анимируем только transform и opacity: так прокрутка не тормозит на телефоне.
   ============================================================ */
[data-pin]{--p:0}

/* ===================== 1. ПЕРВЫЙ ЭКРАН ===================== */
.hero{height:150svh;z-index:1;--h1:clamp(40px,12.4vw,150px)}
.hero .stick{transform-origin:50% 0;transform:scale(calc(1 - clamp(0,(var(--p) - .25) / .75,1) * .06))}
.hero-shade{position:absolute;inset:0;z-index:7;background:#000;pointer-events:none;opacity:calc(clamp(0,(var(--p) - .25) / .75,1) * .6)}
.hero-glow{position:absolute;left:50%;top:38%;width:120vmax;height:120vmax;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,208,43,.24),rgba(242,208,43,.05) 45%,transparent 70%)}
.hero-back{position:absolute;left:0;right:0;top:calc(var(--hdr) + 9svh);z-index:1;
  font:800 clamp(96px,34vw,420px)/.9 var(--f-head);letter-spacing:-.06em;text-transform:uppercase;
  transform:translateY(calc(var(--p) * -14svh))}
.hero-back .mq{-webkit-mask:none;mask:none}
.hero-back span{color:var(--lemon)}
.hero-back .o{color:transparent;-webkit-text-stroke:1.5px rgba(241,238,230,.28)}
.hero-man{position:absolute;z-index:2;left:50%;bottom:13svh;height:72svh;aspect-ratio:2/3;translate:-50% 0;will-change:transform;
  transform:translateY(calc(var(--p) * -4%))}
.hero-man img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  -webkit-mask:linear-gradient(to bottom,#000 58%,transparent 94%);mask:linear-gradient(to bottom,#000 58%,transparent 94%);
  animation:man-in 1.2s var(--e) both .1s}
@keyframes man-in{from{opacity:0;transform:translateY(5%) scale(1.03)}}
.sparks{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.hero .stick::after{content:"";position:absolute;inset:auto 0 0;height:44%;z-index:3;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 32%,rgba(10,10,11,.6) 62%,transparent)}
.hero-top{position:absolute;z-index:5;left:0;right:0;top:calc(var(--hdr) + 4px)}
.hero-top .label b{display:inline-block;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero-sub{margin-top:6px;max-width:31ch;font-size:13.5px;line-height:1.4;color:rgba(241,238,230,.78)}
.hero-h{position:absolute;z-index:5;left:0;right:0;top:46svh;margin-inline:auto;max-width:8.2ch;text-align:center;
  font-size:var(--h1);line-height:.92;text-shadow:0 6px 40px rgba(0,0,0,.45)}
.hero-cta{position:absolute;z-index:5;left:0;right:0;bottom:84px;display:grid;gap:10px}
.hero-cta .btn{width:100%}
.hero-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-badge{position:absolute;z-index:4;left:var(--gut);top:calc(var(--hdr) + 7svh);width:82px;height:82px;border-radius:50%;
  background:rgba(20,20,22,.85);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;animation:badge-in 1s var(--e-back) both .8s}
@keyframes badge-in{from{opacity:0;transform:scale(.4) rotate(-40deg)}}
.hero-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.hero-badge text{font:500 9.4px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;fill:var(--milk)}
@keyframes spin{to{transform:rotate(360deg)}}
.slice{width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle,#FFF6C4 0 14%,transparent 15%),repeating-conic-gradient(from 10deg,#F2D02B 0 40deg,#FFF1A8 40deg 45deg),#F2D02B;
  box-shadow:0 0 0 3px #FFF1A8,0 0 0 5px #D9B600,0 0 20px rgba(242,208,43,.5)}
.hero-platforms{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:10px 0 14px;border-top:1px solid var(--line)}
.hero-platforms .label{margin-bottom:8px;padding-inline:var(--gut)}
.pf{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:600 15px/1 var(--f-body);color:rgba(241,238,230,.78)}
.pf img{opacity:.9}
.pf-2gis{width:24px;height:24px;border-radius:7px;background:var(--milk);color:var(--ink);font:800 13px/24px var(--f-head);text-align:center;font-style:normal}
.pf-ya{background:#FC3F1D;color:#fff;border-radius:50%}

@media (min-width:900px){
  .hero-man{left:auto;right:5vw;translate:none;bottom:0;height:92svh}
  .hero-man img{-webkit-mask:linear-gradient(to bottom,#000 70%,transparent 98%);mask:linear-gradient(to bottom,#000 70%,transparent 98%)}
  .hero-back{top:calc(var(--hdr) + 2svh);font-size:clamp(120px,15vw,260px)}
  .hero{--h1:clamp(60px,6.8vw,124px)}
  .hero-h{left:var(--gut);right:auto;top:auto;bottom:250px;margin:0;text-align:left;max-width:9ch;font-size:var(--h1)}
  .hero-cta{left:var(--gut);right:auto;bottom:118px;grid-auto-flow:column;justify-content:start;align-items:center}
  .hero-cta .btn{width:auto}
  .hero-links{grid-template-columns:auto auto}
  .hero-sub{font-size:15px;max-width:40ch}
  .hero-badge{left:auto;right:var(--gut);top:calc(var(--hdr) + 12svh);width:112px;height:112px}
  .hero .stick::after{height:40%}
}

/* от 1024px рядом со словом «Привожу» хватает места */
@media (min-width:1024px){
  .hero-badge{width:104px;height:104px}
  /* положение считает JS по фактической ширине слова */
  .hero-badge.fit{left:var(--bx);right:auto;top:var(--by);bottom:auto;z-index:6;translate:0 -50%}
}
@media (min-width:1280px){
  .hero-badge{width:112px;height:112px}
}

/* лист, который наезжает на предыдущий экран */
.sheet{border-radius:28px 28px 0 0;box-shadow:0 -1px 0 rgba(242,208,43,.3),0 -16px 40px rgba(0,0,0,.45)}

/* ===================== 2. ЛИМОНЫ ===================== */
.lemons{height:260svh;margin-top:-40svh;z-index:2}
.lem-sheet{position:absolute;inset:0;background:var(--bg);overflow:hidden;border-radius:28px 28px 0 0;
  box-shadow:0 -1px 0 rgba(242,208,43,.35),0 -16px 40px rgba(0,0,0,.45)}
.lem-glow{position:absolute;left:50%;bottom:-25%;width:140vmax;height:100vmax;translate:-50% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,208,43,.36),transparent 70%);opacity:calc(.35 + var(--p) * .65)}
.lem-text{position:absolute;z-index:4;left:0;right:0;top:calc(var(--hdr) + 10px)}
.lem-h{font-weight:800}
.lem-a{display:block;text-transform:uppercase;font-size:clamp(34px,9.6vw,110px);line-height:.92}
.lem-b{display:block;margin-top:8px;font-size:clamp(50px,14.4vw,210px);line-height:1;letter-spacing:-.05em}
.lem-b .word{position:relative;display:inline-block;white-space:nowrap}
.lem-b .hl{transition:color .6s var(--e),text-shadow .6s var(--e)}
.lemons.lemon-on .lem-b .hl{color:var(--lemon);text-shadow:0 0 36px rgba(242,208,43,.35)}
.slot{position:relative;display:inline-block;width:0;height:0}
.hand{position:absolute;left:-.28em;bottom:-.25em;width:.56em;height:1.57em;max-width:none;overflow:visible}
.hand path{fill:none;stroke:var(--lemon);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.hand-c{stroke-dashoffset:calc(1 - clamp(0,(var(--p) - .46) / .08,1))}
.hand-m{stroke-dashoffset:calc(1 - clamp(0,(var(--p) - .52) / .14,1))}

.lem-stage{position:absolute;z-index:2;left:50%;bottom:0;height:62svh;aspect-ratio:2/3;translate:-50% 0}
.lem-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.lem-1{left:-5%;right:-5%;opacity:calc(1 - clamp(0,(var(--p) - .42) / .04,1))}
/* смена кадра снизу вверх: обёртка едет вверх, фото внутри стоит на месте */
.lem-2w{position:absolute;inset:0;overflow:hidden;will-change:transform;transform:translateY(calc((1 - clamp(0,(var(--p) - .12) / .3,1)) * 100%))}
.lem-2w .lem-2{will-change:transform;transform:translateY(calc((1 - clamp(0,(var(--p) - .12) / .3,1)) * -100%))}
.lem-line{position:absolute;z-index:3;left:-20%;right:-20%;top:0;height:2px;will-change:transform;
  background:linear-gradient(90deg,transparent,var(--lemon-2) 30%,var(--lemon) 70%,transparent);box-shadow:0 0 18px 2px rgba(242,208,43,.7);
  transform:translateY(calc((1 - clamp(0,(var(--p) - .12) / .3,1)) * 62svh));
  opacity:calc(clamp(0,(var(--p) - .12) / .02,1) * (1 - clamp(0,(var(--p) - .41) / .02,1)))}
.lem-stage::after{content:"";position:absolute;z-index:3;inset:auto -30% 0;height:30%;background:linear-gradient(to top,var(--bg) 10%,transparent)}
.lem-note{position:absolute;z-index:4;left:var(--gut);right:var(--gut);bottom:calc(88px + env(safe-area-inset-bottom));
  padding:12px 14px;border-radius:16px;background:rgba(10,10,11,.86);font:600 14.5px/1.4 var(--f-body);max-width:44ch;
  opacity:clamp(0,(var(--p) - .66) / .06,1);transform:translateY(calc((1 - clamp(0,(var(--p) - .66) / .06,1)) * 20px))}
.lem-note small{display:block;margin-top:6px;font:400 11.5px/1.45 var(--f-body);color:var(--mute)}
@media (min-width:900px){
  .lem-stage{left:auto;right:6vw;translate:none;height:88svh}
  .lem-line{transform:translateY(calc((1 - clamp(0,(var(--p) - .12) / .3,1)) * 88svh))}
  .lem-text{top:calc(var(--hdr) + 8svh)}
  .lem-a{font-size:clamp(56px,6.4vw,110px)}
  .lem-b{font-size:clamp(90px,10vw,200px)}
  .lem-note{bottom:48px;font-size:17px;right:auto}
}

/* ===================== 3. ОБО МНЕ ===================== */
.ab{height:230svh;z-index:3;margin-top:-22svh}
.ab .stick{background:var(--bg);border-radius:28px 28px 0 0;box-shadow:0 -1px 0 rgba(242,208,43,.3),0 -16px 40px rgba(0,0,0,.45)}
.ab .stick::after{content:"";position:absolute;inset:auto 0 0;height:42%;z-index:3;pointer-events:none;background:linear-gradient(to top,var(--bg) 35%,transparent)}
.ab-top{position:absolute;z-index:5;left:0;right:0;top:calc(var(--hdr) + 4px)}
.ab-name{position:absolute;z-index:1;left:0;right:0;top:calc(var(--hdr) + 34px);display:grid;
  font:800 clamp(56px,15.5vw,280px)/.86 var(--f-head);letter-spacing:-.065em;text-transform:uppercase;white-space:nowrap}
.ab-name span{color:var(--lemon);padding-left:var(--gut);will-change:transform;transform:translateX(calc(clamp(0,(var(--p) - .04) / .3,1) * -115vw))}
.ab-name .o{color:transparent;-webkit-text-stroke:1.5px rgba(241,238,230,.35);transform:translateX(calc(clamp(0,(var(--p) - .04) / .3,1) * 115vw))}
.ab-photo{position:absolute;z-index:2;left:50%;bottom:0;height:min(60svh,138vw);aspect-ratio:2/3;translate:-50% 0;transform-origin:50% 100%;
  will-change:transform;transform:scale(calc(1.08 - clamp(0,var(--p) / .35,1) * .08));
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent)}
.ab-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.ab-gray{filter:grayscale(1) brightness(.85)}
.ab-color{opacity:clamp(0,(var(--p) - .04) / .26,1)}
.ab-facts{position:absolute;z-index:4;left:var(--gut);right:var(--gut);top:calc(var(--hdr) + 34px);margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ab-fact{--t:clamp(0,(var(--p) - var(--at)) / .05,1);padding:12px 14px;border-radius:16px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line);
  opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 50px)) rotate(calc((1 - var(--t)) * -8deg)) scale(calc(.82 + var(--t) * .18))}
.ab-fact b{display:block;font:800 clamp(22px,6.2vw,44px)/1 var(--f-head);letter-spacing:-.05em;color:var(--lemon);margin-bottom:6px;white-space:nowrap}
.ab-fact>span{display:block;font-size:11.5px;line-height:1.3;color:var(--mute)}
.ab-lemon{background:var(--lemon);box-shadow:none}
.ab-lemon b{color:var(--ink)}
.ab-lemon>span{color:rgba(10,10,11,.65)}
.ab-foot{position:absolute;z-index:5;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom));display:grid;gap:12px;
  opacity:clamp(0,(var(--p) - .3) / .08,1);transform:translateY(calc((1 - clamp(0,(var(--p) - .3) / .08,1)) * 30px))}
.ab-h{font-size:clamp(24px,6.6vw,56px);line-height:1;max-width:16ch}
.ab-btn{width:100%}
@media (min-width:900px){
  .ab-photo{left:auto;right:6vw;translate:none;height:92svh}
  .ab-name{top:calc(var(--hdr) + 5svh)}
  .ab-facts{right:auto;width:min(560px,48vw);top:34svh}
  .ab-foot{left:var(--gut);right:auto;bottom:56px;max-width:560px;margin:0;padding:0}
  .ab-btn{width:auto;justify-self:start}
}

/* ===================== Шапка и панель под цвет секции ===================== */
.hdr.solid{background:color-mix(in srgb,var(--page-bg,#0A0A0B) 80%,transparent)}
body.hdr-ink:not(.menu-open) .hdr{color:var(--ink)}
body.hdr-ink:not(.menu-open) .burger{box-shadow:inset 0 0 0 1.5px rgba(10,10,11,.22)}
body.hdr-ink .nav a:not(.btn){color:rgba(10,10,11,.6)}
body.hdr-ink .nav a:not(.btn):hover{color:var(--ink)}
.dock{background:linear-gradient(to top,var(--page-bg,#0A0A0B) 55%,transparent)}
body[data-theme="lemon"] .dock .btn,body[data-theme="lemon"] .hdr .nav .btn{--bc:var(--ink);--tc:var(--lemon)}

/* ===================== Правки после проверки на телефоне ===================== */
@media (max-width:899px){
  /* имя-бегущая строка ниже подписи, за головой, чтобы текст сверху читался */
  .hero-back{top:calc(var(--hdr) + 17svh)}
  /* «миллионы» с запасом до края экрана */
  .lem-b{font-size:clamp(46px,13.2vw,210px)}
  /* фото в «Обо мне» выше, заголовок внизу не закрывает лицо */
  .ab-photo{bottom:17svh;height:min(54svh,124vw);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,#000 72%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,#000 72%,transparent);
    mask-composite:intersect}
}
@media (min-width:900px){
  /* на десктопе имя-строка контуром и ниже подписи, чтобы текст поверх читался */
  .hero-back{top:calc(var(--hdr) + 12svh)}
  .hero-back span{color:transparent;-webkit-text-stroke:1.5px rgba(242,208,43,.4)}
  .hero-h,.hero-cta{left:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)))}
  /* факты выше, не наезжают на заголовок и кнопку снизу */
  .ab-facts{top:calc(var(--hdr) + 18svh)}
}

/* первый экран появляется сразу при загрузке, не дожидаясь скрипта наблюдения:
   так заголовок и кнопка не остаются скрытыми на медленном телефоне */
.hero .split .w>i{animation:word-up 1s var(--e) both;animation-delay:calc(.12s + var(--i) * 60ms)}
@keyframes word-up{from{transform:translateY(105%)}to{transform:none}}
.js .hero .rv{opacity:1;transform:none;animation:rv-up .9s var(--e) both .5s}
@keyframes rv-up{from{opacity:0;transform:translateY(24px)}}

/* ===================== Третий круг правок ===================== */
/* «Обо мне»: три плашки, лимонная на всю ширину */
.ab-facts{grid-template-columns:1fr 1fr}
.ab-wide{grid-column:1 / -1}

@media (max-width:899px){
  /* первый экран: подписи перенесены в шапку, заголовок на всю ширину */
  .hero-top{display:none}
  .hero-back{top:calc(var(--hdr) + 8svh)}
  .hero-badge{top:calc(var(--hdr) + 5svh)}
  .hero-h{left:var(--gut);right:var(--gut);max-width:none;top:44svh;font-size:clamp(34px,10.8vw,60px);line-height:.95}

  /* лимоны: всё идёт за пальцем. --w = ход смены кадра 0..1 на отрезке прокрутки 8-58%,
     дальше финальный кадр держится, пока не наедет следующий блок */
  .lemons{height:280svh;--w:clamp(0,(var(--p) - .08) / .5,1)}
  .lem-a{font-size:clamp(32px,9.1vw,110px)}
  .lem-b{margin-top:.62em;font-size:clamp(44px,12.8vw,210px)}
  /* фото меняется снизу вверх вслед за линией сока */
  .lem-2w{transform:translateY(calc((1 - var(--w)) * 100%))}
  .lem-2w .lem-2{transform:translateY(calc((1 - var(--w)) * -100%))}
  .lem-1{opacity:calc(1 - clamp(0,(var(--w) - .92) / .08,1))}
  .lem-line{transform:translateY(calc((1 - var(--w)) * 62svh));
    opacity:calc(clamp(0,var(--w) / .03,1) * (1 - clamp(0,(var(--w) - .97) / .03,1)))}
  /* одновременно рисуется галочка и М, «ли» и «оны» перекрашиваются слева направо */
  .hand{opacity:clamp(0,(var(--w) - .15) / .03,1)}
  .hand-c{stroke-dashoffset:calc(1 - clamp(0,(var(--w) - .15) / .25,1))}
  .hand-m{stroke-dashoffset:calc(1 - clamp(0,(var(--w) - .35) / .6,1))}
  .lem-b .hl{color:transparent;text-shadow:none;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(90deg,var(--lemon) calc(var(--f) * 140% - 40%),var(--milk) calc(var(--f) * 140%))}
  .lem-b .word>.hl:nth-child(1){--f:clamp(0,(var(--w) - .1) / .35,1)}
  .lem-b .word>.hl:nth-child(3){--f:clamp(0,(var(--w) - .45) / .55,1)}
  .lemons.lemon-on .lem-b .hl{color:transparent;text-shadow:0 0 30px rgba(242,208,43,.3)}
}

@media (min-width:900px){
  /* лимоны на десктопе: текст слева и не закрывает фото, прокрутка как была */
  .lem-text{top:50%;right:auto;width:100%;transform:translateY(-50%)}
  .lem-h{max-width:58vw}
  .lem-a{font-size:clamp(48px,5.2vw,96px)}
  .lem-b{font-size:clamp(72px,7.6vw,150px);margin-top:.45em}
  .lem-stage{right:4vw;height:86svh}
  .lem-line{transform:translateY(calc((1 - clamp(0,(var(--p) - .12) / .3,1)) * 86svh))}
  /* «Обо мне»: цифры и заголовок по той же левой линии, что и остальные блоки */
  .ab-facts,.ab-foot{left:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)))}
}