/* ROOTKORE — motion layer v2: light, fast, CSS-first. Nothing waits for JavaScript to become visible. */

/* ---------- scroll progress + header ---------- */
.scrollbar { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 100%; z-index: 120; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--blue), #8a5cf6, var(--red)); pointer-events: none; }
html[dir=rtl] .scrollbar { transform-origin: 100% 50%; }
.hdr { transition: box-shadow .3s, background .3s; }
.hdr.scrolled { box-shadow: 0 10px 30px -18px rgba(31,45,110,.35); background: rgba(255,255,255,.96); }

/* ---------- hero: quick entrance, pure CSS (starts at first paint) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero2 .h2head > * { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
.hero2 .h2head > :nth-child(2) { animation-delay: .06s; }
.hero2 .h2head > :nth-child(3) { animation-delay: .12s; }
.hero2 .proof { animation: rise .55s .45s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- the two cards: one calm fade-up ---------- */
.door { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.door.mkt { animation-delay: .08s; }

/* ---------- scroll reveals: short and subtle (only when JS is there: html.js) ---------- */
html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
html.js .rv.in { opacity: 1; transform: none; }

/* ---------- small, cheap hover details ---------- */
.svc > div, .why > div, .step { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.svc > div:hover, .why > div:hover, .step:hover { transform: translateY(-4px); box-shadow: var(--sh2); border-color: var(--line2); }
.svc > div > svg, .why > div > svg, .step > svg { transition: transform .35s cubic-bezier(.2,.8,.2,1.4); }
.svc > div:hover > svg, .why > div:hover > svg, .step:hover > svg { transform: rotate(-8deg) scale(1.1); }
.btn .arr { transition: transform .25s; }
.btn:hover .arr { transform: translateX(4px); }
html[dir=rtl] .btn:hover .arr { transform: translateX(-4px) scaleX(-1); }
.logo-t img { transition: transform .3s; }
.logo-t:hover img { transform: scale(1.06); }
.chip { transition: transform .2s, border-color .2s; }
.chip:hover { transform: translateY(-2px); border-color: var(--line2); }
.mod.sel .ck { animation: pop .3s cubic-bezier(.2,.8,.2,1.6); }
@keyframes pop { from { transform: scale(.5); } to { transform: scale(1); } }
.cartbtn .n.bump { animation: pop .4s cubic-bezier(.2,.8,.2,1.8); }
.proof b, .stats3 b { font-variant-numeric: tabular-nums; }
.ncard .art .nimg { transition: transform .5s; }
.ncard:hover .art .nimg { transform: scale(1.04); }

@media (max-width: 720px) {
}
@media (prefers-reduced-motion: reduce) {
  .door, .hero2 *, html.js .rv { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .scrollbar { display: none; }
}