/* Движение: появление, парение, переливы, лучи, искры, наклон.
   Всё выключается системной настройкой «уменьшить движение». */

/* появление при прокрутке — только когда скрипт на месте (.sjs) */
.sjs .rv{opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d,0) * 90ms)}
.sjs .rv.in{opacity:1;transform:none}
.sjs .main .rv{transform:translateY(14px);transition-duration:.55s;transition-delay:calc(var(--d,0) * 60ms)}
.sjs .main .rv.in{transform:none}

@media (prefers-reduced-motion:no-preference){
  /* первый экран: лучи-ленты медленно вращаются из-за макета */
  .hero{isolation:isolate}
  .hero .w{position:relative;z-index:2}
  .hero-g::before{content:"";position:absolute;z-index:-1;left:52%;top:50%;width:1400px;height:1400px;margin:-700px 0 0 -700px;border-radius:50%;
    background:repeating-conic-gradient(from 0deg,rgba(255,214,140,.075) 0 4deg,transparent 4deg 13deg);
    -webkit-mask:radial-gradient(closest-side,#000 18%,transparent 72%);mask:radial-gradient(closest-side,#000 18%,transparent 72%);
    animation:rays 90s linear infinite;pointer-events:none}
  @keyframes rays{to{transform:rotate(360deg)}}

  /* перелив на выделенных словах */
  .hero h1 em,.hl{background-image:linear-gradient(90deg,#FFD27A,#FF8A5C 30%,#FFE6A8 50%,#FF8A5C 70%,#FFD27A);background-size:220% 100%;animation:sheen 7s linear infinite}
  @keyframes sheen{to{background-position:-220% 0}}

  /* макет «спасибо»: парит, наклоняется за курсором */
  .mock{animation:float 7s ease-in-out infinite;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-1deg);transition:transform .35s ease-out}
  .brand-art,.cab-mock{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease-out}
  @keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
  .ba-stat{animation:float 6s ease-in-out -1.5s infinite}
  .ba-s2{animation-duration:7.4s;animation-delay:-4s}
  .tagart{animation:sway 6.5s ease-in-out infinite;transform-origin:50% 10%}
  .role-brand .tagart{animation-delay:-3s}
  @keyframes sway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(4deg) translateY(-8px)}}
  .demo-tags .tag{animation:float 6.4s ease-in-out infinite}
  .demo-tags .tag:nth-child(2){animation-delay:-2s}
  .demo-tags .tag:nth-child(3){animation-delay:-4s}

  /* бирка «выбрана»: приподнимается, лента вспыхивает */
  .mock-grid .tag{transition:transform .45s cubic-bezier(.2,.8,.3,1.3),box-shadow .45s}
  .mock-grid .tag.pick{transform:translateY(-6px) rotate(-1.5deg);box-shadow:0 16px 26px -14px var(--acc),0 0 0 2px var(--acc)}
  .mock-grid .tag.pick .hole{background:var(--acc);box-shadow:none}

  /* узор-полоса бежит */
  .ornament{animation:orn 26s linear infinite}
  @keyframes orn{to{background-position:280px 0}}

  /* искры в первом экране: ромбики поднимаются и гаснут */
  .sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
  .sparks i{position:absolute;bottom:-20px;width:10px;height:10px;background:#F3B23A;transform:rotate(45deg) scale(var(--s,1));border-radius:2px;opacity:0;
    animation:spark 14s linear infinite}
  .sparks i.c{background:#FF6A3D}
  @keyframes spark{0%{opacity:0;translate:0 0}10%{opacity:.7}70%{opacity:.35}100%{opacity:0;translate:30px -720px}}

  /* карточки откликаются на курсор */
  .step,.win,.feat,.rd,.chk,.panel,.qk,.kpi,.fl{transition:transform .25s ease,box-shadow .25s ease}
  .step:hover,.win:hover,.feat:hover,.rd:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
  .feat:hover .feat-i,.win:hover .win-i,.step:hover .bdg{animation:pop .5s cubic-bezier(.2,.8,.3,1.5)}
  @keyframes pop{40%{transform:scale(1.14) rotate(-6deg)}}

  /* кнопки: блик проходит по наведению */
  .btn{position:relative;overflow:hidden}
  .btn-coral::after,.role-btn::after,.btn-ink::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);
    transform:translateX(-120%);transition:transform .7s ease}
  .btn-coral:hover::after,.role:hover .role-btn::after,.btn-ink:hover::after{transform:translateX(120%)}
  .btn-coral{animation:breathe 3.6s ease-in-out infinite}
  .hd .btn-coral,.main .btn-coral{animation:none}
  @keyframes breathe{50%{box-shadow:0 14px 34px -10px rgba(255,106,61,1)}}

  /* роли: свечение пробегает по карточке */
  .role::after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--mx,30%) var(--my,30%),rgba(255,255,255,.14),transparent 40%);pointer-events:none;transition:opacity .3s}

  /* кабинет: график вырастает, точка состояния дышит */
  .chart rect{transform-box:fill-box;transform-origin:50% 100%;animation:grow .9s cubic-bezier(.2,.8,.3,1) both}
  .chart rect:nth-child(4n+1){animation-delay:.05s}.chart rect:nth-child(4n+2){animation-delay:.12s}
  .chart rect:nth-child(4n+3){animation-delay:.18s}.chart rect:nth-child(4n){animation-delay:.24s}
  @keyframes grow{from{transform:scaleY(0)}}
  .sl-b i,.bar i{animation:widen 1.1s cubic-bezier(.2,.8,.3,1) both}
  @keyframes widen{from{max-width:0}to{max-width:100%}}
  .cm-bars i{transform-origin:50% 100%;animation:grow 1.1s cubic-bezier(.2,.8,.3,1) both}
  .cm-bars i:nth-child(odd){animation-delay:.12s}
  .side a.nv{position:relative}
  .side a.nv.on{animation:navin .45s cubic-bezier(.2,.8,.3,1.2)}
  @keyframes navin{from{transform:translateX(-8px);opacity:.6}}
  .kpi-hl::after,.fl-hl::before{animation:glow 5s ease-in-out infinite}
  @keyframes glow{50%{transform:translate(-14px,-10px) scale(1.2);opacity:.75}}
  .qk:hover .ic{animation:pop .5s cubic-bezier(.2,.8,.3,1.5)}
  .atop{background-size:200% 100%;animation:sky 18s ease-in-out infinite}
  @keyframes sky{50%{background-position:100% 0}}
}

/* шапка сайта после прокрутки */
.hd{transition:box-shadow .3s,background .3s}
.hd.hd-s{box-shadow:0 10px 30px -18px rgba(23,21,46,.35);background:rgba(251,248,243,.96)}