/* KiwiTri Motion Pack v1 — shared premium motion for all KiwiTri sites.
   Every hidden state is gated behind html.km-on (set by km-motion.js), so pages stay readable if the script never loads. */
:root{--km-accent:#e10600;--km-ink:#141210;--km-ease:cubic-bezier(.2,.8,.2,1);--km-pop:cubic-bezier(.3,1.6,.5,1)}

/* scroll reveal + stagger */
.km-on [data-km~="reveal"]{opacity:0;transform:translateY(22px);transition:opacity .75s ease var(--km-d,0ms),transform .85s var(--km-ease) var(--km-d,0ms)}
.km-on [data-km~="reveal"].km-in{opacity:1;transform:none}
.km-on [data-km~="stagger"]>*{opacity:0;transform:translateY(18px) scale(.97);transition:opacity .7s ease var(--km-d,0ms),transform .8s var(--km-ease) var(--km-d,0ms)}
.km-on [data-km~="stagger"].km-in>*{opacity:1;transform:none}

/* 14 blur-in headline */
.km-w{display:inline-block;white-space:pre}
.km-on [data-km~="blur"] .km-w{opacity:0;filter:blur(12px);transform:translateY(14px);transition:opacity .7s ease,filter .8s ease,transform .8s var(--km-ease);transition-delay:var(--km-d,0ms)}
.km-on [data-km~="blur"].km-in .km-w{opacity:1;filter:none;transform:none}
.km-uline{position:relative;display:inline-block}
.km-uline:after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.16em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 50 2, 120 2, 198 7' fill='none' stroke='%23e10600' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.6,0,.2,1) .9s}
.km-in .km-uline:after,.km-uline.km-in:after{clip-path:inset(0 0 0 0)}

/* 01 word swap */
.km-swap{display:inline-flex;vertical-align:bottom;overflow:hidden;height:1.12em;line-height:1.12em;border-radius:.22em;padding:0 .18em;background:var(--km-swap-bg,rgba(225,6,0,.12));color:var(--km-swap-fg,var(--km-accent));transition:width .45s var(--km-ease)}
.km-swap>span{display:block;animation:kmSwapIn .55s var(--km-ease)}
@keyframes kmSwapIn{from{transform:translateY(100%);opacity:0}}

/* 04 number roll */
.km-roll{display:inline-flex;align-items:baseline}
.km-dig{display:inline-block;height:1em;line-height:1em;overflow:hidden;vertical-align:baseline}
.km-dig>span{display:flex;flex-direction:column;transition:transform 1.4s var(--km-ease) var(--km-d,0ms)}
.km-dig>span>i{font-style:normal;height:1em;line-height:1em}

/* 05 marquee */
.km-marq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.km-marq-t{display:flex;flex:none;gap:var(--km-gap,40px);padding-right:var(--km-gap,40px);align-items:center;animation:kmMarq var(--km-speed,36s) linear infinite}
.km-marq:hover .km-marq-t{animation-play-state:paused}
@keyframes kmMarq{to{transform:translateX(-100%)}}

/* 10 spotlight cards */
.km-spot{position:relative;isolation:isolate}
.km-spot:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--km-glow,rgba(225,6,0,.10)),transparent 60%)}
.km-spot:hover:before{opacity:1}

/* 15 confetti */
.km-confetti{position:fixed;left:0;top:0;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:9999;animation:kmConf .95s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes kmConf{0%{transform:translate(var(--sx),var(--sy)) rotate(0);opacity:1}100%{transform:translate(calc(var(--sx) + var(--x)),calc(var(--sy) + var(--y))) rotate(var(--r));opacity:0}}

/* 08 review deck */
.km-deck{position:relative;min-height:var(--km-deck-h,210px)}
.km-deck>*{position:absolute!important;left:0;right:0;top:0;transition:transform .7s var(--km-ease),opacity .7s ease;transform:translateY(calc(var(--i) * 12px)) scale(calc(1 - var(--i) * .045));z-index:calc(10 - var(--i));opacity:calc(1 - var(--i) * .22)}
.km-deck>.km-out{transform:translateX(115%) rotate(9deg)!important;opacity:0!important}

/* 02 live order feed */
.km-feed{background:#fff;color:#141210;border-radius:22px;padding:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);border:1px solid #ece6dc;font:500 14px/1.4 Inter,system-ui,sans-serif;max-width:360px}
.km-feed-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.km-feed-h small{display:flex;align-items:center;gap:6px;font-size:12px;color:#16a34a;font-weight:700}.km-feed-h small:before{content:"";width:8px;height:8px;border-radius:50%;background:#16a34a;animation:kmPulse 1.6s infinite}
@keyframes kmPulse{50%{box-shadow:0 0 0 6px rgba(22,163,74,0)}0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}}
.km-feed-t{font:800 32px/1 "Bricolage Grotesque",Inter,sans-serif;letter-spacing:-.02em}
.km-feed-d{display:inline-block;margin-left:8px;font-size:13px;font-weight:800;color:#16a34a;opacity:0}.km-feed-d.go{animation:kmDelta 1.4s ease}
@keyframes kmDelta{15%,70%{opacity:1;transform:translateY(-4px)}100%{opacity:0}}
.km-feed-l{display:grid;gap:8px;margin-top:12px}
.km-feed-r{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;background:#f6f3ee;border-radius:12px;padding:9px 10px;animation:kmRowIn .5s var(--km-ease)}
.km-feed-r i{width:34px;height:34px;border-radius:10px;background:var(--km-accent);color:#fff;font-style:normal;display:grid;place-items:center;font-weight:800;font-size:13px}
.km-feed-r b{display:block;font-size:13.5px}.km-feed-r small{font-size:12px;color:#7a7268}.km-feed-r em{font-style:normal;font-weight:800}
.km-feed-x{margin-top:10px;font-size:11px;color:#9a9186;text-align:right}
@keyframes kmRowIn{from{opacity:0;transform:translateY(-12px)}}

/* 07 AI chat reply */
.km-chat{background:#fff;color:#141210;border-radius:22px;padding:18px;border:1px solid #ece6dc;box-shadow:0 30px 60px -30px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:10px;min-height:var(--km-chat-h,260px);font:500 14.5px/1.5 Inter,system-ui,sans-serif;max-width:460px}
.km-chat-top{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#7a7268;padding-bottom:8px;border-bottom:1px solid #f0ebe3}
.km-chat-top i{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#7c3aed,var(--km-accent));display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px}
.km-b{max-width:86%;padding:10px 14px;border-radius:16px;animation:kmPopIn .4s var(--km-pop)}
.km-b.u{align-self:flex-end;background:var(--km-ink);color:#fff;border-bottom-right-radius:4px}
.km-b.a{align-self:flex-start;background:#f4f1ea;border-bottom-left-radius:4px}
.km-b.a .km-car{display:inline-block;width:2px;height:1em;background:var(--km-accent);vertical-align:-2px;margin-left:2px;animation:kmBlink 1s steps(1) infinite}
.km-dots{display:inline-flex;gap:4px;padding:12px 14px}.km-dots i{width:7px;height:7px;border-radius:50%;background:#a49b90;animation:kmBounce 1s infinite}.km-dots i:nth-child(2){animation-delay:.15s}.km-dots i:nth-child(3){animation-delay:.3s}
@keyframes kmBounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@keyframes kmBlink{50%{opacity:0}}
@keyframes kmPopIn{from{opacity:0;transform:translateY(8px) scale(.96)}}

/* 09 before / after */
.km-cmp{position:relative;overflow:hidden;border-radius:20px;user-select:none;touch-action:pan-y;--x:50%}
.km-cmp>.km-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.km-cmp-h{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.km-cmp-h:after{content:"⇆";position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;color:#141210;display:grid;place-items:center;font:700 18px/1 Inter,sans-serif;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.km-cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.km-cmp-tag{position:absolute;top:14px;padding:5px 11px;border-radius:99px;font:700 12px/1 Inter,sans-serif;background:rgba(0,0,0,.6);color:#fff;z-index:2}.km-cmp-tag.l{left:14px}.km-cmp-tag.r{right:14px;background:var(--km-accent)}

/* 06 path draw */
.km-on [data-km~="path"] path.km-draw{transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .2s}
.km-dot{offset-rotate:0deg;animation:kmAlong 3s linear infinite}
@keyframes kmAlong{from{offset-distance:0%}to{offset-distance:100%}}

/* 03 ghost cursor */
.km-cur-wrap{position:relative}
.km-cur{position:absolute;left:0;top:0;width:26px;height:26px;z-index:20;pointer-events:none;transition:transform 1.1s cubic-bezier(.45,0,.2,1);filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.km-cur.click{animation:kmClick .35s ease}
@keyframes kmClick{50%{scale:.82}}
.km-ripple{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid var(--km-accent);pointer-events:none;z-index:19;animation:kmRip .7s ease-out forwards}
@keyframes kmRip{from{transform:scale(.2);opacity:1}to{transform:scale(2.4);opacity:0}}
.km-hit{animation:kmHit .5s var(--km-pop)}
@keyframes kmHit{40%{transform:scale(.95)}}

/* 13 win table */
.km-on [data-km~="win"] tr{opacity:0;transform:translateX(-10px);transition:opacity .5s ease var(--km-d,0ms),transform .6s var(--km-ease) var(--km-d,0ms)}
.km-on [data-km~="win"].km-in tr{opacity:1;transform:none}
.km-on [data-km~="win"] .km-tick{display:inline-block;transform:scale(0);transition:transform .45s var(--km-pop) calc(var(--km-d,0ms) + 250ms)}
.km-on [data-km~="win"].km-in .km-tick{transform:scale(1)}

/* 12 flip (value changes slide in) */
.km-flip{display:inline-block;animation:kmFlip .45s var(--km-ease)}
@keyframes kmFlip{from{transform:translateY(60%);opacity:0;filter:blur(3px)}}

@media (prefers-reduced-motion:reduce){
  .km-on [data-km] ,.km-on [data-km] *{transition:none!important;animation:none!important}
  .km-on [data-km~="reveal"],.km-on [data-km~="stagger"]>*,.km-on [data-km~="blur"] .km-w,.km-on [data-km~="win"] tr{opacity:1!important;transform:none!important;filter:none!important}
  .km-marq-t,.km-dot,.km-cur{animation:none!important}.km-uline:after{clip-path:none}
}