/* «О нас»: движение и философия. Слой поверх about-page.css — без него страница остаётся читаемой. */

/* overflow:hidden делает .about-page контейнером прокрутки и ломает position:sticky. clip режет так же, но без этого. */
.about-page{overflow:visible;overflow-x:clip}

/* Заголовок первого экрана проявляется по словам */
.motion-ready .about-hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(10px);transition:opacity .9s cubic-bezier(.2,.7,0,1),transform .9s cubic-bezier(.2,.7,0,1),filter .9s;transition-delay:calc(var(--i)*90ms + 120ms)}
.motion-ready .about-hero.is-in h1 .w{opacity:1;transform:none;filter:none}
.motion-ready .about-hero-copy>p,.motion-ready .about-hero-actions{opacity:0;transform:translateY(18px);transition:opacity .8s .7s,transform .8s .7s cubic-bezier(.2,.7,0,1)}
.motion-ready .about-hero.is-in .about-hero-copy>p,.motion-ready .about-hero.is-in .about-hero-actions{opacity:1;transform:none}
.about-hero-art>*{translate:calc(var(--mx,0)*var(--depth,10px)) calc(var(--my,0)*var(--depth,10px));transition:translate .5s cubic-bezier(.2,.7,0,1)}
.about-poster{--depth:-18px}.about-hero-cat{--depth:14px}.about-hero-ticket{--depth:30px}.about-orbit{--depth:-6px}

/* Бегущая лента */
.about-band.is-marquee{display:block;overflow:hidden;padding-inline:0;white-space:nowrap}
.about-band-track{display:inline-flex;gap:0;animation:about-marquee 32s linear infinite;will-change:transform}
.about-band-track span{padding-inline:2.4vw}.about-band.is-marquee span:after{padding-left:4.8vw}
@keyframes about-marquee{to{transform:translateX(-50%)}}

/* Обычные блоки: мягкий подъём с размытием, у карточек — небольшой разброс наклона */
.about-page .reveal{opacity:0;transform:translateY(40px);filter:blur(3px);transition:opacity 1s cubic-bezier(.2,.7,0,1),transform 1s cubic-bezier(.2,.7,0,1),filter 1s}
.about-page .reveal.is-visible{opacity:1;transform:none;filter:none}
.about-page .reveal :is(.about-friction-list article,.about-audience-track article,.about-value-composition article,.about-roadmap-grid article){opacity:0;transform:translateY(30px) rotate(var(--tilt,0deg));transition:opacity .8s,transform .9s cubic-bezier(.2,.7,0,1);transition-delay:calc(var(--n,0)*90ms + 150ms)}
.about-page .reveal.is-visible :is(.about-friction-list article,.about-audience-track article,.about-value-composition article,.about-roadmap-grid article){opacity:1;transform:rotate(calc(var(--tilt,0deg)*.35))}
.about-page :is(.about-audience-track article,.about-value-composition article,.about-roadmap-grid article):hover{transform:rotate(0) translateY(-4px)!important}

/* «Жизнь — не таблица»: сетка разлетается при прокрутке */
.about-chaos{position:relative;display:block;height:280vh}
.about-chaos-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.about-chaos-grid{position:absolute;display:grid;grid-template-columns:repeat(4,minmax(0,190px));gap:0}
.about-chaos-grid span{display:flex;align-items:center;min-height:74px;padding:0 18px;border:1px solid var(--line);background:var(--bg);font-size:15px;font-weight:700;color:#d6d7d8;white-space:nowrap;opacity:calc(1 - var(--t,0)*.6);
  transform:translate(calc(var(--dx)*var(--e,0)),calc(var(--dy)*var(--e,0))) rotate(calc(var(--r)*var(--e,0))) scale(calc(1 + var(--s)*var(--e,0)));will-change:transform}
.about-chaos-grid span:nth-child(3n){color:var(--muted)}
.about-chaos-grid span.is-hot{background:var(--purple);color:var(--bg);border-color:var(--purple)}
.about-chaos-copy{position:relative;z-index:2;text-align:center;max-width:820px;padding:0 20px;opacity:var(--t,0);transform:scale(calc(.86 + var(--t,0)*.14));pointer-events:none}
.about-chaos-copy h2{font-size:clamp(56px,9vw,150px)!important;letter-spacing:-.06em!important;line-height:.9!important;margin:0 0 26px}
.about-chaos-copy h2 em{font-style:normal;color:var(--purple);display:inline-block;transform:rotate(-4deg)}
.about-chaos-copy p{font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:#d6d7d8;max-width:640px;margin:0 auto}
.about-chaos-hint{position:absolute;bottom:34px;left:50%;translate:-50% 0;font-size:13px;letter-spacing:2px;color:var(--muted);opacity:calc(1 - var(--p,0)*4)}

/* Фраза-утверждение: слова загораются по мере прокрутки */
.about-purpose-statement[data-words] h2 .w{opacity:calc(.16 + .84*var(--on,0));transition:opacity .15s linear}

/* Манифест: принципы по одному выходят на сцену */
.about-manifesto{position:relative;display:block;height:calc(var(--count,6)*75vh + 60vh)}
.about-manifesto-stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6vw;align-items:center;overflow:hidden}
.about-manifesto-head .section-label{margin-bottom:18px}.about-manifesto-head h2{margin:0 0 22px}
.about-manifesto-head p{font-size:18px;color:#bdc0c5;max-width:460px}
.about-manifesto-dots{display:flex;gap:8px;margin-top:34px}.about-manifesto-dots i{width:34px;height:4px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}.about-manifesto-dots i:after{content:'';position:absolute;inset:0;background:var(--purple);transform:scaleX(var(--f,0));transform-origin:left}
.about-manifesto-list{position:relative;height:min(70vh,560px)}
.about-manifesto-list article{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(60px) rotate(var(--tilt,0deg)) scale(.96);filter:blur(8px);transition:opacity .7s cubic-bezier(.2,.7,0,1),transform .8s cubic-bezier(.2,.7,0,1),filter .7s;pointer-events:none}
.about-manifesto-list article.is-past{opacity:0;transform:translateY(-60px) rotate(calc(var(--tilt,0deg)*-1)) scale(.96)}
.about-manifesto-list article.is-active{opacity:1;transform:none;filter:none;pointer-events:auto}
.about-manifesto-list .num{font-size:14px;font-weight:800;letter-spacing:2px;color:var(--purple);margin-bottom:12px}
.about-manifesto-list h3{font-size:clamp(64px,8.4vw,136px)!important;line-height:.88!important;letter-spacing:-.06em!important;margin:0 0 28px}
.about-manifesto-list article:nth-child(even) h3{color:var(--purple)}
.about-manifesto-list p{font-size:clamp(18px,1.7vw,23px);line-height:1.55;color:#e4e5e7;max-width:560px;margin:0}

/* Без JS и при выключенной анимации — обычный поток без липких сцен */
.about-page:not(.motion-on) .about-chaos,.about-page:not(.motion-on) .about-manifesto{height:auto}
.about-page:not(.motion-on) .about-chaos-stage,.about-page:not(.motion-on) .about-manifesto-stage{position:relative;height:auto;padding-block:110px}
.about-page:not(.motion-on) .about-chaos-grid{position:relative;margin-bottom:50px}
.about-page:not(.motion-on) .about-chaos-copy{opacity:1;transform:none}
.about-page:not(.motion-on) .about-chaos-hint{display:none}
.about-page:not(.motion-on) .about-manifesto-list{height:auto;display:grid;gap:48px}
.about-page:not(.motion-on) .about-manifesto-list article{position:relative;opacity:1;transform:none;filter:none}
.about-page:not(.motion-on) .about-manifesto-dots{display:none}

@media(max-width:900px){
  .about-chaos-grid{grid-template-columns:repeat(2,minmax(0,170px))}.about-chaos-grid span{min-height:58px;font-size:14px;padding:0 14px}.about-chaos-grid span:nth-child(n+9){display:none}
  .about-manifesto-stage{grid-template-columns:1fr;align-content:center;gap:24px}.about-manifesto-head h2{font-size:38px!important}.about-manifesto-head p{display:none}.about-manifesto-dots{margin-top:16px}.about-manifesto-list{height:52vh}
  .about-manifesto{height:calc(var(--count,6)*65vh + 50vh)}
}
@media(prefers-reduced-motion:reduce){.about-band-track{animation:none}.about-hero-art>*{translate:none}}

/* Текст всегда помещается: крупные заголовки считаются от ширины экрана, длинные слова переносятся */
.about-page :is(h1,h2,h3){overflow-wrap:break-word;hyphens:auto}
.about-hero{min-width:0}.about-hero-copy{min-width:0}
.about-manifesto-list h3{font-size:clamp(40px,min(8.4vw,11vh),136px)!important}
@media(max-width:900px){
  .about-hero{grid-template-columns:minmax(0,1fr)}
  .about-hero h1{font-size:clamp(44px,15.5vw,86px)!important;letter-spacing:-.055em!important}
  .about-page .about-chaos-copy h2{font-size:clamp(44px,14vw,110px)!important}
  .about-manifesto-list h3{font-size:clamp(36px,11.5vw,84px)!important;margin-bottom:18px}
  .about-manifesto-list p{font-size:17px}
  .about-page h2{font-size:clamp(32px,9.6vw,56px)!important;letter-spacing:-.045em!important}
  .about-page h3{font-size:clamp(20px,6.4vw,32px)}
}
.about-chaos-copy h2{padding-inline:.08em}