/* «Обо мне»: the scroll-driven path in development and small entrance animations. Loaded only on about.html.
   Without the script the timeline is a plain list; reduced motion keeps the scroll states but drops the movement. */
.page-about{--ab-green:#71806a;--ab-green-2:#5e6e57;--ab-soft:#e9ece2;--ab-ease:cubic-bezier(.23,1,.32,1)}

/* ───────── Path in development ───────── */
.path{position:relative}
.path-aside{display:none}
.path-list{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:44px;--fill:0px}
.path-list::before,.path-list::after{content:'';position:absolute;left:6px;top:10px;width:2px;border-radius:1px}
.path-list::before{bottom:10px;background:var(--line)}
.path-list::after{height:var(--fill);max-height:calc(100% - 20px);background:var(--ab-green)}
.path-item{position:relative}
.path-dot{position:absolute;left:-34px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ab-green);z-index:1}
.path-y{display:block;margin-bottom:10px;font-size:30px;letter-spacing:-.04em;line-height:1.1;color:var(--ink)}
.path-item h3{font-size:24px;line-height:1.3;margin-bottom:10px}
.path-item p{font-size:17px;line-height:1.7;color:var(--muted);max-width:560px}

/* With the script: a sticky panel beside the list, steps light up as they cross the middle of the screen. */
.js .path{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.js .path-aside{display:block;position:sticky;top:130px}
.path-now{display:grid;gap:14px;padding:34px;border-radius:8px;background:var(--ab-soft)}
.path-icons{position:relative;display:block;width:54px;height:54px}
.path-icon{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--ab-green-2);opacity:0;transform:scale(.7) rotate(-20deg);transition:opacity .35s ease,transform .5s var(--ab-ease)}
.path-icon.is-on{opacity:1;transform:none}
.path-icon .icon{width:26px;height:26px}
.path-year{overflow:hidden;font-size:clamp(64px,7vw,104px);line-height:1;letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.path-year span{display:inline-block}
.path-year span.is-up{animation:ab-year-up .5s var(--ab-ease)}
.path-year span.is-down{animation:ab-year-down .5s var(--ab-ease)}
.path-year span.is-range{font-size:.62em;letter-spacing:-.04em}
.path-title{font-size:22px;line-height:1.3;color:var(--ink)}
.path-progress{height:3px;border-radius:2px;background:#d3d8ca;overflow:hidden}
.path-progress i{display:block;height:100%;width:100%;background:var(--ab-green);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s var(--ab-ease)}
.path-step{font-size:14px;color:var(--muted)}
.js .path-item{opacity:.35;transition:opacity .4s ease}
.js .path-item.is-past{opacity:.7}
.js .path-item.is-active{opacity:1}
.js .path-dot{transition:background-color .3s ease,transform .45s var(--ab-ease),box-shadow .3s ease}
.js .path-item.is-past .path-dot,.js .path-item.is-active .path-dot{background:var(--ab-green)}
.js .path-item.is-active .path-dot{transform:scale(1.35);box-shadow:inset 0 0 0 2px var(--ab-green),0 0 0 6px rgba(113,128,106,.18)}

/* ───────── Entrances ───────── */
@keyframes ab-year-up{from{transform:translateY(55%);opacity:0}to{transform:none;opacity:1}}
@keyframes ab-year-down{from{transform:translateY(-55%);opacity:0}to{transform:none;opacity:1}}
@keyframes ab-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ab-line{from{transform:scaleX(0)}to{transform:none}}
@keyframes ab-photo{from{clip-path:inset(100% 0 0 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes ab-caret{50%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
 .js .about-intro h1,.js .about-intro .large-copy,.js .about-intro>div>p:last-child{animation:ab-rise .9s var(--ab-ease) both}
 .js .about-intro .large-copy{animation-delay:.12s}
 .js .about-intro>div>p:last-child{animation-delay:.22s}
 .js .about-portrait img{animation:ab-photo 1.2s var(--ab-ease) both .1s}
 .js .about-portrait figcaption{animation:ab-rise .8s var(--ab-ease) both .7s}
 /* Grids: children rise one after another; the top rules of «Как работаю» draw from left to right. */
 .ab-ready [data-about-stagger]>*{opacity:0;transform:translateY(26px)}
 .ab-ready [data-about-stagger].ab-in>*{animation:ab-rise .75s var(--ab-ease) both;animation-delay:calc(var(--n,0) * 110ms)}
 .ab-ready .approach-grid article{position:relative;border-top-color:transparent}
 .ab-ready .approach-grid article::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:#bcc8b1;transform-origin:left;transform:scaleX(0)}
 .ab-ready .approach-grid.ab-in article::before{animation:ab-line .9s var(--ab-ease) both;animation-delay:calc(var(--n,0) * 110ms + .1s)}
 .ab-ready .ai-principle>.icon{transition:transform 1.4s var(--ab-ease)}
 .ab-ready .ai-principle.ab-in>.icon{transform:rotate(180deg)}
 .practice-symbol::after{content:'';display:inline-block;width:.06em;height:.8em;margin-left:.12em;vertical-align:-.05em;background:currentColor;animation:ab-caret 1.1s steps(1) infinite}
}
@media (prefers-reduced-motion:reduce){
 .path-icon,.path-progress i,.js .path-item,.js .path-dot{transition:none}
}

/* ───────── Responsive ───────── */
@media (max-width:899px){
 .js .path{grid-template-columns:1fr;gap:0}
 /* On phones the panel becomes a slim bar that sticks under the header while the list scrolls. */
 .js .path-aside{top:70px;z-index:5;margin:0 -24px 26px;padding:10px 24px;background:rgba(246,245,240,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
 .path-now{grid-template-columns:40px auto minmax(0,1fr);grid-template-areas:'icon year title' 'bar bar bar';align-items:center;gap:6px 12px;padding:0;background:none}
 .path-icons{grid-area:icon;width:40px;height:40px}
 .path-icon{background:var(--ab-soft)}
 .path-icon .icon{width:20px;height:20px}
 .path-year{grid-area:year;font-size:30px}
 .path-title{grid-area:title;font-size:15px}
 .path-progress{grid-area:bar}
 .path-step{display:none}
}
@media (max-width:650px){
 .js .path-aside{margin:0 -20px 24px;padding:10px 20px}
 .path-list{gap:34px}
 .path-y{font-size:25px}
 .path-item h3{font-size:21px}
 .path-item p{font-size:16px}
 .path-year{font-size:26px}
}
@media (max-width:374px){
 .js .path-aside{margin:0 -16px 22px;padding:10px 16px}
}