/* Custom UI Animations and Keyframes */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(20, 184, 166, 0.2); }
  50% { box-shadow: 0 0 16px rgba(20, 184, 166, 0.45); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Helper Utilities */
.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-glow-pulse {
  animation: glowPulse 2s infinite ease-in-out;
}

/* Glassmorphism Panels */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

html[data-theme='dark'] .glass-panel {
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(30, 41, 59, 0.8);
}

/* Visual Timeline / Stepper Styles */
.stepper-line {
  position: relative;
}
.stepper-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--line);
  transform: translateY(-50%);
  z-index: 0;
}

.stepper-step {
  position: relative;
  z-index: 10;
}

/* Premium Card Scaling */
.premium-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08) !important;
  border-color: var(--brand) !important;
}

html[data-theme='dark'] .premium-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Custom Kanban styling */
.kanban-column {
  background-color: rgba(241, 245, 249, 0.6);
  transition: background-color 0.2s ease;
}
html[data-theme='dark'] .kanban-column {
  background-color: rgba(30, 41, 59, 0.4);
}
.kanban-column.drag-over {
  background-color: rgba(20, 184, 166, 0.08);
}