/*
  Homepage motion (public/js/home-motion.js): the hero's entrance, sections that rise into view as the
  page scrolls, icons that draw themselves, counters that count up. Switched on and sized in
  Console → Settings → Launch intro ("Homepage motion"). Everything here is only a class the script adds
  after the page has painted, so without the script, or with reduced motion, nothing is ever hidden.
  The strength comes from html[data-motion]: subtle, normal or lively.
*/
html { --hm-dist: 24px; --hm-dur: .8s; --hm-stagger: 70ms; }
html[data-motion="subtle"] { --hm-dist: 12px; --hm-dur: .55s; --hm-stagger: 40ms; }
html[data-motion="lively"] { --hm-dist: 42px; --hm-dur: 1s; --hm-stagger: 100ms; }

/* ---- hero: each slide's copy stacks in as the slide becomes the active one ---- */
.hero-carousel .hslide.active .hero-l > * { animation: hmRise var(--hm-dur) cubic-bezier(.2, .8, .2, 1) both; }
.hero-carousel .hslide.active .hero-l > :nth-child(2) { animation-delay: calc(var(--hm-stagger) * 1); }
.hero-carousel .hslide.active .hero-l > :nth-child(3) { animation-delay: calc(var(--hm-stagger) * 2); }
.hero-carousel .hslide.active .hero-l > :nth-child(4) { animation-delay: calc(var(--hm-stagger) * 3); }
.hero-carousel .hslide.active .hero-l > :nth-child(5) { animation-delay: calc(var(--hm-stagger) * 4); }
.hero-carousel .hslide.active .hero-r { animation: hmSlideIn calc(var(--hm-dur) * 1.2) cubic-bezier(.2, .8, .2, 1) calc(var(--hm-stagger) * 3) both; }
.hero-carousel .hslide.active .hero-r .mini-deal { animation: hmRise var(--hm-dur) cubic-bezier(.2, .8, .2, 1) both; }
.hero-carousel .hslide.active .hero-r .mini-deal:nth-of-type(1) { animation-delay: calc(var(--hm-stagger) * 5); }
.hero-carousel .hslide.active .hero-r .mini-deal:nth-of-type(2) { animation-delay: calc(var(--hm-stagger) * 6); }
.hero-carousel .hslide.active .hero-r .mini-deal:nth-of-type(3) { animation-delay: calc(var(--hm-stagger) * 7); }
.hero-carousel .hero-cta .btn-orange { animation: hmPulse 2.8s ease-in-out 1.6s infinite; }

/* ---- scroll reveal ---- */
.hm-reveal { opacity: 0; transform: translateY(var(--hm-dist)); transition: opacity var(--hm-dur) ease, transform var(--hm-dur) cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--hm-i, 0) * var(--hm-stagger)); }
.hm-reveal.hm-left { transform: translateX(calc(var(--hm-dist) * -1)); }
.hm-reveal.hm-right { transform: translateX(var(--hm-dist)); }
.hm-reveal.hm-pop { transform: scale(.94) translateY(calc(var(--hm-dist) / 2)); }
.hm-reveal.hm-in { opacity: 1; transform: none; }

/* A short accent bar draws under each section heading. */
.sec-h { position: relative; }
.hm-bar .sec-h::after { content: ""; display: block; height: 3px; width: 0; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, #ee7a2b, #f7b731); transition: width calc(var(--hm-dur) * 1.2) cubic-bezier(.2, .8, .2, 1) .15s; }
.hm-bar.hm-in .sec-h::after { width: 54px; }

/* ---- icons ---- */
.hm-draw .ici path, .hm-draw .ici circle, .hm-draw .ici rect, .hm-draw .ici line, .hm-draw .ici polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hm-draw.hm-in .ici path, .hm-draw.hm-in .ici circle, .hm-draw.hm-in .ici rect, .hm-draw.hm-in .ici line, .hm-draw.hm-in .ici polyline { animation: hmDraw calc(var(--hm-dur) * 1.6) ease-out calc(var(--hm-i, 0) * var(--hm-stagger) + .1s) forwards; }
.trust .t .ti { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.trust .t:hover .ti { transform: translateY(-4px) rotate(-4deg) scale(1.08); }
.ctile .ci { display: inline-block; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.ctile:hover .ci { transform: translateY(-5px) scale(1.18) rotate(-6deg); }
.ctile { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.ctile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(12, 59, 104, .14); }
.how-col .step .n { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.hm-in .step .n { animation: hmPop .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--hm-i, 0) * var(--hm-stagger) + .25s) both; }
.sellcta { background-size: 200% 100%; }
.hm-in.sellcta { animation: hmSheen 9s ease-in-out infinite; }

@keyframes hmRise { from { opacity: 0; transform: translateY(var(--hm-dist)); } to { opacity: 1; transform: none; } }
@keyframes hmSlideIn { from { opacity: 0; transform: translateX(calc(var(--hm-dist) * 1.6)); } to { opacity: 1; transform: none; } }
@keyframes hmDraw { to { stroke-dashoffset: 0; } }
@keyframes hmPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hmPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(238, 122, 43, .0); } 50% { box-shadow: 0 0 0 10px rgba(238, 122, 43, .18); } }
@keyframes hmSheen { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-carousel .hslide.active .hero-l > *, .hero-carousel .hslide.active .hero-r, .hero-carousel .hslide.active .hero-r .mini-deal,
  .hero-carousel .hero-cta .btn-orange, .hm-in .step .n, .hm-in.sellcta { animation: none !important; }
  .hm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hm-draw .ici * { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .hm-bar .sec-h::after { width: 54px; transition: none; }
}