/*!
 * micro-animations.css — Subtle motion layer for Naruto Monitor.
 *
 * Adds smooth page-load, scroll-reveal, hover, focus, dropdown, sidebar,
 * and button micro-interactions while preserving the existing design 1:1.
 *
 * Performance:
 *   • All animated properties are transform / opacity (GPU-composited).
 *   • prefers-reduced-motion: reduce disables every animation instantly.
 *   • No layout-triggering properties are transitioned.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   0. RESPECT USER MOTION PREFERENCES
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. PAGE-LOAD FADE-IN — elements slide up gently on first paint
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ma-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ma-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ma-fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ma-fade-left {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ma-fade-right {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ma-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Utility classes — add to any element */
.ma-fade-up    { animation: ma-fade-up   0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ma-fade-in    { animation: ma-fade-in   0.4s ease both; }
.ma-fade-down  { animation: ma-fade-down 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ma-fade-left  { animation: ma-fade-left 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ma-fade-right { animation: ma-fade-right 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ma-scale-in   { animation: ma-scale-in  0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Stagger delays — chain with .ma-d1, .ma-d2, … .ma-d10 */
.ma-d1  { animation-delay: 0.06s; }
.ma-d2  { animation-delay: 0.12s; }
.ma-d3  { animation-delay: 0.18s; }
.ma-d4  { animation-delay: 0.24s; }
.ma-d5  { animation-delay: 0.30s; }
.ma-d6  { animation-delay: 0.36s; }
.ma-d7  { animation-delay: 0.42s; }
.ma-d8  { animation-delay: 0.48s; }
.ma-d9  { animation-delay: 0.54s; }
.ma-d10 { animation-delay: 0.60s; }

/* ─────────────────────────────────────────────────────────────────────────────
   2. SCROLL-REVEAL — elements hidden until IntersectionObserver fires
   ───────────────────────────────────────────────────────────────────────────── */
.ma-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.ma-reveal.ma-visible {
  opacity: 1;
  transform: translateY(0);
}

.ma-reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.ma-reveal-left.ma-visible {
  opacity: 1;
  transform: translateX(0);
}

.ma-reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.ma-reveal-right.ma-visible {
  opacity: 1;
  transform: translateX(0);
}

.ma-reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.ma-reveal-scale.ma-visible {
  opacity: 1;
  transform: scale(1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. SIDEBAR NAV — smooth slide & glow on hover
   ───────────────────────────────────────────────────────────────────────────── */
.glass-sidebar nav a,
.glass-sidebar nav button {
  position: relative;
  transition: color 0.22s ease,
              background 0.22s ease,
              transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease;
}
.glass-sidebar nav a:hover,
.glass-sidebar nav button:hover {
  transform: translateX(4px);
}
.glass-sidebar nav a::before,
.glass-sidebar nav button::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-purple, #a855f7), var(--accent-pink, #d946ef));
  transform: translateY(-50%);
  transition: height 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
}
.glass-sidebar nav a:hover::before,
.glass-sidebar nav button:hover::before {
  height: 60%;
  opacity: 1;
}

/* Active nav item indicator — gentle pulse */
.glass-sidebar nav button[style*="background:var(--bg-tertiary)"]::before,
.glass-sidebar nav .nav-active::before {
  height: 60%;
  opacity: 1;
}

/* Sidebar slide-in on page load */
@keyframes ma-sidebar-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (min-width: 768px) {
  .glass-sidebar {
    animation: ma-sidebar-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. BUTTONS — smooth press & lift micro-interactions
   ───────────────────────────────────────────────────────────────────────────── */
/* Generic: all buttons get a subtle active press */
button, a.btn, [role="button"] {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease,
              opacity 0.18s ease,
              background 0.22s ease,
              border-color 0.22s ease,
              color 0.18s ease;
}
button:active, a.btn:active, [role="button"]:active {
  transform: scale(0.97);
}

/* .btn-glow already has hover transitions — add subtle active dip */
.btn-glow:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 12px rgba(129, 51, 227, 0.45) !important;
}

/* Ripple effect utility — add .ma-ripple to any button */
.ma-ripple {
  position: relative;
  overflow: hidden;
}
.ma-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
              rgba(168, 85, 247, 0.3) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  border-radius: inherit;
}
.ma-ripple:active::after {
  opacity: 1;
  transform: scale(2.5);
  transition: opacity 0s, transform 0s;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. INPUT FIELDS — smooth focus glow ring
   ───────────────────────────────────────────────────────────────────────────── */
input, textarea, select, .input-field {
  transition: border-color 0.25s ease,
              box-shadow 0.25s ease,
              background-color 0.25s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
}

/* Floating label animation (opt-in: wrap input in .ma-float-label) */
.ma-float-label {
  position: relative;
}
.ma-float-label label {
  position: absolute;
  left: 0.75rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #71717a);
  font-size: 0.875rem;
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: left center;
}
.ma-float-label input:focus ~ label,
.ma-float-label input:not(:placeholder-shown) ~ label {
  top: 0;
  transform: translateY(-50%) scale(0.8);
  color: var(--accent-purple, #a855f7);
  background: var(--bg-input, #0b0b18);
  padding: 0 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. DROPDOWN MENUS — smooth scale-in from top
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ma-dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* User dropdown, context menus, etc. */
#userDropdownMenuDash:not(.hidden),
.dropdown-menu:not(.hidden),
[data-dropdown]:not(.hidden) {
  animation: ma-dropdown-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. MODAL — enhance the existing scale-in with a smooth backdrop
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ma-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-overlay:not(.hidden) {
  animation: ma-backdrop-in 0.22s ease both;
}
/* Smooth content entrance — enhances existing transition */
.modal-overlay:not(.hidden) .modal-content {
  animation: ma-scale-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. STAT CARDS — stagger entrance on page load
   ───────────────────────────────────────────────────────────────────────────── */
.stat-card {
  /* Override existing transition to include opacity for entrance */
  transition: transform 0.25s ease,
              box-shadow 0.25s ease,
              opacity 0.4s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. MONITOR CARDS — smoother hover lift + shine effect
   ───────────────────────────────────────────────────────────────────────────── */
.monitor-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

/* Subtle shine sweep on hover */
.monitor-card-front {
  position: relative;
  overflow: hidden;
}
.monitor-card-front::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 85, 247, 0.06),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}
.monitor-card-flip-container:hover .monitor-card-front::before {
  left: 125%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. TOOLTIPS — smooth fade-in with slight lift
   ───────────────────────────────────────────────────────────────────────────── */
.tooltip-text {
  transition: opacity 0.22s ease,
              visibility 0.22s ease,
              transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transform: translateX(-50%) translateY(4px);
}
.tooltip-container:hover .tooltip-text {
  transform: translateX(-50%) translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. STATUS INDICATORS — smooth color transitions
   ───────────────────────────────────────────────────────────────────────────── */
.neon-green, .neon-red, .neon-yellow, .neon-gray {
  transition: box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* Status dot pulse — smoother than default animate-pulse */
@keyframes ma-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.88); }
}
.animate-pulse {
  animation: ma-status-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. TOGGLE SWITCH — smooth knob travel
   ───────────────────────────────────────────────────────────────────────────── */
.theme-toggle {
  transition: background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              transform 0.2s ease;
}
.theme-toggle:hover {
  transform: scale(1.03);
}
.theme-toggle:active {
  transform: scale(0.97);
}
.theme-toggle svg {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease;
}
.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. TOAST NOTIFICATIONS — smoother slide-in
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ma-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes ma-toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.95); }
}
.animate-slideIn {
  animation: ma-toast-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. SCROLLBAR — smooth appearance
   ───────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.2);
  border-radius: 4px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.4);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.15);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. TAB / SECTION SWITCHING — smooth content swap
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ma-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ma-tab-content {
  animation: ma-tab-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. GLASS PANEL — smoother hover transition
   ───────────────────────────────────────────────────────────────────────────── */
.glass-panel {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. HEADER — fade-down on page load
   ───────────────────────────────────────────────────────────────────────────── */
header, .main-content-with-sidebar > header {
  animation: ma-fade-down 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. BULK ACTION BAR — smooth slide-up from bottom
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ma-bar-up {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.bulk-action-bar.flex {
  animation: ma-bar-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. NUMBER COUNTERS — subtle scale bump when values update
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ma-count-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.ma-count-bump {
  animation: ma-count-bump 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   20. LINK HOVER — subtle underline slide
   ───────────────────────────────────────────────────────────────────────────── */
.ma-link-hover {
  position: relative;
  text-decoration: none;
}
.ma-link-hover::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--accent-purple, #a855f7), var(--accent-pink, #d946ef));
  border-radius: 1px;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ma-link-hover:hover::after {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   21. CHECKBOX / TOGGLE — smooth check mark
   ───────────────────────────────────────────────────────────────────────────── */
input[type="checkbox"] {
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}
input[type="checkbox"]:checked {
  animation: ma-scale-in 0.15s ease both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   22. SMOOTH SCROLL — page-wide
   ───────────────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ─────────────────────────────────────────────────────────────────────────────
   23. FOCUS-VISIBLE — subtle ring for keyboard navigation
   ───────────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.5);
  outline-offset: 2px;
  transition: outline-color 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   24. CONNECTION STATUS — smooth badge transitions
   ───────────────────────────────────────────────────────────────────────────── */
#connectionStatus {
  transition: background 0.3s ease,
              opacity 0.3s ease,
              transform 0.3s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   25. NODE INFO BANNER — slide down entrance
   ───────────────────────────────────────────────────────────────────────────── */
#nodeInfoBanner {
  animation: ma-fade-down 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   26. ALERT PILL — fade-in slide-down entrance + glow breathe on the dot
       Card hover: subtle scale lift + purple glow intensify
   ───────────────────────────────────────────────────────────────────────────── */

/* Keyframe: pop in with a gentle overshoot then settle */
@keyframes ma-alert-pill-in {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.82); }
  65%  { opacity: 1; transform: translateY(1px)  scale(1.04); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Keyframe: pulse the red dot so it keeps drawing the eye */
@keyframes ma-alert-dot-breathe {
  0%, 100% { box-shadow: 0 0 4px 0   rgba(239, 68, 68, 0.6); }
  50%       { box-shadow: 0 0 9px 3px rgba(239, 68, 68, 0.9); }
}

/* Keyframe: very soft glow ring on the whole pill */
@keyframes ma-alert-pill-glow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 8px 1px rgba(239, 68, 68, 0.18); }
}

/* Applied via JS when the badge becomes visible (display flips from none) */
.alert-notif-inner {
  /* entrance */
  animation:
    ma-alert-pill-in   0.38s cubic-bezier(0.22, 1, 0.36, 1) both,
    ma-alert-pill-glow 3.2s  ease-in-out 0.4s infinite;
  /* smooth hide */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* The pulsing indicator dot inside the pill */
.alert-notif-indicator {
  animation: ma-alert-dot-breathe 2s ease-in-out infinite;
}

/* Status badge cross-fade when monitor state changes */
[data-ref="statusBadge"] {
  transition: background  0.35s ease,
              border-color 0.35s ease,
              color        0.35s ease;
}
[data-ref="statusDot"] {
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

/* Card hover: smooth lift + sharper glow — reinforces the existing
   .monitor-card:hover rule without overriding its transform/box-shadow */
.monitor-card-flip-container {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.monitor-card-flip-container:hover .monitor-card-front {
  box-shadow: 0 16px 48px rgba(139, 92, 246, 0.55),
              0  4px 12px rgba(139, 92, 246, 0.20);
  transition: box-shadow 0.22s ease;
}