/* ============================================================
   KamaiKart — Motion layer
   Entrance reveals, hover micro-interactions, ambient motion.
   Loaded after the other stylesheets. All non-essential motion
   is disabled under prefers-reduced-motion.
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

/* ---- Never underline UI links/buttons on hover (kills the leaked a:hover underline) ---- */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
.kk-btn, .kk-btn:hover, .kk-btn:focus,
.lp-nav__link, .lp-nav__link:hover,
.kk-snav__item, .kk-menu__item, .lp-footer__col a, .lp-crumb a { text-decoration: none; }

/* ---- keyframes ---- */
@keyframes animFadeUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes animFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes animFadeRight{ from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes animFadeLeft { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes animZoom     { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes animFloat    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes animBlob     { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,16px) scale(1.08); } }
@keyframes animPulse    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes animSheen    { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(220%); } }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Scroll reveal ---------- */
  .lp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
  .lp-reveal.is-in { opacity: 1; transform: none; }

  /* staggered children inside a revealed block (also when the grid itself is the reveal target) */
  .lp-reveal.is-in :is(.lp-cardgrid,.lp-quotes,.lp-features,.lp-statline,.lp-plans__cards,.lp-steps) > *,
  :is(.lp-cardgrid,.lp-quotes,.lp-features,.lp-statline,.lp-plans__cards,.lp-steps).lp-reveal.is-in > * { animation: animFadeUp .55s both; }
  :is(.lp-cardgrid,.lp-quotes,.lp-features,.lp-statline,.lp-plans__cards,.lp-steps) > *:nth-child(1) { animation-delay: .04s; }
  :is(.lp-cardgrid,.lp-quotes,.lp-features,.lp-statline,.lp-plans__cards,.lp-steps) > *:nth-child(2) { animation-delay: .10s; }
  :is(.lp-cardgrid,.lp-quotes,.lp-features,.lp-statline,.lp-plans__cards,.lp-steps) > *:nth-child(3) { animation-delay: .16s; }
  :is(.lp-cardgrid,.lp-quotes,.lp-features,.lp-statline,.lp-plans__cards,.lp-steps) > *:nth-child(4) { animation-delay: .22s; }
  :is(.lp-cardgrid,.lp-quotes,.lp-features,.lp-statline,.lp-plans__cards,.lp-steps) > *:nth-child(5) { animation-delay: .28s; }
  :is(.lp-cardgrid,.lp-quotes,.lp-features,.lp-statline,.lp-plans__cards,.lp-steps) > *:nth-child(6) { animation-delay: .34s; }

  /* ---------- Hero entrance (after preloader → body.lp-ready) ---------- */
  .lp-hero__title, .lp-hero__lead, .lp-hero__cta, .lp-hero__visual { opacity: 0; }
  body.lp-ready .lp-hero__title  { animation: animFadeUp .65s .05s both; }
  body.lp-ready .lp-hero__lead   { animation: animFadeUp .65s .18s both; }
  body.lp-ready .lp-hero__cta    { animation: animFadeUp .65s .30s both; }
  body.lp-ready .lp-hero__visual { animation: animFadeRight .8s .22s both; }

  /* page hero (inner pages) */
  body.lp-ready .lp-pagehero__in > * { animation: animFadeUp .6s both; }
  body.lp-ready .lp-pagehero__in > *:nth-child(2) { animation-delay: .1s; }
  body.lp-ready .lp-pagehero__in > *:nth-child(3) { animation-delay: .2s; }

  /* ---------- Ambient motion ---------- */
  .lp-phone { animation: animFloat 5.5s ease-in-out infinite; }
  .lp-hero::after  { animation: animBlob 16s ease-in-out infinite; }
  .lp-hero::before { animation: animBlob 20s ease-in-out infinite reverse; }
  .lp-pagehero::after  { animation: animBlob 18s ease-in-out infinite; }
  .lp-pagehero::before { animation: animBlob 22s ease-in-out infinite reverse; }

  /* ---------- Authenticated panel content fade-in ---------- */
  .kk-content > * { animation: animFadeUp .5s both; }
  .kk-content > *:nth-child(1) { animation-delay: .02s; }
  .kk-content > *:nth-child(2) { animation-delay: .08s; }
  .kk-content > *:nth-child(3) { animation-delay: .14s; }
  .kk-content > *:nth-child(4) { animation-delay: .20s; }
  .kk-content > *:nth-child(5) { animation-delay: .26s; }
}

/* ---------- Hover micro-interactions (smooth, consistent easing) ---------- */
:root { --ease-out: cubic-bezier(.2,.7,.2,1); }

.kk-btn {
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out),
              color .2s var(--ease-out), box-shadow .25s var(--ease-out), transform .2s var(--ease-out);
}
.kk-btn:hover { transform: translateY(-2px); }
.kk-btn--primary:hover { box-shadow: 0 8px 20px rgba(28,79,194,.28); }
.kk-btn--accent:hover  { box-shadow: 0 10px 22px rgba(244,122,31,.34); }
.kk-btn--gold:hover    { box-shadow: 0 8px 20px rgba(245,162,26,.32); }
.kk-btn--secondary:hover, .kk-btn--ghost:hover { box-shadow: var(--shadow-sm); }
.kk-btn:active { transform: translateY(0); transition-duration: .05s; }

/* marketing cards — gentle lift */
.lp-infocard, .lp-plan, .lp-feature, .lp-quote, .lp-contact__item, .lp-statline__item {
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s var(--ease-out);
}
.lp-feature:hover, .lp-contact__item:hover, .lp-statline__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.lp-infocard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.lp-plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.lp-quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* panel cards & app surfaces — subtle, no jumpiness while interacting */
.kk-card { transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.kk-card:hover { box-shadow: var(--shadow-md); }
.kk-stat { transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.kk-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kk-table--hover tbody tr { transition: background .18s var(--ease-out); }
.kk-snav__item, .kk-menu__item, .lp-footer__col a, .lp-crumb a, .lp-nav__link { transition: color .18s var(--ease-out), background .18s var(--ease-out); }

/* membership/marketing photos breathe slightly on hover */
.lp-split__img img, .lp-partner__photo img, .lp-hero__photo img { transition: transform .5s var(--ease-out); }
.lp-split__img:hover img, .lp-partner__photo:hover img { transform: scale(1.04); }

/* step & icon flourishes */
.lp-step__ico, .lp-infocard__ico, .lp-stat__ico { transition: transform .25s ease; }
.lp-step:hover .lp-step__ico { transform: translateY(-4px) scale(1.06); }
.lp-infocard:hover .lp-infocard__ico { transform: scale(1.08) rotate(-3deg); }
.lp-stat:hover .lp-stat__ico { transform: scale(1.08); }

/* nav links — animated underline */
.lp-nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2.5px;
  background: var(--blue-600); border-radius: 3px; transition: right .22s ease;
}
.lp-nav__link:hover::after { right: 0; }
.lp-nav__link.is-active::after { right: 0; }

/* footer social pop */
.lp-footer__social a { transition: transform .18s ease, filter .18s ease; }
.lp-footer__social a:hover { transform: translateY(-3px) scale(1.08); filter: brightness(1.08); }

/* stat counter: hide the raw value until JS formats it in (avoids flash of full number) */
.lp-stat__num.is-counting, .lp-statline__num.is-counting { opacity: 1; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .lp-reveal { opacity: 1 !important; transform: none !important; }
  .lp-hero__title, .lp-hero__lead, .lp-hero__cta, .lp-hero__visual { opacity: 1 !important; }
  .kk-btn:hover, .kk-card:hover, .kk-stat:hover,
  .lp-plan:hover, .lp-feature:hover, .lp-quote:hover, .lp-infocard:hover,
  .lp-contact__item:hover, .lp-statline__item:hover { transform: none !important; }
  .lp-split__img:hover img, .lp-partner__photo:hover img { transform: none !important; }
}