/* Движение разделено по слоям: появление, прокрутка и медленный дрейф. */
.page-progress{position:fixed;inset:0 0 auto;height:2px;z-index:80;pointer-events:none;background:var(--lime);transform:scaleX(var(--page-progress,0));transform-origin:left;box-shadow:0 0 12px #c3f74e80}
.motion-section{--scene-progress:.5}
.motion-ready .motion-section:not(.is-inview) .ambient,
.motion-ready .motion-section:not(.is-inview) .ambient::before,
.motion-ready .motion-section:not(.is-inview) .ambient::after,
.motion-suspended .ambient,.motion-suspended .ambient::before,.motion-suspended .ambient::after{animation-play-state:paused!important}

/* Первый экран: изображение дышит, свет и перспектива живут независимо. */
.motion-ready .hero__art{transform:translate3d(var(--hero-x,0px),calc(var(--hero-y,0px) + var(--hero-scroll,0px)),0);transition:transform .25s linear;animation:hero-breathe 15s ease-in-out infinite;transform-origin:69% 48%}
.hero__light{position:absolute;z-index:0;right:-13%;top:11%;width:65%;height:80%;pointer-events:none;opacity:.32;background:radial-gradient(ellipse at center,#c3f74e22,transparent 61%);mix-blend-mode:screen;animation:light-drift 13s ease-in-out infinite}
.motion-ready .hero h1>span{animation:hero-line 1.2s var(--ease) both;transform-origin:left bottom}
.motion-ready .hero h1>span:last-child{animation-delay:.13s}
.motion-ready .hero__description{animation:hero-line 1s .3s var(--ease) both}
.motion-ready .hero__actions{animation:hero-line 1s .45s var(--ease) both}
.hero__rail::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);transform:scaleX(.35);animation:rail-light 9s ease-in-out infinite;pointer-events:none}

/* Карта парит над тонкой орбитой, а скролл меняет угол обзора. */
.cards{overflow:hidden}
.card-stage{isolation:isolate}
.card-stage__scroll{width:100%;transform-style:preserve-3d;transform:translate3d(0,var(--stage-y,0px),0) rotateX(var(--stage-rx,0deg)) rotateY(var(--stage-ry,0deg));transition:transform .18s linear}
.card-stage__float{width:100%;transform-style:preserve-3d;animation:card-float 8s ease-in-out infinite}
.card-stage__halo{position:absolute;width:91%;aspect-ratio:1;left:4.5%;top:calc(50% - 29%);height:58%;pointer-events:none;z-index:-1;transform:perspective(850px) rotateX(66deg) rotateZ(-18deg)}
.card-stage__halo span{position:absolute;inset:0;border:1px solid #81956d5c;border-radius:50%;animation:halo-orbit 24s linear infinite}
.card-stage__halo span:last-child{inset:9%;border-color:#77a91c4d;animation-direction:reverse;animation-duration:18s}
.card-stage__halo span::after{content:'';position:absolute;width:9px;height:9px;left:12%;top:14%;border-radius:50%;background:#82ad26;box-shadow:0 0 0 5px #8db92b16}
.card-stage__halo span:last-child::after{width:5px;height:5px;background:#3b510f}
.card-stage__shadow{position:absolute;left:22%;right:18%;bottom:16%;height:12%;border-radius:50%;background:radial-gradient(ellipse,#21351021,transparent 69%);animation:card-shadow 8s ease-in-out infinite;pointer-events:none;z-index:-1}
.card-stage__word{transform:translate3d(var(--word-x,0px),0,-40px);transition:transform .2s linear;opacity:.72}
.card-stage__glint{position:absolute;inset:11.5% 4%;border-radius:4%;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.card-stage__glint::after{content:'';position:absolute;inset:-25% -65%;background:linear-gradient(112deg,transparent 43%,#ffffff05 45%,#ffffff35 50%,#ffffff05 55%,transparent 57%);transform:translateX(-70%);animation:card-glint 9s ease-in-out infinite}
.card-info .feature-list li{position:relative}
.card-info .feature-list li::after{content:'';height:1px;position:absolute;bottom:-1px;left:0;right:0;background:#79914f;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.card-info .feature-list li.is-visible::after{transform:scaleX(1)}

/* Цветная витрина: тихая волна и блик на каждой поверхности. */
.service-grid{padding:7px 0 9px}
.service-card__surface{overflow:hidden;isolation:isolate;animation:service-float 7s ease-in-out infinite;animation-delay:var(--float-phase,0s)}
.service-card__surface::before{content:'';position:absolute;inset:-80% -100%;pointer-events:none;z-index:-1;background:linear-gradient(118deg,transparent 46%,#ffffff28 50%,transparent 55%);transform:translateX(-55%);animation:service-light 11s ease-in-out infinite;animation-delay:var(--float-phase,0s)}
.service-card__surface::after{background:currentColor;opacity:.25}
.service-card:hover .service-card__surface{border-color:#ffffff80;box-shadow:0 19px 35px #0004;transform:perspective(700px) translateY(-5px) rotateX(3deg)}
.service-card:nth-child(3n+2){--float-phase:-2.3s}
.service-card:nth-child(3n){--float-phase:-4.6s}
.service-card--more{--service-bg:#14272b;--service-ink:#effadb;--service-muted:#b6ced0}
.service-card--more .service-card__surface{padding:8px 8px 10px}
.logo-wall{position:relative;width:100%;height:75px;flex:none;margin:0 0 5px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 78%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 78%,transparent)}
.logo-wall__track{width:100%;animation:logo-wall-rise 27s linear infinite;will-change:transform}
.logo-wall__cycle{display:grid;gap:4px;padding-bottom:4px}
.logo-wall__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:6px;height:16px}
.logo-wall__row img{width:15px;height:15px;object-fit:contain;justify-self:center;opacity:.95}
.service-card--more h3{letter-spacing:-.035em}
.service-card--more p{margin-top:5px}
.subscriptions__more .button{position:relative;overflow:hidden}
.subscriptions__more .button::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#ffffff4d 48%,transparent 65%);transform:translateX(-130%);animation:button-glint 10s ease-in-out infinite}

/* Демонстрация приложения разворачивается вместе с прокруткой. */
.demo-scene{perspective:1300px}
.motion-ready .phone{transform:translate3d(0,var(--phone-y,0px),0) rotateY(var(--phone-yaw,0deg)) rotateX(var(--phone-pitch,0deg));transform-origin:center center;transition:transform .35s var(--ease)}
.motion-ready .phone:focus-within{transform:none}
.demo-scene__orbit{translate:0 var(--orbit-y,0px)}
.demo-scene__aura{position:absolute;inset:7% -12% 0;border-radius:50%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse,#83b53b20,transparent 62%);animation:light-drift 12s ease-in-out infinite reverse}
.feature-tabs button{position:relative}
.feature-tabs button::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.feature-tabs button[aria-selected=true]::after{transform:scaleX(1)}
.motion-ready .demo-panel:not([hidden]){animation:panel-in .45s var(--ease) both}
.phone__top .wordmark span{animation:q-light 6s ease-in-out infinite}

/* Три шага читаются последовательно; соединение растёт при скролле. */
.start{position:relative;isolation:isolate;overflow:hidden}
.start__orb{position:absolute;left:-9%;bottom:-280px;width:650px;height:650px;border:1px solid #36550025;border-radius:50%;pointer-events:none;z-index:-1;animation:halo-orbit 40s linear infinite}
.start__orb::before,.start__orb::after{content:'';position:absolute;inset:8%;border:1px solid #36550020;border-radius:50%}
.start__orb::after{inset:19%;border-style:dashed}
.start__orb i{position:absolute;left:20%;top:9%;width:10px;height:10px;border-radius:50%;background:#477000;opacity:.4}
.steps{position:relative;isolation:isolate}
.steps::before,.steps::after{content:'';position:absolute;left:41px;top:35px;bottom:50px;width:1px;z-index:-1;background:#2541002b}
.steps::after{background:#254100b3;transform:scaleY(var(--steps-progress,0));transform-origin:top;transition:transform .15s linear}
.steps__number{position:relative;background:var(--lime);padding-bottom:10px}
.steps li{transition-delay:var(--reveal-delay,0ms)}
.steps li.is-visible .steps__number{animation:step-number .9s var(--ease) both}
.faq__list details{position:relative}
.faq__list details::after{content:'';position:absolute;height:1px;bottom:-1px;left:0;right:0;background:#c3f74e70;transform:scaleX(0);transform-origin:left;transition:transform 1.1s .2s var(--ease)}
.faq__list details.is-visible::after{transform:scaleX(1)}
.footer{position:relative;overflow:hidden}
.footer__inner{position:relative}
.footer__inner::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,#c3f74e,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease)}
.footer.is-inview .footer__inner::before{transform:scaleX(1)}

/* Появления отвечают только за внешний слой. */
.js.motion-ready .reveal{opacity:0;transform:translate3d(0,30px,0);transition:opacity .75s var(--ease),transform 1s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.js.motion-ready .service-card.reveal{transform:perspective(900px) translate3d(0,36px,-25px) rotateX(12deg);transform-origin:center bottom;transition-delay:var(--service-delay,0ms)}
.js.motion-ready .reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}

@keyframes hero-breathe{0%,100%{scale:1.02;rotate:-.3deg}50%{scale:1.065;rotate:.5deg}}
@keyframes light-drift{0%,100%{transform:translate3d(-10px,12px,0) scale(.94);opacity:.35}50%{transform:translate3d(17px,-15px,0) scale(1.08);opacity:.75}}
@keyframes hero-line{from{opacity:0;transform:translate3d(0,40px,0) rotateX(12deg);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}}
@keyframes rail-light{0%,100%{transform:translateX(-30%) scaleX(.2);opacity:.35}50%{transform:translateX(30%) scaleX(.35);opacity:.8}}
@keyframes card-float{0%,100%{transform:translate3d(0,5px,0) rotateX(2deg) rotateY(-4deg) rotateZ(-1deg)}50%{transform:translate3d(0,-13px,12px) rotateX(-3deg) rotateY(5deg) rotateZ(1deg)}}
@keyframes card-shadow{0%,100%{transform:scaleX(.92);opacity:.65}50%{transform:scaleX(1.08);opacity:.4}}
@keyframes halo-orbit{to{transform:rotate(360deg)}}
@keyframes card-glint{0%,25%{transform:translateX(-70%);opacity:0}32%{opacity:.8}58%,100%{transform:translateX(70%);opacity:0}}
@keyframes service-float{0%,100%{translate:0 2px}50%{translate:0 -4px}}
@keyframes service-light{0%,35%{transform:translateX(-55%);opacity:0}45%{opacity:1}65%,100%{transform:translateX(55%);opacity:0}}
@keyframes logo-wall-rise{to{transform:translate3d(0,-50%,0)}}
@keyframes button-glint{0%,70%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}}
@keyframes panel-in{from{opacity:.45;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes q-light{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes step-number{from{opacity:.2;transform:translateY(15px) scale(.9)}to{opacity:1;transform:none}}

@media(hover:hover){.motion-ready .phone:hover{transform:none}}
@media(max-width:1200px){.steps::before,.steps::after{left:32px}}
@media(max-width:900px){.steps::before,.steps::after{left:26px}.start__orb{left:-23%;bottom:-230px;width:530px;height:530px}}
@media(max-width:640px){
    .motion-ready .hero__art{transform:translate3d(0,var(--hero-scroll,0px),0);animation:hero-breathe 15s ease-in-out infinite}
  .hero__light{top:44%;width:95%;height:48%;right:-20%}
  .card-stage__halo{width:93%;height:61%;left:3.5%;top:23%}
  .card-stage__float{animation-name:card-float-mobile}
  .card-stage__tilt{transform:rotate(-7deg) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg))}
  .service-card__surface{animation-name:service-float-mobile}
  .logo-wall__cycle{gap:4px;padding-bottom:4px}
  .logo-wall__row{height:16px;gap:5px}
  .logo-wall__row img{width:15px;height:15px}
  .steps::before,.steps::after{left:29px;bottom:42px}
  .start__orb{left:auto;right:-230px;bottom:-180px;width:500px;height:500px}
}
@keyframes card-float-mobile{0%,100%{transform:translate3d(0,3px,0) rotateY(-2deg) rotateZ(-.6deg)}50%{transform:translate3d(0,-7px,0) rotateY(3deg) rotateZ(.6deg)}}
@keyframes service-float-mobile{0%,100%{translate:0 1px}50%{translate:0 -2px}}

/* Системная настройка уменьшения движения сохраняет весь контент доступным. */
.motion-paused{scroll-behavior:auto}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}
.motion-paused .reveal{opacity:1!important;transform:none!important}
.motion-paused .hero__art,.motion-paused .card-stage__scroll,.motion-paused .card-stage__float,.motion-paused .phone{transform:none!important;scale:1;rotate:0deg;translate:none}
.motion-paused .card-stage__tilt{transform:rotate(-8deg)!important}
.motion-paused .card-stage__glint,.motion-paused .page-progress{display:none}
.motion-paused .hero h1>span,.motion-paused .hero__description,.motion-paused .hero__actions{opacity:1;clip-path:none;transform:none}
.motion-paused .service-card__surface{translate:none}
.motion-paused .demo-scene__orbit{translate:none}
.motion-paused .steps::after{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){
  .page-progress,.card-stage__glint{display:none!important}
  .js.motion-ready .reveal{opacity:1;transform:none}
  .motion-ready .hero__art,.motion-ready .card-stage__scroll,.motion-ready .card-stage__float,.motion-ready .phone{transform:none;scale:1;rotate:0deg;translate:none}
  .hero h1>span,.hero__description,.hero__actions{opacity:1;clip-path:none;transform:none}
  .service-card__surface,.demo-scene__orbit{translate:none}
  .steps::after{transform:scaleY(1)}
}