/* ===== Lkhlas motion layer =====
   Page entrances, living details and the "paid" celebration.
   Everything is switched off for people who ask their device for less motion. */

/* 1. Page entrances: cards, stat cells and list rows rise in one after another */
@keyframes lk-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.lk-enter {
  animation: lk-rise .5s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--lk-i, 0) * 55ms);
}

/* 2. Living details */
/* Stat cells lift a little on hover */
.cell { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.cell:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(20, 27, 52, .35); }

/* Primary buttons glow orange on hover and press in on click */
.btn.primary { transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px -6px rgba(255, 90, 31, .65); }
.btn:active:not(:disabled) { transform: scale(.97); }

/* Late members: the badge's dot pulses red */
@keyframes lk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(248, 113, 113, .75); }
  70%  { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}
.tag.bad::before { animation: lk-pulse 1.8s ease-out infinite; }

/* Expiring soon: a slow amber breathing */
@keyframes lk-breathe { 50% { filter: brightness(1.08) saturate(1.15); } }
.tag.warn { animation: lk-breathe 2.6s ease-in-out infinite; }

/* Active menu item: the orange bar grows in, the icon turns orange */
@keyframes lk-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.nav-link.active::before { animation: lk-bar .3s cubic-bezier(.2, .8, .2, 1) both; }
.nav-link.active [data-icon] { color: var(--orange, #FF5A1F); transition: color .2s; }
.nav-link [data-icon] { transition: transform .2s ease; }
.nav-link:hover [data-icon] { transform: scale(1.12); }

/* Toast slides up with a small bounce */
.toast.show { transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }

/* 3. "Paid" celebration */
.lk-celebrate {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.lk-celebrate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lk-badge {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 30px;
  background: #141B34;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 8px rgba(255, 90, 31, .18), 0 24px 60px -12px rgba(255, 90, 31, .6);
  animation: lk-pop 1.5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.lk-badge svg { width: 84px; height: 84px; }
.lk-badge .lk-check { stroke-dasharray: 120; stroke-dashoffset: 120; animation: lk-draw .45s .18s ease-out forwards; }
@keyframes lk-pop {
  0%   { opacity: 0; transform: scale(.3) rotate(-12deg); }
  25%  { opacity: 1; transform: scale(1.08) rotate(0); }
  35%  { transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9) translateY(-10px); }
}
@keyframes lk-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lk-enter, .tag.bad::before, .tag.warn, .nav-link.active::before, .lk-badge { animation: none !important; }
  .cell:hover, .btn.primary:hover:not(:disabled), .btn:active:not(:disabled) { transform: none !important; }
  .lk-celebrate canvas { display: none; }
}