/* ---------- Motion: purposeful only. Everything is visible at rest; reduced-motion users get none of it. ---------- */
:root{--ease:cubic-bezier(.16,1,.3,1)}

/* 1. Hero entrance: one short staggered sequence on load */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-kicker,.hero h1,.hero-lede,.hero-ctas,.proof,.switch-row,.stagewrap{animation:rise .9s var(--ease) both}
.hero h1{animation-delay:.06s}.hero-lede{animation-delay:.14s}.hero-ctas{animation-delay:.2s}.proof{animation-delay:.24s}.switch-row{animation-delay:.3s}.stagewrap{animation-delay:.36s}

/* 2. Buttons: lift, press, arrow nudge */
.btn{transition:background .2s,border-color .2s,color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-acc,.btn-dark{box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.btn-acc:hover,.btn-dark:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.btn-acc::after,.btn-dark::after{content:"→";display:inline-block;margin-left:2px;transition:transform .25s var(--ease)}
.btn-acc:hover::after,.btn-dark:hover::after{transform:translateX(3px)}
.btn-line:hover{transform:translateY(-1px)}

/* 3. Nav links: underline draws in */
.nav-links a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .3s var(--ease),color .2s}
.nav-links a:hover,.nav-links a[aria-current]{background-size:100% 1px}

/* 4. Industry chips: autoplay progress under the active one */
.sw{position:relative;overflow:hidden}
.sw[aria-pressed="true"]::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.55);transform-origin:left;animation:prog 4.2s linear both}
.switcher-inner.manual .sw::after{display:none}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sw:active{transform:scale(.96)}

/* 5. Browser frame: gentle tilt toward the pointer, floating chips */
.stagewrap{perspective:2200px}
.frame{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease);transform-style:preserve-3d}
@keyframes float{50%{transform:translateY(-6px)}}
.installer{animation:float 6s ease-in-out infinite}
.badge{animation:float 7s ease-in-out -2s infinite;transition:box-shadow .25s}
.badge:hover{box-shadow:0 24px 50px -18px rgba(0,0,0,.35)}
.token{transition:background .4s}

/* 6. Cards lift on hover */
.card,.inc-card,.plan{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.card:hover{transform:translateY(-4px)}
.plan:hover{transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(0,0,0,.3)}
.inc-card:hover{transform:translateY(-3px)}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.04));pointer-events:none}

/* 7. Dark section: soft spotlight follows the pointer */
.dark .inc-card{position:relative}
.dark .inc-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 60%)}
.dark .inc-card:hover::after{opacity:1}
.dark .inc-card:hover{border-color:rgba(255,255,255,.18)}

/* 8. Staggered reveal for grids (the grid stays put; its items rise in turn) */
.reveal.stagger.pre{opacity:1;transform:none}
.stagger > *{transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .35s var(--ease),border-color .25s;transition-delay:calc(var(--i,0) * 70ms)}
.stagger.pre > *{opacity:.001;transform:translateY(18px)}
.stagger:not(.pre) > *:hover{transition-delay:0s}

/* 9. Process: the rule above each step draws in */
.p-card{border-top:0;position:relative}
.p-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:left;transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 120ms + .1s)}
.proc.pre .p-card::before{transform:scaleX(0)}

/* 10. Included illustrations play once when the section appears */
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.inc:not(.pre) .chat > *{animation:pop .6s var(--ease) both}
.inc:not(.pre) .chat > *:nth-child(2){animation-delay:.7s}
.inc:not(.pre) .chat > *:nth-child(3){animation-delay:1.1s}
.upt .bars i{transform-origin:bottom;transition:transform .6s var(--ease);transition-delay:calc(var(--i,0) * 18ms + .2s)}
.inc.pre .upt .bars i{transform:scaleY(.1)}
.inc:not(.pre) .backups span{animation:pop .6s var(--ease) both}
.inc:not(.pre) .backups span:nth-child(2){animation-delay:.15s}
.inc:not(.pre) .backups span:nth-child(3){animation-delay:.3s}
.devs i{transition:transform .5s var(--ease)}
.inc-card:hover .devs i:nth-child(1){transform:translateX(-6px)}
.inc-card:hover .devs i:nth-child(3){transform:translateX(6px)}
.lockv{transition:transform .4s var(--ease)}
.inc-card:hover .lockv{transform:scale(1.04)}

/* 11. FAQ opens smoothly */
details p{animation:none}
details[open] p{animation:rise .45s var(--ease) both}
summary{transition:color .2s}
summary:hover{color:var(--mid)}

/* 12. Chips and filters respond */
.chip,.go{transition:all .2s var(--ease)}
.chip:active{transform:scale(.96)}

@media (hover:none){.frame{transform:none}}
@media (prefers-reduced-motion:reduce){
	/* Keep feedback (hover, fades, counters, progress); drop large or continuous movement. */
	.hero-kicker,.hero h1,.hero-lede,.hero-ctas,.proof,.switch-row,.stagewrap,details[open] p{animation-name:fade}
	@keyframes fade{from{opacity:0}to{opacity:1}}
	.installer,.badge{animation:none}
	.frame{transform:none!important}
	.word span{animation-name:fade}
	.stagger.pre > *{transform:none}
	.inc:not(.pre) .chat > *,.inc:not(.pre) .backups span{animation-name:fade}
}