/* 31.10.2026: «О компании», направление В «Кино на прокрутке». Только эта страница (body.est-about-page).
   Фон — ночной ультрамарин, не зелёный и не бежевый (владелец 31.10). Акцент — лайм бренда, путь письма — мята.
   Движение — CSS animation-timeline; без поддержки или при prefers-reduced-motion всё видно сразу и стоит. */
body.est-site.est-about-page{
  --ak-bg:#0b0c22;--ak-bg-2:#13153a;--ak-glow:#4b4ff0;--ak-violet:#8b6cf6;
  --ak-text:#fff;--ak-dim:rgba(232,234,255,.66);--ak-faint:rgba(232,234,255,.22);--ak-line:rgba(232,234,255,.12);
  background:var(--ak-bg);color:var(--ak-text)}
.est-about-page .est-nav.navbar{box-shadow:0 10px 40px rgba(0,0,0,.45)}
.est-about-page .ft{background:radial-gradient(90% 120% at 0% 100%,#2a2c86 0%,var(--ak-bg-2) 34%,#06071a 80%);box-shadow:0 0 0 1px var(--ak-line)}

.ak{overflow-x:clip;font-family:var(--alt-font)}
.ak h1,.ak h2,.ak p{font-family:var(--alt-font)}

/* 1. Сцена: 2013 и 2026, между ними летит письмо */
.ak-scene{position:relative;isolation:isolate;display:grid;grid-template-rows:1fr auto;min-height:calc(100dvh - 80px);padding:72px max(56px,calc((100% - 1280px)/2)) 56px}
.ak-scene::before{content:"";position:absolute;inset:-120px 0 -35%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 31% 64%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 18%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1px 1px at 63% 41%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1px 1px at 78% 12%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 58%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(1px 1px at 6% 78%,rgba(255,255,255,.3),transparent 60%),
    radial-gradient(60% 40% at 50% 78%,rgba(75,79,240,.5),rgba(75,79,240,0) 70%),
    radial-gradient(40% 40% at 88% 0%,rgba(139,108,246,.22),rgba(139,108,246,0) 70%)}
.ak-years{position:relative;display:flex;justify-content:space-between;align-items:center;font-weight:300;font-size:clamp(90px,15vw,232px);line-height:1;letter-spacing:-0.06em}
.ak-y1{color:var(--ak-faint)}
/* 2026 — счётчик: две последние цифры докручиваются от 2013, с размытием в движении */
.ak-y2{display:inline-flex}
.ak-y2 b{display:block;margin-right:-0.06em;font-weight:inherit;line-height:1;background:linear-gradient(180deg,#fff 22%,#b9b4ff 66%,var(--est-lime) 94%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ak-roll{display:block;height:1em;padding:0 .06em;margin:0 -.06em;overflow:hidden}
.ak-roll>span{display:block;transform:translateY(calc(var(--n) * -1em));animation:ak-roll calc(1.2s + var(--n) * .4s) cubic-bezier(.2,.7,.1,1) .5s both}
@keyframes ak-roll{from{transform:none;filter:blur(0)}40%{filter:blur(4px)}to{filter:blur(0)}}
/* линия между годами прочерчивается, по ней раз за разом пробегает свет */
.ak-path{position:relative;flex:1;margin:0 4vw;height:1px;overflow:visible;background:linear-gradient(90deg,rgba(185,180,255,.08),rgba(185,180,255,.55));transform-origin:left;animation:ak-draw .7s cubic-bezier(.6,0,.2,1) .1s both}
@keyframes ak-draw{from{transform:scaleX(0)}}
@keyframes ak-draw-v{from{transform:scaleY(0)}}
.ak-path i{position:absolute;top:-1px;left:-40px;width:160px;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(88,221,186,0),rgba(88,221,186,.55) 55%,#c9fff1);opacity:0;animation:ak-comet 2.4s cubic-bezier(.22,.65,.35,1) .35s infinite}
.ak-path i::after{content:"";position:absolute;right:-4px;top:-2.5px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(88,221,186,.9),0 0 40px 12px rgba(88,221,186,.4)}
/* попадание: у конца линии расходится кольцо, «2026» коротко вспыхивает (тот же такт, что у света) */
.ak-path::after{content:"";position:absolute;right:-7px;top:-7px;width:14px;height:14px;border-radius:50%;border:1px solid var(--est-mint);opacity:0;animation:ak-ping 2.4s linear .35s infinite}
@keyframes ak-ping{0%,70%{transform:scale(.2);opacity:0}78%{opacity:.9}100%{transform:scale(3);opacity:0}}
.ak-y2{animation:ak-hit 2.4s linear .35s infinite}
@keyframes ak-hit{0%,68%{filter:none}80%{filter:drop-shadow(0 0 22px rgba(88,221,186,.5)) brightness(1.15)}100%{filter:none}}
@keyframes ak-comet{0%{left:-40px;opacity:0}6%{opacity:1}78%{opacity:1}100%{left:calc(100% - 160px);opacity:0}}
@keyframes ak-comet-v{0%{top:-30px;opacity:0}6%{opacity:1}78%{opacity:1}100%{top:calc(100% - 120px);opacity:0}}
.ak-foot{padding-top:48px;border-top:1px solid var(--ak-line)}
.ak-foot h1{margin:0;max-width:900px;font-weight:300;font-size:clamp(40px,4.8vw,72px);line-height:1.02;letter-spacing:-0.035em;color:#fff}

/* 2. Текст, который загорается по мере прокрутки (по предложению) */
.ak-read{max-width:1180px;margin:0 auto;padding:180px 40px 160px}
.ak-read p{margin:0;font-weight:400;font-size:clamp(32px,4.4vw,64px);line-height:1.16;letter-spacing:-0.035em;color:#fff}
.ak-read .ak-hl{color:var(--est-lime)}

/* 3. Три главы: номер и название стоят, текст проезжает рядом */
.ak-chapters{max-width:1280px;margin:0 auto;padding:0 56px 80px}
.ak-ch{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;min-height:72vh;padding:72px 0;border-top:1px solid var(--ak-line)}
.ak-ch-head{position:sticky;top:18vh;align-self:start}
.ak-ch-n{display:block;font-weight:300;font-size:clamp(96px,11vw,168px);line-height:.85;letter-spacing:-0.06em;color:transparent;-webkit-text-stroke:1px rgba(185,180,255,.55)}
.ak-ch h2{margin:18px 0 0;font-weight:300;font-size:clamp(44px,5vw,76px);line-height:1;letter-spacing:-0.045em;color:#fff}
.ak-ch-t{padding-top:12vh}
.ak-ch-t p{margin:0 0 22px;max-width:560px;font-size:19px;line-height:1.65;color:var(--ak-dim)}
.ak-ch-t .ak-ch-lead{margin-bottom:28px;font-size:clamp(26px,2.4vw,34px);line-height:1.3;letter-spacing:-0.02em;color:#fff}


/* 4б. Консультации: большая фраза и разговор, даже если вы не наш клиент */
.ak-help{width:min(1280px,calc(100% - 112px));margin:0 auto 140px;padding:96px 80px 88px;border-radius:6px;background:linear-gradient(135deg,var(--ak-bg-2),#1b1d55);box-shadow:inset 0 0 0 1px var(--ak-line)}
.ak-help h2{margin:0;max-width:11ch;font-weight:300;font-size:clamp(52px,7.2vw,116px);line-height:.95;letter-spacing:-0.05em;color:#fff}
.ak-help-t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;margin-top:64px;padding-top:40px;border-top:1px solid var(--ak-line)}
.ak-help-lead{margin:0;font-size:clamp(24px,2.2vw,32px);line-height:1.3;letter-spacing:-0.02em;color:#fff}
.ak-help-t div p{margin:0 0 28px;font-size:19px;line-height:1.65;color:var(--ak-dim)}

/* Движение по прокрутке: только где браузер умеет и человек не просил покоя */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .ak-years{animation:ak-away linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
    .ak-read span{color:var(--ak-faint);animation:ak-lit linear both;animation-timeline:view();animation-range:entry 70% cover 48%}
    .ak-read .ak-hl{animation-name:ak-lit-hl}
    .ak-ch-t p,.ak-help{animation:ak-up linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .ak-ch-n{animation:ak-num linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
  }
}
@keyframes ak-away{to{opacity:.15;transform:scale(.92) translateY(-40px)}}
@keyframes ak-lit{to{color:#fff}}
@keyframes ak-lit-hl{to{color:var(--est-lime)}}
@keyframes ak-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes ak-num{from{-webkit-text-stroke-color:rgba(185,180,255,.12)}to{-webkit-text-stroke-color:rgba(185,180,255,.7)}}
@media (prefers-reduced-motion:reduce){.ak-path,.ak-roll>span,.ak-y2{animation:none}.ak-path i,.ak-path::after{display:none}}

@media (max-width:991.98px){
  .ak-ch{grid-template-columns:minmax(0,1fr);gap:24px;min-height:0;padding:56px 0}
  .ak-ch-head{position:static}
  .ak-ch-t{padding-top:0}
  .ak-help{width:calc(100% - 48px);margin-bottom:96px;padding:56px 32px}
  .ak-help-t{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px;padding-top:28px}
}
@media (max-width:767.98px){
  .ak-scene{min-height:0;padding:40px 20px 32px;gap:40px}
  .ak-years{flex-direction:column;align-items:flex-start;gap:36px;font-size:96px}
  .ak-path{position:absolute;flex:none;margin:0;left:auto;right:28px;top:6%;bottom:6%;width:1px;height:auto;background:linear-gradient(180deg,rgba(185,180,255,.08),rgba(185,180,255,.55));transform-origin:top;animation-name:ak-draw-v}
  .ak-path i{top:-120px;left:-1px;width:3px;height:120px;background:linear-gradient(180deg,rgba(88,221,186,0),rgba(88,221,186,.55) 55%,#c9fff1);animation-name:ak-comet-v}
  .ak-path i::after{right:-2.5px;top:auto;bottom:-4px}
  .ak-path::after{right:-6.5px;top:auto;bottom:-7px}
  .ak-foot{padding-top:28px}
  .ak-foot h1{font-size:38px}
  .ak-read{padding:96px 20px 88px}
  .ak-read p{font-size:31px}
  .ak-chapters{padding:0 20px 48px}
  .ak-ch-n{font-size:84px}
  .ak-ch h2{margin-top:12px;font-size:44px}
  .ak-ch-t p{font-size:17px}
  .ak-ch-t .ak-ch-lead{font-size:24px}
  .ak-help{width:calc(100% - 24px);margin-bottom:80px;padding:40px 20px}
  .ak-help h2{font-size:46px}
  .ak-help-t div p{font-size:17px}
  .ak-help-lead{font-size:22px}
  .ak-help-t .est-btn{width:100%}
}