/* home-motion.css — homepage motion layer (03/11/2026, "p28d").
   Effects (written from scratch, inspired by the feel of modern SaaS landing pages):
   hero word-mask reveal + rotating keyword, staggered hero entrance, scrolling template wall, 3D arc carousel,
   scroll reveals, count-ups, text ribbon marquee, card spotlight/lift, petals, scroll progress.
   Everything is gated by html.hm-js (set in <head><meta charset="utf-8">); with no JS or prefers-reduced-motion the page is the original static page.
   Rollback: remove the <link> to this file and the <script src="js/home-motion.js"> from index.html. */
:root{--hm-ease:cubic-bezier(.22,.61,.36,1);--hm-ease2:cubic-bezier(.16,1,.3,1)}

/* ---------- scroll progress ---------- */
.hm-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:80;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--st-accent,#b3202e),oklch(70% .13 75),var(--st-accent,#b3202e));opacity:.9}

/* ---------- hero entrance (pure CSS so it never depends on JS timing) ---------- */
@keyframes hmUp{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes hmFade{from{opacity:0}to{opacity:1}}
@keyframes hmWord{from{translate:0 112%;rotate:5deg}to{translate:0 0;rotate:0deg}}
@keyframes hmShow{to{opacity:1}}
.hm-js .hero .eyebrow,.hm-js .hero-lead,.hm-js .hero-actions,.hm-js .hero-metrics{animation:hmUp 1s var(--hm-ease2) both;animation-delay:var(--d,.2s)}
.hm-js .hero .eyebrow{--d:.1s}
.hm-js .hero-lead{--d:.85s}.hm-js .hero-actions{--d:1s}.hm-js .hero-metrics{--d:1.15s}
.hm-js .hero .phone-stack{animation:hmFade 1.4s ease both .5s}
.hm-js .hero h1:not(.hm-split){opacity:0;animation:hmShow .01s 1.7s forwards} /* failsafe if JS never splits it */
.hm-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.16em .04em .14em;margin:-.16em -.04em -.14em}
.hm-wi{display:inline-block;will-change:translate}
.hm-js .hero h1.hm-split .hm-wi{animation:hmWord 1s var(--hm-ease2) both;animation-delay:calc(.25s + var(--i) * .075s)}
.hm-js .hm-h2 .hm-wi{translate:0 112%;rotate:5deg;transition:translate 1s var(--hm-ease2),rotate 1s var(--hm-ease2);transition-delay:calc(var(--i) * .07s)}
.hm-js .hm-h2.hm-in .hm-wi{translate:0 0;rotate:0deg}
.hm-js .hm-h2.hm-done .hm-wi{will-change:auto}

/* rotating keyword */
.hm-rot{position:relative;display:inline-block;vertical-align:bottom;white-space:nowrap;transition:width .7s var(--hm-ease2)}
.hero h1 .hm-rot{padding-bottom:.04em}
.hm-rot-clip{display:block;overflow:hidden;padding:.16em .04em .14em;margin:-.16em -.04em -.14em}
.hm-rot-i{display:block;position:absolute;left:.04em;top:.16em;white-space:nowrap;translate:0 110%;opacity:0;transition:translate .8s var(--hm-ease2),opacity .28s ease}
.hm-rot-i.is-on{position:relative;left:auto;top:auto;translate:0 0;opacity:1}
.hm-rot-i.is-off{translate:0 -110%;opacity:0}

/* ---------- decor: drifting petals + floating 囍 ---------- */
.hm-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hm-petal{position:absolute;top:-30px;left:var(--x);width:var(--s);height:calc(var(--s) * 1.35);border-radius:80% 0 80% 0;background:linear-gradient(135deg,oklch(78% .12 15),oklch(62% .19 18));opacity:0;animation:hmFall var(--t) linear var(--dl) infinite}
@keyframes hmFall{0%{opacity:0;transform:translate3d(0,-20px,0) rotate(0)}8%{opacity:.5}50%{transform:translate3d(calc(var(--w) * -1),52vh,0) rotate(180deg)}92%{opacity:.35}100%{opacity:0;transform:translate3d(var(--w),108vh,0) rotate(360deg)}}
.hm-xi{position:absolute;font-family:'Noto Serif','Noto Serif SC',serif;font-weight:700;color:var(--st-accent,#b3202e);opacity:.07;line-height:1;animation:hmBob 8s ease-in-out infinite}
.hm-xi.a{font-size:150px;left:44%;top:9%;transform:rotate(-12deg)}
.hm-xi.b{font-size:96px;left:3%;bottom:8%;transform:rotate(10deg);animation-delay:-3s}
@keyframes hmBob{0%,100%{translate:0 0}50%{translate:0 -16px}}

/* ---------- hero wall (vertical gliding template columns) ---------- */
.hm-wall{position:absolute;inset:-6% -4%;display:none;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotate(5deg);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);opacity:0;transition:opacity 1s ease .2s}
.hm-wall-on .hm-wall{display:grid}
.hm-wall-on.hm-wall-vis .hm-wall{opacity:1}
.hm-wall-on .phone{display:none!important}
.hm-col{position:relative;overflow:hidden;min-width:0}
.hm-col-track{display:flex;flex-direction:column;gap:14px;animation:hmUpMarq var(--dur,46s) linear infinite;will-change:transform}
.hm-col.dn .hm-col-track{animation-name:hmDnMarq}
.hm-col:nth-child(2){margin-top:-60px}
@keyframes hmUpMarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes hmDnMarq{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
.hm-wall:hover .hm-col-track{animation-play-state:paused}
.hm-wcard{display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:9/16;background:var(--st-paper-3,#eee);box-shadow:0 14px 34px oklch(30% .08 18/.18);flex:none;transition:transform .5s var(--hm-ease),box-shadow .5s}
.hm-wcard img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.hm-wcard:hover{transform:scale(1.04);box-shadow:0 22px 46px oklch(30% .08 18/.3);z-index:2}
.phone-stack.hm-wall-host{height:560px;display:block}

/* ---------- text ribbon ---------- */
.hm-ribbon{position:relative;overflow:hidden;background:var(--st-accent-deep,#4a0f16);color:var(--st-on-deep,#fbeee6);padding:16px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hm-ribbon-track{display:flex;width:max-content;animation:hmRib 38s linear infinite}
.hm-ribbon:hover .hm-ribbon-track{animation-play-state:paused}
.hm-ribbon-row{display:flex;align-items:center;flex:none}
.hm-ribbon span{font-family:var(--st-font-display,'Playfair Display',serif);font-size:1.15rem;letter-spacing:.02em;white-space:nowrap;padding:0 26px}
.hm-ribbon i{font-style:normal;font-family:'Noto Serif','Noto Serif SC',serif;font-weight:700;color:oklch(78% .12 60);font-size:1rem}
@keyframes hmRib{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- 3D arc carousel ---------- */
.hm-has-arc,#mau{overflow-x:clip}
.hm-arc{display:none;position:relative;margin:0 0 44px calc(50% - 50vw);width:100vw;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hm-arc.is-ready{display:block}
.hm-arc-stage{position:relative;height:var(--arc-h,470px);cursor:grab;outline:none}
.hm-arc.is-drag .hm-arc-stage{cursor:grabbing}
.hm-arc-list{position:absolute;inset:0;margin:0;padding:0;list-style:none;perspective:var(--arc-p,1400px)}
.hm-arc-item{position:absolute;left:50%;top:50%;width:var(--arc-w,210px);backface-visibility:hidden;will-change:transform;visibility:hidden}
.hm-arc-card{display:block;color:inherit;text-decoration:none;border-radius:18px;-webkit-user-drag:none}
.hm-arc-box{position:relative;display:block;overflow:hidden;border-radius:18px;aspect-ratio:1/1.5;background:var(--st-paper-3,#eee);border:1px solid var(--st-rule,#e9d6d2);box-shadow:0 22px 40px -18px rgba(60,20,25,.5);transition:box-shadow .4s}
.hm-arc-box img{display:block;width:100%;height:auto;-webkit-user-drag:none;transform:translate3d(0,0,0);transition:transform .5s var(--hm-ease)}
.hm-arc-card:hover .hm-arc-box img,.hm-arc-card:focus-visible .hm-arc-box img{transition:transform 5s linear;transform:translate3d(0,calc(var(--pan,0) * -1px),0)}
.hm-arc-card:hover .hm-arc-box{box-shadow:0 30px 54px -16px rgba(60,20,25,.62)}
.hm-arc-tag{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:.66rem;font-weight:600;letter-spacing:.04em;color:#2a221a}
.hm-arc-cap{display:block;text-align:center;margin-top:14px;font-family:var(--st-font-display,serif);font-size:1rem;font-weight:600;color:var(--st-ink,#2b1d1f);transition:color .3s}
.hm-arc-cap small{display:block;font-family:var(--st-font-body,sans-serif);font-weight:400;font-size:.76rem;color:var(--st-muted,#6b4a4f);margin-top:2px}
.hm-arc-card:hover .hm-arc-cap{color:var(--st-accent,#b3202e)}
.hm-arc-ctl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:6px}
.hm-arc-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--st-rule,#e2cfcb);background:var(--st-card,#fff);color:var(--st-ink,#222);cursor:pointer;display:grid;place-items:center;transition:transform .25s var(--hm-ease),background .25s,color .25s,border-color .25s;padding:0}
.hm-arc-btn:hover{background:var(--st-accent,#b3202e);color:#fff;border-color:var(--st-accent,#b3202e);transform:translateY(-2px)}
.hm-arc-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hm-arc-hint{font-size:.82rem;color:var(--st-muted,#6b4a4f);letter-spacing:.03em}
.hm-arc-btn:focus-visible{outline:2px solid var(--st-focus,#c0303c);outline-offset:2px}
.hm-sub{display:none}
.hm-has-arc .hm-sub{display:block;text-align:center;margin:0 0 22px;font-family:var(--st-font-display,serif);font-size:1.15rem;font-weight:600;color:var(--st-ink)}
.hm-has-arc .hm-sub::before,.hm-has-arc .hm-sub::after{content:"";display:inline-block;width:40px;height:1px;background:var(--st-rule,#e2cfcb);vertical-align:middle;margin:0 14px}

/* ---------- scroll reveal (uses the individual `translate` property so card hover transforms are untouched) ---------- */
.hm-js .hm-rv{opacity:0;translate:0 38px}
.hm-js .hm-rv.hm-in{opacity:1;translate:0 0;transition:opacity .9s var(--hm-ease2),translate .9s var(--hm-ease2);transition-delay:var(--hm-d,0s)}
.hm-js .hm-rv.hm-l{translate:-40px 0}.hm-js .hm-rv.hm-r{translate:40px 0}
.hm-js .hm-rv.hm-s{translate:0 24px;scale:.94}
.hm-js .hm-rv.hm-in.hm-s{scale:1;transition-property:opacity,translate,scale}

/* ---------- hover lift + spotlight ---------- */
.pain-card,.feat,.step,.trust,.price,.rv-item{position:relative;transition:transform .45s var(--hm-ease),box-shadow .45s,border-color .45s}
.pain-card:hover,.feat:hover,.step:hover,.trust:hover,.rv-item:hover{transform:translateY(-6px);box-shadow:0 22px 44px -22px oklch(30% .12 18/.35);border-color:oklch(78% .08 18)}
.price:hover{transform:translateY(-8px);box-shadow:0 26px 50px -24px oklch(30% .12 18/.4)}
.price-grid[data-count="4"] .price.featured:hover{transform:translateY(-8px)}
.pain-card::after,.feat::after,.trust::after,.step::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),oklch(70% .12 18/.14),transparent 65%)}
.pain-card:hover::after,.feat:hover::after,.trust:hover::after,.step:hover::after{opacity:1}
.pain-card .ico{transition:transform .5s var(--hm-ease2),background .3s,color .3s}
.pain-card:hover .ico{transform:rotate(-8deg) scale(1.12);background:var(--st-accent,#b3202e);color:#fff}
.feat .num{display:inline-block;transition:transform .5s var(--hm-ease2)}
.feat:hover .num{transform:translateX(6px)}
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s var(--hm-ease);pointer-events:none;z-index:-1}
.btn-primary:hover::after{left:130%}
.btn:hover{box-shadow:0 14px 30px -12px oklch(30% .12 18/.45)}
.faq details{transition:border-color .3s,background .3s,box-shadow .3s}
.faq details:hover{border-color:oklch(78% .08 18)}
.faq details[open]{box-shadow:0 14px 30px -20px oklch(30% .1 18/.35)}
.cta-band .btn-primary{animation:hmPulse 3.2s ease-in-out infinite}
@keyframes hmPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}60%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.nav-links a:not(.btn){position:relative}

/* ---------- responsive ---------- */
@media (max-width:960px){.hm-xi.a{left:62%;font-size:110px}.phone-stack.hm-wall-host{height:480px}}
@media (max-width:640px){
  .phone-stack.hm-wall-host{height:400px}
  .hm-wall{gap:10px;inset:-4% -6%}.hm-col-track{gap:10px}.hm-wcard{border-radius:12px}
  .hm-arc{margin-bottom:30px}
  .hm-xi.a{font-size:84px;left:68%;top:3%}
  .hm-w-rot{display:block}
  .hm-ribbon span{font-size:1rem;padding:0 18px}
}

/* ---------- reduced motion: the page is the original static page ---------- */
@media (prefers-reduced-motion:reduce){
  .hm-js .hero .eyebrow,.hm-js .hero-lead,.hm-js .hero-actions,.hm-js .hero-metrics,.hm-js .hero .phone-stack,.hm-js .hero h1.hm-split .hm-wi{animation:none!important}
  .hm-js .hero h1:not(.hm-split){opacity:1;animation:none}
  .hm-js .hm-rv,.hm-js .hm-h2 .hm-wi{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;transition:none!important}
  .hm-col-track,.hm-ribbon-track,.hm-petal,.hm-xi,.cta-band .btn-primary{animation:none!important}
  .hm-petal,.hm-progress{display:none}
  .hm-ribbon{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  }