/* Movement layer. Levels: body.kh-m-lively (everything), .kh-m-calm (sections only, handled in look.php), .kh-m-off. */

/* ---- 1. blocks rise in one after another (classes are set by kh.js; without JS nothing is hidden) ---- */
.kh-mo .mo-w { opacity: 0; }
/* !important: the entrance must win over an element's own looping animation, or it would never end */
.kh-mo .mo-in { animation: khRise .75s cubic-bezier(.2, .75, .2, 1) var(--mo-d, 0ms) 1 both !important; }
.kh-mo .mo-in.mo-pop { animation-name: khPop !important; }
.kh-mo .mo-in.mo-side { animation-name: khSide !important; }
@keyframes khRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes khPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes khSide { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }

/* ---- 2. things glide when they change (the element that becomes active plays once) ---- */
.kh-m-lively :is(.kds-sl, .kfs-item, .kpz-sl, .khr-tx, .kfn-info, .krg-info, .kbw-pane, .kgf__step, .k2-save:not([hidden])).is-on,
.kh-m-lively .k2-save:not([hidden]) { animation: khSwap .5s cubic-bezier(.2, .75, .2, 1) both; }
.kh-m-lively .khr-sl.is-on img { animation: khFade .7s ease both, khKen 9s ease-out both; }
.kh-m-lively .krg-sl.is-on { animation: khSpinIn .6s cubic-bezier(.2, .75, .2, 1) both; }
.kh-m-lively .kpz-sl.is-on .kpz__img img, .kh-m-lively .kds-sl.is-on .kds__img img, .kh-m-lively .kfs-item.is-on .kfs__img img { animation: khZoomIn .6s cubic-bezier(.2, .75, .2, 1) both; }
.kh-m-lively .kfa-col.is-on .kfa-col__body { animation: khSwap .45s .12s cubic-bezier(.2, .75, .2, 1) both; }
.kh-m-lively .klb-row.is-top .klb-row__n { animation: khPop .45s cubic-bezier(.2, .75, .2, 1) both; }
@keyframes khSwap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes khFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes khKen { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes khZoomIn { from { opacity: 0; transform: scale(.9) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes khSpinIn { from { opacity: 0; transform: scale(.8) rotate(-14deg); } to { opacity: 1; transform: none; } }

/* ---- 3. small touches that keep moving ---- */
.kh-m-lively .krg__ring { animation: khBob 5s ease-in-out infinite; }
.kh-m-lively .kgf__box { animation: khWiggle 2.6s ease-in-out infinite; }
.kh-m-lively :is(.kds__badge, .kpz__badge) i { animation: khPing 1.8s ease-out infinite; }
.kh-m-lively :is(.khr__btn, .kfn__all, .klb__all, .kgf__btn, .kbw__cta) i svg { animation: khNudge 2.4s ease-in-out infinite; }
.kh-m-lively .k2-in__ic { animation: khTilt 3.4s ease-in-out infinite; }
.kh-m-lively .kfs-th.is-on, .kh-m-lively .kfn-th.is-on span, .kh-m-lively .k2-thumbs button.is-on { animation: khPop .35s cubic-bezier(.2, .75, .2, 1) both; }
@keyframes khBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes khWiggle { 0%, 60%, 100% { transform: rotate(0) scale(1); } 68% { transform: rotate(-7deg) scale(1.05); } 76% { transform: rotate(6deg) scale(1.05); } 84% { transform: rotate(-4deg); } 92% { transform: rotate(2deg); } }
@keyframes khPing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
@keyframes khNudge { 0%, 70%, 100% { transform: translate(0, 0); } 82% { transform: translate(3px, -3px); } }
[dir="rtl"] .kh-m-lively :is(.khr__btn, .kfn__all, .klb__all, .kgf__btn, .kbw__cta) i svg { animation: none; }
@keyframes khTilt { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-12deg); } 94% { transform: rotate(10deg); } }

/* ---- 4. everything you can press answers the finger ---- */
body:not(.kh-m-off) :is(.khr__search, .khr__chips a, .kd-cart, .kwp-add, .kwp-now, .khr__btn, .kgf__btn, .kfn__all, .klb__all, .krg__btn, .kbw__cta, .kh2__btn, .kh2__search, .kmn__it, .kmn__tg, .kmr__a, .kds__ar, .kpz__ar, .krg__ar, .kfn__ar, .khr__ar, .kbb-tab, .kbw-tab, .k2-dc, .k2-in, .kfa-col, .ktc-card, .kbb-card, .kwp-opt__v button, .kfs-th, .kfn-th) { transition: transform .18s ease, filter .18s ease; }
body:not(.kh-m-off) :is(.khr__search, .khr__chips a, .kd-cart, .kwp-add, .kwp-now, .khr__btn, .kgf__btn, .kfn__all, .klb__all, .krg__btn, .kbw__cta, .kh2__btn, .kh2__search, .kmn__it, .kmn__tg, .kmr__a, .kds__ar, .kpz__ar, .krg__ar, .kfn__ar, .khr__ar, .kbb-tab, .k2-dc, .k2-in, .ktc-card, .kbb-card, .kwp-opt__v button, .kfs-th, .kfn-th):active { transform: scale(.94); filter: brightness(1.15); }
.cart-count.is-bump, .kmn__n.is-bump { animation: khBump .5s cubic-bezier(.2, .75, .2, 1); }
@keyframes khBump { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }

/* ---- 5. the page itself arrives softly ---- */
.kh-m-lively #MainContent { animation: khFade .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  .kh-mo .mo-w { opacity: 1; }
  .kh-mo .mo-in, .kh-m-lively *, .kh-m-lively *::before, .kh-m-lively *::after { animation: none !important; }
}