/* Анимации блоков. Скрытые состояния действуют только при .fx-on (его ставит fx.js), без JS всё видно. */
:root{interpolate-size:allow-keywords;--e:cubic-bezier(.2,.7,.2,1);--gold-anim:linear-gradient(100deg,#b98c4b 0%,#f6e3b8 25%,#d6ad6c 50%,#f6e3b8 75%,#b98c4b 100%)}
.fx-pre main,.fx-pre .ftr{visibility:hidden}
.fx-on .rv{animation:none!important}

/* ---------- появление ---------- */
.fx-on .fx{transition-property:transform,opacity,clip-path,filter,letter-spacing,rotate,box-shadow,border-color,background-color,color;transition-duration:1.1s;transition-timing-function:var(--e);transition-delay:var(--fd,0ms)}
.fx-on .fx.done{transition-duration:.45s;transition-delay:0s}
.fx-on .fx-rise:not(.in){opacity:0;transform:translateY(46px)}
.fx-on .fx-left:not(.in){opacity:0;transform:translateX(-60px)}
.fx-on .fx-right:not(.in){opacity:0;transform:translateX(60px)}
.fx-on .fx-slide:not(.in){opacity:0;transform:translateX(-18px)}
.fx-on .fx-blur:not(.in){opacity:0;filter:blur(14px);transform:translateY(16px)}
.fx-on .fx-pop:not(.in){opacity:0;transform:scale(.7)}
.fx-on .fx-zoom:not(.in){opacity:0;transform:scale(.94)}
.fx-on .fx-wide:not(.in){opacity:0;transform:scaleX(.5)}
.fx-on .fx-tilt:not(.in){opacity:0;transform:perspective(1000px) rotateX(24deg) translateY(70px)}
.fx-on .fx-flip:not(.in){opacity:0;transform:perspective(800px) rotateY(-75deg)}
.fx-on .fx-flip3:not(.in){opacity:0;transform:perspective(900px) rotateY(55deg) translateZ(-80px)}
.fx-on .fx-step:not(.in){opacity:0;transform:translateX(-34px)}
.fx-on .fx-ls:not(.in){opacity:0;letter-spacing:.7em}
.fx-on .fx-clip{clip-path:inset(0 0 0 0 round 14px)}
.fx-on .fx-clip:not(.in){clip-path:inset(100% 0 0 0 round 14px)}
.fx-on .fx-wipe{clip-path:inset(0 0 0 0)}
.fx-on .fx-wipe:not(.in){clip-path:inset(0 100% 0 0)}
.fx-on .fx-unveil{clip-path:inset(0 0 0 0)}
.fx-on .fx-unveil:not(.in){clip-path:inset(0 0 0 100%)}
.fx-unveil img{transition:transform 2s var(--e) var(--fd,0ms)}
.fx-on .fx-unveil:not(.in) img{transform:scale(1.25)}
.fx-on .fx-arch{transition-duration:1.8s;clip-path:circle(150% at 50% 100%)}
.fx-on .fx-arch:not(.in){clip-path:circle(0% at 50% 100%)}
.fx-on .fx.done:is(.fx-clip,.fx-wipe,.fx-unveil,.fx-arch){clip-path:none}
.fx-on .fx-check:not(.in){opacity:0;transform:translateX(-14px)}
.fx-check::before{transition:transform .7s cubic-bezier(.2,1.6,.4,1) calc(var(--fd,0ms) + .25s)}
.fx-on .fx-check:not(.in)::before{transform:scale(0) rotate(-120deg)}
.portrait::before{transition:transform 1.8s var(--e) .5s,opacity 1.4s .5s}
.fx-on .fx-outline:not(.in)::before{opacity:0;transform:scale(.8) translate(30px,-30px)}
.ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-400),transparent);transform:scaleX(0);transition:transform 2.2s var(--e)}
.ftr{position:relative}
.ftr.in::before,html:not(.fx-on) .ftr::before{transform:none}

/* слова, буквы и цитаты */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .14em;margin:0 -.03em -.14em}
.w>i{display:inline-block;font-style:inherit;transition:transform 1.05s var(--e),opacity 1s var(--e),filter 1s var(--e);transition-delay:calc(var(--fd,0ms) + var(--wi,0) * 55ms)}
.fx-on .fx-split:not(.in) .w>i{transform:translateY(112%) rotate(5deg)}
.fx-chars .w>i{transition-duration:1.3s;transition-delay:calc(var(--fd,0ms) + var(--wi,0) * 45ms)}
.fx-on .fx-chars:not(.in) .w>i{transform:translateY(105%) scale(.7);opacity:0}
.fx-splitb .w{overflow:visible}
.fx-splitb .w>i{transition-delay:calc(var(--fd,0ms) + var(--wi,0) * 35ms)}
.fx-on .fx-splitb:not(.in) .w>i{opacity:0;filter:blur(8px);transform:translateY(.35em)}
.gold .w>i{background:var(--gold-anim);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 9s ease-in-out infinite alternate}

/* иконки прорисовываются линией */
.fx-ic :is(path,circle,rect){stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--e) calc(var(--fd,0ms) + .3s)}
.fx-on .fx-ic:not(.in) :is(path,circle,rect){stroke-dashoffset:1}

/* ---------- живые эффекты ---------- */
.gold{background:var(--gold-anim);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:shim 9s ease-in-out infinite alternate}
@keyframes shim{from{background-position:0% 50%}to{background-position:100% 50%}}
.hero .bg,.ab-hero .bg{animation:kb 26s ease-in-out infinite alternate;transform-origin:65% 40%}
@keyframes kb{to{transform:scale(1.08) translate(-1%,1%)}}
.routes,.svp-band,.cat-hero,.svp-hero{animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{from{background-position:42% 50%}to{background-position:58% 50%}}
.stats .map{animation:drift2 30s ease-in-out infinite alternate}
@keyframes drift2{to{transform:translateX(-40px)}}
.acard .ic svg{animation:float 4.5s ease-in-out infinite;animation-delay:var(--fd,0ms)}
@keyframes float{50%{transform:translateY(-6px)}}
.btn-gold{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-130%);animation:shine 7s 3.5s infinite}
@keyframes shine{0%,78%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.offer{background-size:220% 100%;animation:shim 10s ease-in-out infinite alternate}
.cinfo i,.svp-note b,.who button:first-child i{position:relative}
.cinfo i::after,.svp-note b::after,.who button:first-child i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--gold-400);animation:ring 3.2s ease-out infinite;animation-delay:calc(var(--fd,0ms) + 1s);pointer-events:none}
@keyframes ring{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.7);opacity:0}}
.frames .fr{animation:sway 7s ease-in-out infinite;transform-origin:50% 0}
.frames figure:nth-child(2) .fr{animation-delay:-2.3s}
.frames figure:nth-child(3) .fr{animation-delay:-4.6s}
@keyframes sway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
.relc>a>svg,.link-arrow svg,.acard .more svg{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(5px)}}
.cat-search{animation:glow 4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 6px rgba(217,179,119,.2),0 20px 40px -20px rgba(0,0,0,.6)}}
.svc .code{animation:codeGlow 5s ease-in-out infinite}
@keyframes codeGlow{50%{box-shadow:0 0 0 1px rgba(236,211,161,.6),0 0 18px rgba(217,179,119,.45)}}

/* по очереди подсвечиваются шаги */
.steps .step::before{display:inline-block;transition:color .5s,text-shadow .5s,transform .5s}
.steps .step h4{transition:color .5s}
.steps .step.hot::before{color:#f6e3b8;text-shadow:0 0 22px rgba(217,179,119,.85);transform:scale(1.14)}
.steps .step.hot h4{color:var(--gold-300)}
.gcard ol li::before{transition:background .5s,color .5s,box-shadow .5s}
.gcard ol li.hot::before{background:var(--gold-grad);color:var(--em-950);box-shadow:0 0 0 6px rgba(217,179,119,.2)}
.principles>div i{transition:transform .6s var(--e),color .5s}
.principles>div h3{transition:color .5s}
.principles>div.hot i{transform:translateY(-5px) scale(1.14);color:var(--gold-500)}
.principles>div.hot h3{color:var(--gold-600)}

/* 3D-наклон: перспектива у сеток */
.aud-cards,.svc-grid,.cat-groups,.ab-clients,.whom,.posts,.frames{perspective:1200px}
:is(.acard,.svc,.cgroup,.ab-clients a,.wcard,.post,.frames figure){transition:rotate .5s var(--e)}

/* параллакс фото при прокрутке */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .portrait .frame img,.svp-expert .ph img{animation-name:plx;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes plx{from{transform:translateY(-5%) scale(1.1)}to{transform:translateY(5%) scale(1.1)}}

/* плавное раскрытие вопросов */
details::details-content{transition:height .45s var(--e),content-visibility .45s allow-discrete;height:0;overflow:clip}
details[open]::details-content{height:auto}

@media (prefers-reduced-motion:reduce){
  .gold,.gold .w>i,.hero .bg,.ab-hero .bg,.routes,.svp-band,.cat-hero,.svp-hero,.stats .map,.acard .ic svg,.btn-gold::after,.offer,.frames .fr,.cat-search,.svc .code,.relc>a>svg,.link-arrow svg,.acard .more svg,.cinfo i::after,.svp-note b::after,.who button:first-child i::after{animation:none!important}
}

/* ---------- 1. золотой свет за курсором на тёмных блоках ---------- */
.glow-host{position:relative}
.glow{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(236,211,161,.13),rgba(217,179,119,.05) 40%,transparent 70%);mix-blend-mode:screen}
.glow-host:hover>.glow{opacity:1}

/* ---------- 2. шкала прочтения ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:95;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#a47c40,#f1dcae,#d6ad6c);transform:scaleX(var(--p,0));transform-origin:left;box-shadow:0 0 10px rgba(217,179,119,.7)}
.splash-on .progress{display:none}

/* ---------- 3. плавные переходы между страницами ---------- */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
.topline{view-transition-name:topline}
.hero .bg img,.ab-hero .bg img{view-transition-name:altynai}
::view-transition-old(root){animation:vtOut .45s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vtIn .6s cubic-bezier(.2,.7,.2,1) both}
::view-transition-group(altynai){animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@keyframes vtOut{to{opacity:0;transform:translateY(-24px);filter:blur(4px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(34px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- 4. этапы работы как путь ---------- */
.steps{position:relative;border-left:0}
.steps::before,.steps::after{content:"";position:absolute;left:6px;top:28px;bottom:28px;width:1px}
.steps::before{background:var(--line-d)}
.steps::after{background:linear-gradient(180deg,#f6e3b8,#c49a5a);transform:scaleY(var(--p,0));transform-origin:top;box-shadow:0 0 10px rgba(217,179,119,.6)}
.steps .step{position:relative;padding-left:34px}
.steps .step>div::before{content:"";position:absolute;left:1px;top:34px;width:11px;height:11px;border-radius:50%;background:var(--em-950);border:1px solid var(--line-d);transition:background .5s,border-color .5s,box-shadow .5s;z-index:1}
.steps .step.past>div::before{background:var(--gold-400);border-color:var(--gold-300);box-shadow:0 0 0 5px rgba(217,179,119,.18)}

/* ---------- 5. живая мини-карта в блоке цифр ---------- */
.stats .map.live{display:flex;align-items:center;justify-content:center;width:40%;right:-8%;opacity:.5;background:none}
.stats .map.live .kzmap{width:100%;height:auto;max-height:none}
.stats .map.live .kzmap text,.stats .map.live .wpt{display:none}
.stats .map.live .city.big text{display:block;font-size:22px}
@media (max-width:760px){.stats .map.live{width:120%;right:-40%;opacity:.35}}

/* ---------- 6. нижняя панель на телефоне ---------- */
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(7,26,21,.92);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-top:1px solid var(--line-d)}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:56px;border-radius:14px;font:600 12px/1 var(--sans);color:var(--sand-100);border:1px solid var(--line-d);transition:transform .2s}
  .mbar a:active{transform:scale(.95)}
  .mbar svg{width:22px;height:22px}
  .mbar .mb-wa{background:linear-gradient(135deg,#1f9e5a,#12713f);border-color:transparent;color:#fff;animation:knock 10s 4s infinite}
  .mbar .mb-call svg{color:var(--gold-400)}
  .mbar .mb-lead{background:var(--gold-grad);color:var(--em-950);border-color:transparent}
  .mbar .mb-lead svg{color:var(--em-950)}
}
@keyframes knock{0%,86%,100%{transform:none}88%{transform:rotate(-7deg) scale(1.05)}90%{transform:rotate(6deg) scale(1.05)}92%{transform:rotate(-4deg)}94%{transform:rotate(3deg)}96%{transform:none}}
.mbar .mb-wa::after{content:"";position:absolute}
.subscribe>i{animation:ring2 3.4s ease-out infinite}
@keyframes ring2{0%{box-shadow:0 0 0 0 rgba(217,179,119,.5)}70%,100%{box-shadow:0 0 0 14px rgba(217,179,119,0)}}
.mat-main .cov img{animation:kb 22s ease-in-out infinite alternate}
.art-cover img{animation:kb 30s ease-in-out infinite alternate}
.pcard,.mat-main{transition:box-shadow .35s,rotate .5s var(--e)}
.wd{display:inline-block;white-space:nowrap}