/* =====================  MOTION  =====================
   One-time entrances and hover feedback. Everything is switched off for people who prefer reduced motion,
   and content stays fully visible if scripts do not run (the hidden start state only exists under .js). */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(60px) scale(.97)}to{opacity:1;transform:none}}
@keyframes drift{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(3%,3%,0) scale(1.08)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes shine{0%{background-position:-160% 0}100%{background-position:260% 0}}

.hero{position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-25%;pointer-events:none;
 background:radial-gradient(520px 300px at 18% 35%,rgba(199,156,90,.14),transparent 62%),radial-gradient(620px 360px at 88% 8%,rgba(60,110,190,.35),transparent 62%);
 animation:drift 24s ease-in-out infinite alternate}
.hero>.wrap{position:relative;z-index:1}
header.site{transition:box-shadow .25s}
header.site.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.28)}

/* hero entrance */
.js .hero .copy>*,.js .hero .wrap>.crumbs,.js .hero .wrap>.eyebrow,.js .hero .wrap>h1,.js .hero .wrap>.rule,.js .hero .wrap>p,.js .hero .wrap>.cta{animation:rise .85s cubic-bezier(.2,.7,.2,1) backwards}
.js .hero .copy>*:nth-child(2),.js .hero .wrap>h1{animation-delay:.08s}
.js .hero .copy>*:nth-child(3),.js .hero .wrap>.rule{animation-delay:.16s}
.js .hero .copy>*:nth-child(4),.js .hero .wrap>p{animation-delay:.24s}
.js .hero .copy>*:nth-child(5),.js .hero .wrap>.cta{animation-delay:.34s}
.js .hero .devices{animation:slideIn 1.1s .25s cubic-bezier(.2,.7,.2,1) backwards}

/* tilt + parallax on the hero devices (values set from script, fine pointers only) */
.hero .devices{transform:perspective(1000px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .25s ease-out}
.hero .devices .frame.desk{transform:translateY(var(--py,0px))}
.hero .devices .phone{transform:translateY(calc(var(--py,0px) * -.6))}

/* scroll reveals */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* line icons draw themselves once, when their card appears */
.js .ico *{stroke-dasharray:1;stroke-dashoffset:1}
.js .rv.in .ico *,.js .ico.in *{animation:draw 1.2s .15s ease forwards}

/* hover feedback */
.card,.ex,.thumbwrap,.mock{transition:transform .28s ease,box-shadow .28s ease}
.cards .card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(16,37,66,.14);position:relative;z-index:2}
.ex:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(16,37,66,.18)}
.ex .thumb img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ex:hover .thumb img{transform:scale(1.05)}
.thumbwrap:hover{transform:translateY(-4px)}
.btn{position:relative;overflow:hidden;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.22)}
.btn:active{transform:translateY(0)}
.btn:not(.ghost):not(.dk):after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:220% 100%;background-position:-160% 0;pointer-events:none}
.btn:not(.ghost):not(.dk):hover:after{animation:shine .9s ease}
tbody tr{transition:background .2s}
tbody tr:hover td{background:#f7efe0}
.dchips a{transition:background .2s,color .2s,transform .2s}
.dchips a:hover{transform:translateY(-2px)}
.opt{transition:background .2s,transform .2s}
.opt:hover{transform:translateX(3px)}
.step .n{transition:transform .4s ease,color .4s}
.step:hover .n{transform:translateY(-4px) scale(1.06)}

@media (prefers-reduced-motion:reduce){
 .hero:before{animation:none}
 .js .hero .copy>*,.js .hero .wrap>*,.js .hero .devices{animation:none}
 .js .rv{opacity:1;transform:none;transition:none}
 .js .ico *{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}
 .hero .devices{transform:none;transition:none}
 .cards .card:hover,.ex:hover,.thumbwrap:hover,.btn:hover,.dchips a:hover,.opt:hover,.step:hover .n{transform:none}
 .btn:hover:after{animation:none}
}