/* KolabRiset — gerak. Satu momen utama di landing (judul tersingkap + peta menajam),
   tanda tangan "Relevansi" (angka menghitung + garis oker tergambar), dan transisi cepat di dashboard.
   Semua mati bila pengguna memilih "kurangi gerak". */
@property --progress { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Landing: momen utama ---------- */
  .hero h1 .kr-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
  .hero h1 .kr-line > span { display: inline-block; animation: kr-line-up .85s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 60ms); }
  .hero-content > p, .hero-actions, .trust-line, .hero-content .community-pill { animation: kr-fade-up .7s var(--ease-out) both; animation-delay: .42s; }
  .hero-actions { animation-delay: .52s; }
  .trust-line, .hero-content .community-pill { animation-delay: .62s; }
  .network-hero { animation: kr-focus 1.1s var(--ease-out) both; animation-delay: .2s; }
  .hero-visual::after { animation: kr-fade-up .6s var(--ease-out) both; animation-delay: 1s; }
  .site-header { animation: kr-fade-down .5s var(--ease-out) both; }

  /* ---------- Dashboard: kontinuitas ---------- */
  .view.active { animation: kr-view-in .34s var(--ease-out) both; }
  .kr-stagger > * { animation: kr-row-in .46s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
  .modal-backdrop.open .modal { animation: kr-modal .3s var(--ease-out) both; }
  .modal-backdrop.open { animation: kr-fade .2s ease-out both; }
  .account-dropdown:not([hidden]), .notification-dropdown:not([hidden]) { animation: kr-pop .2s var(--ease-out) both; }
  #activeChatWindow:not([hidden]) { animation: kr-pop .26s var(--ease-out) both; }
  .toast.show { animation: kr-pop .24s var(--ease-out) both; }

  /* ---------- Tanda tangan: Relevansi ---------- */
  .match-line b, .home-match-reason b, .entry-relevance b {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    padding-bottom: 1px;
    animation: kr-underline .8s var(--ease-out) forwards;
    animation-delay: .35s;
  }

  /* ---------- Umpan balik ---------- */
  :is(button, .create-button, .save-button, .outline-button, .mini-button, .primary-button):active:not(:disabled) { transform: scale(.97) !important; transition: transform .1s ease-out !important; }
  .sidebar nav button .nav-svg { transition: transform .2s var(--ease-out); }
  .sidebar nav button:hover .nav-svg { transform: translateX(2px); }
  .completion-ring { transition: --progress 1.1s var(--ease-out); }
  .profile-hero-meter b, .stats-bar span { transition: width .9s var(--ease-out), height .9s var(--ease-out); }
}

@keyframes kr-line-up { from { transform: translateY(108%); } }
@keyframes kr-fade-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes kr-fade-down { from { opacity: 0; transform: translateY(-8px); } }
@keyframes kr-focus { from { opacity: 0; filter: blur(14px) saturate(.6); transform: scale(.985); } }
@keyframes kr-view-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes kr-row-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes kr-modal { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes kr-fade { from { opacity: 0; } }
@keyframes kr-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes kr-underline { to { background-size: 100% 1.5px; } }

@media (prefers-reduced-motion: no-preference) {
  /* Masuk/Daftar & Tentang: masuk halus, satu kali */
  .story-copy h1 { animation: kr-fade-up .8s var(--ease-out) both; animation-delay: .1s; }
  .story-copy p, .story-proof { animation: kr-fade-up .7s var(--ease-out) both; animation-delay: .3s; }
  .auth-card { animation: kr-fade-up .7s var(--ease-out) both; animation-delay: .2s; }
  .hero-copy > * { animation: kr-fade-up .7s var(--ease-out) both; }
  .hero-copy > *:nth-child(2) { animation-delay: .12s; }
  .hero-copy > *:nth-child(3) { animation-delay: .24s; }
  .hero-mark .network { animation: kr-focus 1s var(--ease-out) both; animation-delay: .2s; }
  .auth-form [data-panel]:not([hidden]), .auth-form fieldset:not([hidden]) { animation: kr-fade .25s ease-out both; }
}