/* ============================================================
   VIS UI — shared enhancement layer (progressive, non-invasive)
   Adds polish + interactive animation on top of existing markup.
   Theme-neutral: works on the dark admin and light login alike.
   Safe to remove: delete this file + the <link>/<script> include.
   ============================================================ */

/* ---- 1. Smooth global feel ---- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

a, button, .stat-card, .card,
[class*="rounded-xl"], [class*="rounded-2xl"] {
  transition-property: transform, box-shadow, background-color, border-color, color, opacity;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* ---- 2. Page fade-in on load ---- */
.vis-ready body { animation: visPageIn .5s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes visPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 3. Scroll reveal (class added by JS only -> progressive) ---- */
.vis-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.4, 0, .2, 1),
              transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
.vis-reveal.vis-in { opacity: 1; transform: none; }

/* ---- 4. Card hover lift ---- */
.stat-card:hover,
.card:hover { transform: translateY(-4px); }
.card:hover { box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .25); }

/* ---- 5. Button micro-interaction + ripple ---- */
button:not(:disabled):active,
a[onclick]:active { transform: scale(.97); }

.vis-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .45);
  pointer-events: none;
  animation: visRipple .6s ease-out;
}
@keyframes visRipple { to { transform: scale(2.6); opacity: 0; } }

/* ---- 6. Count-up number pop ---- */
.vis-count.vis-pop { animation: visPop .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes visPop {
  0% { transform: scale(.92); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ---- 7. Nicer focus ring (accessibility) ---- */
:focus-visible {
  outline: 2px solid rgba(99, 102, 241, .7);
  outline-offset: 2px;
}

/* ---- 8. Custom scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .5) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .75); background-clip: content-box; }

/* ---- 9. Skeleton shimmer helper (opt-in: .vis-skeleton) ---- */
.vis-skeleton {
  background: linear-gradient(90deg, rgba(148,163,184,.12) 25%, rgba(148,163,184,.28) 37%, rgba(148,163,184,.12) 63%);
  background-size: 400% 100%;
  animation: visShimmer 1.4s ease infinite;
  border-radius: .5rem;
}
@keyframes visShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- 10. Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, .vis-ready body, .vis-reveal { animation: none !important; transition: none !important; }
  .vis-reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}