/* نادي الروّاد — Dashboard motion library.
   Two kinds of motion: «signal» (something changed — flash, pulse, counters)
   and «polish» (entrances, hover). Interactions stay under 400ms. */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeInSide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.92) translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes rowHighlight { from { background: color-mix(in srgb, var(--gold-400) 32%, transparent); } to { background: transparent; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-fill) 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
@keyframes shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sheen { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(230%) skewX(-18deg); } }

/* Page entrance: header, then each block in turn */
.page-header { animation: fadeInUp .5s var(--ease) both; }
.content > .filter-bar, .content > .status-tabs { animation: fadeInUp .5s var(--ease) .06s both; }
.content > .card, .content > form, .content > .grid, .content > .teacher-grid, .content > .tax-tabs { animation: fadeInUp .55s var(--ease) .12s both; }
.animate-in > * { animation: fadeInUp .55s var(--ease) both; }
.animate-in > *:nth-child(1) { animation-delay: .05s; }
.animate-in > *:nth-child(2) { animation-delay: .10s; }
.animate-in > *:nth-child(3) { animation-delay: .15s; }
.animate-in > *:nth-child(4) { animation-delay: .20s; }
.animate-in > *:nth-child(5) { animation-delay: .25s; }
.animate-in > *:nth-child(6) { animation-delay: .30s; }
.animate-in > *:nth-child(7) { animation-delay: .35s; }
.animate-in > *:nth-child(8) { animation-delay: .40s; }
.animate-in > *:nth-child(n+9) { animation-delay: .45s; }

/* Table rows cascade in */
.data-table tbody tr { animation: fadeInSide .4s var(--ease) both; }
.data-table tbody tr:nth-child(2) { animation-delay: .03s; } .data-table tbody tr:nth-child(3) { animation-delay: .06s; }
.data-table tbody tr:nth-child(4) { animation-delay: .09s; } .data-table tbody tr:nth-child(5) { animation-delay: .12s; }
.data-table tbody tr:nth-child(6) { animation-delay: .15s; } .data-table tbody tr:nth-child(7) { animation-delay: .18s; }
.data-table tbody tr:nth-child(n+8) { animation-delay: .21s; }

/* Sidebar items slide in once */
.sidebar-nav .nav-item { animation: fadeInSide .45s var(--ease) both; }
.sidebar-nav .nav-item:nth-of-type(2) { animation-delay: .03s; } .sidebar-nav .nav-item:nth-of-type(3) { animation-delay: .06s; }
.sidebar-nav .nav-item:nth-of-type(4) { animation-delay: .09s; } .sidebar-nav .nav-item:nth-of-type(5) { animation-delay: .12s; }
.sidebar-nav .nav-item:nth-of-type(n+6) { animation-delay: .15s; }
.nav-item .badge-count { animation: pulse 2.4s ease-in-out infinite; }

/* Hover lift for clickable cards */
.card:has(> a:only-child):hover, .teacher-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.row-new { animation: rowHighlight 1.6s ease; }

/* Skeleton shimmer while a card loads */
.skeleton {
  background: linear-gradient(100deg, var(--surface-sunken) 30%, color-mix(in srgb, var(--surface-line) 70%, var(--surface-raised)) 50%, var(--surface-sunken) 70%);
  background-size: 300% 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--radius-sm);
}

/* Sheen across primary buttons on hover */
.btn-primary::after, .btn-gold::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .28), transparent);
  transform: translateX(-130%) skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after, .btn-gold:hover::after { animation: sheen .7s var(--ease); }

/* A button busy with a request */
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--on-primary); border-inline-end-color: transparent; animation: spin .7s linear infinite; }

/* Reduced motion: keep feedback, drop travel */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}