/* ==========================================================================
   Yani Dashboard — Motion Layer
   Lightweight, dependency-free animations for the Livewire dashboard.
   Pairs with public/js/motion.js (scroll reveal, stagger, count-up).

   Design rules:
   - Entrance animations only run during initial page load (body.page-enter),
     so Livewire DOM updates never re-trigger them.
   - Hover/press micro-interactions are always on.
   - Everything respects prefers-reduced-motion.
   ========================================================================== */

:root {
  --anim-duration-fast: 160ms;
  --anim-duration: 320ms;
  --anim-duration-slow: 520ms;
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);      /* ease-out-quint-ish */
  --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes yaniFadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes yaniFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes yaniScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes yaniSlideInRight {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes yaniShimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

/* --------------------------------------------------------------------------
   Page-load entrance cascade
   body.page-enter is added by motion.js on load and removed once finished,
   so Livewire re-renders never replay these.
   -------------------------------------------------------------------------- */
body.page-enter .card {
  animation: yaniFadeInUp var(--anim-duration-slow) var(--anim-ease) both;
}
/* Cascade: stagger the first cards on the page */
body.page-enter .card:nth-of-type(1) { animation-delay: 40ms; }
body.page-enter .card:nth-of-type(2) { animation-delay: 100ms; }
body.page-enter .card:nth-of-type(3) { animation-delay: 160ms; }
body.page-enter .card:nth-of-type(4) { animation-delay: 220ms; }
body.page-enter .card:nth-of-type(5) { animation-delay: 280ms; }
body.page-enter .card:nth-of-type(n + 6) { animation-delay: 320ms; }

/* Sidebar items slide in one by one */
body.page-enter .sidenav .nav-item {
  animation: yaniSlideInRight var(--anim-duration) var(--anim-ease) both;
}
body.page-enter .sidenav .nav-item:nth-child(1)  { animation-delay: 30ms; }
body.page-enter .sidenav .nav-item:nth-child(2)  { animation-delay: 60ms; }
body.page-enter .sidenav .nav-item:nth-child(3)  { animation-delay: 90ms; }
body.page-enter .sidenav .nav-item:nth-child(4)  { animation-delay: 120ms; }
body.page-enter .sidenav .nav-item:nth-child(5)  { animation-delay: 150ms; }
body.page-enter .sidenav .nav-item:nth-child(6)  { animation-delay: 180ms; }
body.page-enter .sidenav .nav-item:nth-child(7)  { animation-delay: 210ms; }
body.page-enter .sidenav .nav-item:nth-child(8)  { animation-delay: 240ms; }
body.page-enter .sidenav .nav-item:nth-child(n + 9) { animation-delay: 270ms; }

/* --------------------------------------------------------------------------
   Micro-interactions (always on)
   -------------------------------------------------------------------------- */
/* Cards lift slightly on hover */
.card {
  transition: transform var(--anim-duration-fast) var(--anim-ease),
              box-shadow var(--anim-duration-fast) var(--anim-ease);
}
.card:hover {
  transform: translateY(-2px);
}

/* Buttons: subtle press-down feel */
.btn {
  transition: transform var(--anim-duration-fast) var(--anim-ease),
              box-shadow var(--anim-duration-fast) var(--anim-ease),
              background-color var(--anim-duration-fast) ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }

/* Table rows highlight smoothly */
.table tbody tr {
  transition: background-color var(--anim-duration-fast) ease,
              transform var(--anim-duration-fast) var(--anim-ease);
}
.table-hover tbody tr:hover { transform: translateX(2px); }

/* Sidebar links */
.sidenav .nav-link {
  transition: transform var(--anim-duration-fast) var(--anim-ease),
              background-color var(--anim-duration-fast) ease;
}
.sidenav .nav-link:hover { transform: translateX(3px); }

/* Modals pop in (Bootstrap) */
.modal.fade .modal-dialog {
  transition: transform var(--anim-duration) var(--anim-ease-spring),
              opacity var(--anim-duration) ease;
  transform: scale(0.95) translateY(10px);
}
.modal.fade.show .modal-dialog { transform: scale(1) translateY(0); }

/* Dropdown menus */
.dropdown-menu {
  transition: transform var(--anim-duration-fast) var(--anim-ease),
              opacity var(--anim-duration-fast) ease;
}

/* --------------------------------------------------------------------------
   Opt-in utilities (add to any element)
   -------------------------------------------------------------------------- */
.anim-fade-up   { animation: yaniFadeInUp var(--anim-duration-slow) var(--anim-ease) both; }
.anim-fade-in   { animation: yaniFadeIn var(--anim-duration) ease both; }
.anim-scale-in  { animation: yaniScaleIn var(--anim-duration) var(--anim-ease-spring) both; }

/* Scroll reveal — element hidden until motion.js flips .is-visible.
   Optional per-element delay: data-reveal-delay="300" (ms). */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--anim-duration-slow) var(--anim-ease),
              transform var(--anim-duration-slow) var(--anim-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children — motion.js assigns --i per child */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--anim-duration-slow) var(--anim-ease),
              transform var(--anim-duration-slow) var(--anim-ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Loading skeleton shimmer — use with wire:loading blocks */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #eceef1;
  border-radius: 8px;
  color: transparent !important;
  background-image: linear-gradient(90deg, #eceef1 0px, #f7f8fa 60px, #eceef1 120px);
  background-size: 400px 100%;
  animation: yaniShimmer 1.3s infinite linear;
}

/* Livewire loading states fade instead of popping */
[wire\:loading], [wire\:loading\.delay] { transition: opacity var(--anim-duration-fast) ease; }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; }
}