/* ArkSolo landing — motion layer.
   Everything here is scoped to html.motion, which a tiny inline script in <head> adds only when the
   visitor has not asked for reduced motion. Without it (or without JavaScript) every page is static. */

/* page fades in once motion.js has tagged what to reveal */
html.motion main{transition:opacity .45s ease}
html.motion:not(.mready) main{opacity:0}

/* ── scroll reveal ─────────────────────────────────────── */
html.motion .rv{opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s);will-change:opacity,transform}
html.motion .rv[data-rv="zoom"]{transform:translate3d(0,26px,0) scale(.955)}
html.motion .rv[data-rv="left"]{transform:translate3d(-28px,0,0)}
html.motion .rv[data-rv="right"]{transform:translate3d(28px,0,0)}
html.motion .rv[data-rv="pop"]{transform:scale(.82)}
html.motion .rv.in{opacity:1;transform:none}
html.motion .rv.rv-done{will-change:auto;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s}

/* steps: circle pops, connector draws */
html.motion .step.rv .circ{transform:scale(.6);transition:transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .1s)}
html.motion .step.rv.in .circ{transform:none}
html.motion .step.rv::after{transform:scaleY(0);transform-origin:top;transition:transform .8s ease calc(var(--d,0s) + .35s)}
html.motion .step.rv.in::after{transform:none}
@media (min-width:1024px){
  html.motion .steps.h .step.rv::after{transform:scaleX(0);transform-origin:left}
  html.motion .steps.h .step.rv.in::after{transform:none}
}

/* charts: bars grow, lines draw */
html.motion .rv .bar-row .b{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) var(--bd,0s)}
html.motion .rv.in .bar-row .b{transform:none}
html.motion .rv .ln-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) calc(var(--d,0s) + .2s)}
html.motion .rv.in .ln-draw{stroke-dashoffset:0}
html.motion .rv .ln-lab{opacity:0 !important;transition:opacity .6s ease calc(var(--d,0s) + 1.8s)}
html.motion .rv.in .ln-lab{opacity:1 !important}

/* chat bubbles */
html.motion .msg.rv{transform:translate3d(0,14px,0) scale(.96)}
html.motion .msg.me.rv{transform-origin:right bottom}
html.motion .msg.bot.rv{transform-origin:left bottom}
html.motion .msg.rv.in{transform:none}

/* ── hero (About page) ─────────────────────────────────── */
html.motion.mready .hero>div:first-child>*{animation:heroUp .9s cubic-bezier(.2,.7,.2,1) both}
html.motion.mready .hero>div:first-child>:nth-child(1){animation-delay:.05s}
html.motion.mready .hero>div:first-child>:nth-child(2){animation-delay:.15s}
html.motion.mready .hero>div:first-child>:nth-child(3){animation-delay:.32s}
html.motion.mready .hero>div:first-child>:nth-child(4){animation-delay:.46s}
html.motion.mready .hero>div:first-child>:nth-child(5){animation-delay:.6s}
html.motion.mready .hero>div:first-child>:nth-child(6){animation-delay:.74s}
html.motion.mready .hero-visual .browser{animation:heroBrowser 1.1s cubic-bezier(.2,.7,.2,1) .3s both}
html.motion.mready .hero-visual .phone{animation:heroPhone 1s cubic-bezier(.2,.7,.2,1) .55s both,float 6s ease-in-out 1.6s infinite}
html.motion .hero-visual .browser{position:relative;z-index:1}
html.motion .hero-visual::before{content:"";position:absolute;inset:6% 4% 10% 12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(212,175,55,.26),rgba(212,175,55,0));filter:blur(24px);animation:breathe 7s ease-in-out infinite}
html.motion .hero .big i{background:linear-gradient(100deg,var(--gold) 0 38%,#FFF0BF 50%,var(--gold) 62% 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out 1.4s infinite}
@keyframes heroUp{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes heroBrowser{from{opacity:0;transform:translate3d(48px,0,0) scale(.96)}to{opacity:.95;transform:none}}
@keyframes heroPhone{from{opacity:0;transform:translate3d(0,46px,0)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes breathe{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes shine{0%{background-position:120% 0}30%,100%{background-position:-20% 0}}

/* ── buttons: gold sheen + lift ─────────────────────────── */
html.motion .btn{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
html.motion .btn:not(.ghost){position:relative;overflow:hidden;isolation:isolate}
html.motion .btn:not(.ghost)::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);
  animation:sheen 6s ease-in-out 2.2s infinite}
@keyframes sheen{0%{left:-70%}20%,100%{left:135%}}
@media (hover:hover){
  html.motion .btn:hover{transform:translateY(-2px)}
  html.motion .btn:not(.ghost):hover{box-shadow:0 14px 30px -14px rgba(212,175,55,.7)}
  html.motion .btn.ghost:hover{border-color:var(--gold)}
  html.motion .btn svg{transition:transform .25s}
  html.motion .btn:hover svg{transform:translateX(3px)}
}

/* ── cards & links ─────────────────────────────────────── */
@media (hover:hover){
  html.motion :is(a.card,.grid2>.card,.grid3>.card,.grid4>.card,.reach>.card,.loop>.card,.stack>.card,.tiles>.card):hover{
    transform:translateY(-4px);border-color:var(--line2);box-shadow:0 22px 44px -26px rgba(212,175,55,.38)}
  html.motion .fcard .shot img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  html.motion .fcard:hover .shot img{transform:scale(1.045)}
  html.motion .fcard .go svg,html.motion .next .arr svg{transition:transform .25s}
  html.motion .fcard:hover .go svg{transform:translateX(4px)}
  html.motion .next{transition:border-color .3s,transform .3s}
  html.motion .next:hover{border-color:var(--gold);transform:translateY(-2px)}
  html.motion .next:hover .arr svg{transform:translateX(3px)}
  html.motion .ic{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s}
  html.motion .card:hover>.ic,html.motion .card:hover .row>.ic{transform:rotate(-6deg) scale(1.06)}
}
html.motion .ctaband.rv img{transform:rotate(-90deg) scale(.6);opacity:0;transition:transform 1s cubic-bezier(.34,1.4,.64,1) .2s,opacity .6s .2s}
html.motion .ctaband.rv.in img{transform:none;opacity:1}

/* ── top bar, progress line, menus ─────────────────────── */
html.motion .topbar{transition:box-shadow .3s,border-color .3s,background .3s}
html.motion .topbar.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.95);border-bottom-color:var(--line2)}
.mprog{position:fixed;left:0;top:var(--top);height:2px;width:100%;z-index:51;pointer-events:none;
  background:linear-gradient(90deg,var(--gd),var(--gold),var(--gl));transform-origin:left;transform:scaleX(0)}
html.motion .menu.open{animation:menuIn .32s ease both}
html.motion .menu.open li{animation:menuLi .5s cubic-bezier(.2,.7,.2,1) both}
html.motion .menu.open li:nth-child(1){animation-delay:.05s}
html.motion .menu.open li:nth-child(2){animation-delay:.09s}
html.motion .menu.open li:nth-child(3){animation-delay:.13s}
html.motion .menu.open li:nth-child(4){animation-delay:.17s}
html.motion .menu.open li:nth-child(5){animation-delay:.21s}
html.motion .menu.open li:nth-child(6){animation-delay:.25s}
html.motion .menu.open li:nth-child(7){animation-delay:.29s}
html.motion .menu.open li:nth-child(8){animation-delay:.33s}
html.motion .menu.open li:nth-child(9){animation-delay:.37s}
html.motion .menu.open>.btn{animation:menuLi .5s cubic-bezier(.2,.7,.2,1) .4s both}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
@keyframes menuLi{from{opacity:0;transform:translate3d(24px,0,0)}to{opacity:1;transform:none}}
html.motion :is(.nav .dd:hover .panel,.nav .dd:focus-within .panel,.nav .dd.open .panel){animation:ddIn .22s ease both}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html.motion main.lang-swap{animation:langSwap .4s ease}
@keyframes langSwap{from{opacity:.25}to{opacity:1}}
html.motion .done:not([hidden]) .big{animation:pop .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

@media print{
  html.motion main{opacity:1!important}
  html.motion .rv{opacity:1!important;transform:none!important}
  .mprog{display:none}
}