/* website.amira: scroll animations.
   Everything moves with transform and opacity only, on one ease-out curve. */
:root{--ease-anim:cubic-bezier(.22,1,.36,1)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 1. Headings rise word by word */
.wds .wd{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.wds .wd>i{display:inline-block;font-style:normal;opacity:0;transform:translateY(105%);
  transition:transform 1s var(--ease-anim),opacity .7s var(--ease-anim);transition-delay:calc(var(--w,0)*75ms)}
.split-in .wds .wd>i{opacity:1;transform:none}

/* 2. "приводят клиентов": a golden glint runs across the words */
.hl em{background:linear-gradient(100deg,#e6bc5c 0%,#e6bc5c 38%,#fff1cf 50%,#e6bc5c 62%,#e6bc5c 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#e6bc5c;
  text-shadow:none;filter:drop-shadow(0 0 22px rgba(230,188,92,.32)) drop-shadow(0 2px 2px rgba(15,3,6,.9));
  animation:glint 5.5s var(--ease-anim) infinite;animation-delay:-1.5s}
@keyframes glint{0%{background-position:100% 0}55%,100%{background-position:0 0}}

/* 3. Counters: digits stay steady while they count */
.facts dd{font-variant-numeric:tabular-nums}

/* 4. Founder photo: a curtain lifts, then the photo drifts with the scroll */
.portrait img{transform:translate3d(0,var(--par,0px),0) scale(1.14);will-change:transform}
.portrait::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--panel) 0%,#5a1a2e 100%);box-shadow:inset 0 -2px 0 var(--accent);
  transform-origin:50% 0;transform:scaleY(1);transition:transform 1.3s var(--ease-anim) .15s}
.portrait.in::after{transform:scaleY(0)}

/* 5. Cards, steps and plans arrive one after another */
.js .step.rev,.js .tier.rev{transition-delay:calc(var(--i,0)*130ms)}
.js .step.rev.done,.js .tier.rev.done,.js .tier.rev.in.tilting{transition-delay:0s}

/* 6. "How I work": dots on the line light up gold as the line reaches them */
.step{position:relative}
.step::before{content:"";position:absolute;left:0;top:-44px;width:11px;height:11px;margin-top:0;border-radius:50%;
  border:1px solid rgba(230,188,92,.5);background:var(--canvas);box-sizing:border-box}
.step::after{content:"";position:absolute;left:0;top:-44px;width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 18px 3px rgba(230,188,92,.55);transform:scale(0);opacity:0;transition:transform .6s var(--ease-anim),opacity .6s var(--ease-anim)}
.step.lit::after{transform:scale(1);opacity:1}
.step .n{display:inline-block;opacity:.4;transition:opacity .6s var(--ease-anim)}
.step.lit .n{opacity:1;text-shadow:0 0 18px rgba(230,188,92,.55)}
.steps svg.track{top:0}

/* 7. Experience: a vertical gold timeline draws downward, skills arrive one by one */
.timeline{position:relative;padding-left:30px!important}
.timeline::before,.timeline::after{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px}
.timeline::before{background:var(--line)}
.timeline::after{background:linear-gradient(180deg,var(--accent),rgba(230,188,92,.35));transform-origin:50% 0;transform:scaleY(var(--tl,0))}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-30px;top:28px;width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 16px 2px rgba(230,188,92,.5);transform:scale(var(--dot,0))}
.skills li{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .6s var(--ease-anim),transform .7s var(--ease-anim);transition-delay:calc(var(--i,0)*110ms)}
.skills.in li{opacity:1;transform:none}
.skills.done li{transition-delay:0s}

/* 8. Services marquee: outlined gold Unbounded, speed follows the scroll */
.marquee{position:relative;overflow:hidden;padding-block:clamp(26px,4vw,48px);border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq-set{display:flex;align-items:center;flex-shrink:0}
.mq-set span{font:600 clamp(38px,6.4vw,92px)/1.1 var(--display);letter-spacing:-.01em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.4px var(--accent);padding:0 .35em}
.mq-set b{font:600 clamp(30px,4vw,56px)/1 var(--display);color:var(--accent);opacity:.9}
html[lang="tg"] .mq-set span{font-weight:700}

@media (prefers-reduced-motion: reduce){
  .wds .wd>i,.skills li{opacity:1!important;transform:none!important}
  .portrait::after{transform:scaleY(0)!important}
  .portrait img{transform:scale(1.04)!important}
  .hl em{animation:none!important;background-position:50% 0}
  .step::after{transform:scale(1)!important;opacity:1!important}
  .step .n{opacity:1}
  .timeline::after{transform:scaleY(1)!important}
  .timeline li::before{transform:scale(1)!important}
}
@media (max-width:1000px){.step::before,.step::after{display:none}}
/* skills are pills, not timeline rows */
.exp .skills li{display:inline-block;padding:7px 12px;border-bottom:1px solid var(--line)}
.exp .timeline{align-self:start}