/* ==========================================================================
   Motion layer — hover, scroll and load animation.
   Everything here is decorative: delete this file and the site still works.
   All of it is disabled for visitors who ask for reduced motion.
   ========================================================================== */

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--acc),var(--acc-2),var(--acc-3));
  will-change:transform;pointer-events:none}

/* ---------- header shrink ---------- */
.hdr__in{transition:height .32s var(--ease)}
.hdr.is-stuck .hdr__in{height:58px}
.hdr.is-stuck{background:color-mix(in srgb,var(--bg) 92%,transparent)}

/* ---------- nav underline ---------- */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc-2));transform:scaleX(0);transform-origin:0 50%;
  transition:transform .32s var(--ease)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}

/* ---------- page-load stagger ---------- */
@keyframes liftIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero__in>*{animation:liftIn .85s var(--ease) both}
.hero__in>*:nth-child(1){animation-delay:.05s}
.hero__in>*:nth-child(2){animation-delay:.14s}
.hero__in>*:nth-child(3){animation-delay:.23s}
.hero__in>*:nth-child(4){animation-delay:.32s}
.hero__in>*:nth-child(5){animation-delay:.41s}
.hero__media{animation:liftIn 1s var(--ease) .3s both}

/* ---------- word-by-word heading reveal ---------- */
.w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.6deg);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.split-in .w{opacity:1;transform:none}

/* ---------- gradient shimmer on the hero accent ---------- */
.hero h1 .grad{background-size:220% 100%;animation:shimmer 9s linear infinite}
@keyframes shimmer{to{background-position:220% 0}}

/* ---------- live dot pulse ---------- */
.dot{position:relative}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}

/* ---------- pointer spotlight on cards ---------- */
.card,.price,.role,.step,.metric{--mx:50%;--my:50%;position:relative;isolation:isolate}
.card::before,.price::before,.role::before,.step::before,.metric::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(79,124,255,.13),transparent 62%);
  transition:opacity .35s}
.card:hover::before,.price:hover::before,.role:hover::before,.step:hover::before,.metric:hover::before{opacity:1}

/* spotlight border trace (not on .price — that ::after is the "Most popular" badge) */
.card::after,.role::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(79,124,255,.65),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;transition:opacity .35s}
.card:hover::after,.role:hover::after{opacity:1}

/* card icon reacts */
.card__ico{transition:transform .4s var(--ease),background .4s}
.card:hover .card__ico{transform:translateY(-3px) rotate(-4deg) scale(1.06)}

/* ---------- button shine ---------- */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease)}
.btn--primary:hover::after{left:130%}

/* ---------- tilt targets ---------- */
[data-tilt]{perspective:1200px}
[data-tilt]>*{transition:transform .4s var(--ease);will-change:transform}
[data-tilt].is-live>*{transition:transform .12s linear}

/* idle float on the hero mock */
@keyframes drift{50%{transform:translateY(-11px)}}
.hero__media .mock{animation:drift 7s ease-in-out infinite}
[data-tilt].is-live .mock{animation:none}

/* ---------- product mock hover ---------- */
.prod__media .app{transition:transform .5s var(--ease),box-shadow .5s}
.prod__media:hover .app{transform:translateY(-6px) scale(1.012)}

/* ---------- reveal variants ---------- */
.rv--left{transform:translateX(-28px)}
.rv--right{transform:translateX(28px)}
.rv--scale{transform:scale(.965)}
.rv--left.in,.rv--right.in,.rv--scale.in{transform:none}
@media (max-width:860px){
  /* no sideways travel on narrow screens — it briefly widens the document */
  .rv--left,.rv--right{transform:translateY(18px)}
}

/* ---------- animated bars in the hero mock ---------- */
.bars i{transition:height .9s var(--ease)}

/* ---------- status chips pulse ---------- */
.rowitem .st{transition:transform .3s var(--ease)}
.app:hover .rowitem .st{transform:scale(1.05)}
.rowitem{transition:border-color .3s,transform .3s var(--ease),background .3s}
.app:hover .rowitem:hover{border-color:var(--line-2);transform:translateX(4px)}

/* ---------- marquee reacts ---------- */
.marquee:hover .marquee__t{animation-play-state:paused}
.marquee__t span{transition:color .25s}
.marquee:hover .marquee__t span:hover{color:var(--acc)}

/* ---------- steps: number lights up in view ---------- */
.step__n{transition:color .4s,border-color .4s,background .4s,box-shadow .4s}
.step.in-view .step__n{color:#fff;border-color:transparent;
  background:linear-gradient(150deg,var(--acc),var(--acc-2));box-shadow:0 8px 26px -10px var(--glow)}

/* ---------- accordion body slide ---------- */
.acc__c{animation:accIn .35s var(--ease) both}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}}

/* ---------- link + tag micro-interactions ---------- */
.tag{transition:border-color .25s,color .25s,transform .25s var(--ease)}
.tag:hover{border-color:var(--acc);color:var(--tx);transform:translateY(-2px)}
.ftr a,.mobilenav a{transition:color .2s,transform .25s var(--ease)}
.ftr a:hover{transform:translateX(3px)}
.checks li svg,.prod__list svg{transition:transform .3s var(--ease)}
.checks li:hover svg,.prod__list li:hover svg{transform:scale(1.25)}

/* ---------- form focus glow ---------- */
.field input,.field textarea,.field select{transition:border-color .2s,background .2s,box-shadow .25s}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 4px rgba(79,124,255,.14)}
.chip span{transition:border-color .2s,color .2s,background .2s,transform .2s var(--ease)}
.chip span:hover{transform:translateY(-2px)}

/* ---------- aurora drift ---------- */
.aurora::before{animation:blob1 22s ease-in-out infinite alternate}
.aurora::after{animation:blob2 26s ease-in-out infinite alternate}
@keyframes blob1{to{transform:translateX(-40%) translateY(40px) scale(1.12)}}
@keyframes blob2{to{transform:translateX(-70px) translateY(60px) scale(1.1)}}

/* ---------- cursor spotlight over the hero grid ---------- */
.hero .gridlines,.pagehead .gridlines{--mx:50%;--my:0%}
.hero .gridlines::after,.pagehead .gridlines::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(79,124,255,.16),transparent 70%);
  opacity:0;transition:opacity .5s}
.hero:hover .gridlines::after,.pagehead:hover .gridlines::after{opacity:1}

/* ---------- back to top ---------- */
.totop{position:fixed;right:22px;bottom:22px;z-index:70;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--tx-2);
  cursor:pointer;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease),color .2s,border-color .2s;box-shadow:var(--shadow)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{color:var(--tx);border-color:var(--acc)}

/* ---------- respect the preference ---------- */
@media (prefers-reduced-motion:reduce){
  .progress,.totop{display:none}
  .hero__in>*,.hero__media,.hero__media .mock,.aurora::before,.aurora::after,.dot::after,.hero h1 .grad{animation:none}
  .w{opacity:1;transform:none}
  *{transition-duration:.001ms!important}
}