/* ============================================================
   USCAPE Hub — Engagement & Dopamine Design System
   Shared animations, transitions, and visual effects
   ============================================================ */

/* ----------------------------------------------------------
   1. TOAST NOTIFICATIONS
   ---------------------------------------------------------- */

/* Slide in from right */
.toast-enter {
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast-enter-start {
  opacity: 0;
  transform: translateX(1rem);
}
.toast-enter-end {
  opacity: 1;
  transform: translateX(0);
}
.toast-leave {
  transition: opacity 150ms ease, transform 150ms ease;
}
.toast-leave-start {
  opacity: 1;
  transform: translateX(0);
}
.toast-leave-end {
  opacity: 0;
  transform: translateX(1rem);
}

/* Celebration sparkle shimmer */
@keyframes toast-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.toast-celebration {
  background-image: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 215, 0, 0.08) 40%,
    rgba(255, 215, 0, 0.15) 50%,
    rgba(255, 215, 0, 0.08) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: toast-shimmer 2s ease-in-out;
}

/* ----------------------------------------------------------
   2. BUTTON STATES & MICRO-ANIMATIONS
   ---------------------------------------------------------- */

@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn-spinner {
  animation: spin 0.6s linear infinite;
}

/* SVG checkmark draw */
@keyframes checkmark-draw {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}
.checkmark-path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: checkmark-draw 0.3s ease-out forwards;
}

/* Button success pulse */
@keyframes success-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.btn-success-pulse {
  animation: success-pulse 0.6s ease-out;
}

/* Button shake (for delete confirmation) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.btn-shake {
  animation: shake 0.4s ease-out;
}

/* Scale-up on button success */
@keyframes scale-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.btn-scale-pop {
  animation: scale-pop 0.3s ease-out;
}

/* ----------------------------------------------------------
   3. FORM FIELD COMPLETION
   ---------------------------------------------------------- */

.field-complete {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
  border-color: #22c55e !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Field checkmark fade-in */
@keyframes field-check-in {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.field-check {
  animation: field-check-in 0.25s ease-out;
}

/* Number highlight flash (for calculated totals) */
@keyframes number-flash {
  0%   { background-color: rgba(34, 197, 94, 0.2); }
  100% { background-color: transparent; }
}
.number-flash {
  animation: number-flash 0.8s ease-out;
}

/* ----------------------------------------------------------
   4. PROGRESS BARS & RINGS
   ---------------------------------------------------------- */

@keyframes progress-fill {
  from { width: 0%; }
}
.progress-bar-animated {
  animation: progress-fill 0.8s ease-out;
}

/* Circular progress ring */
@keyframes ring-fill {
  from { stroke-dasharray: 0, 100; }
}
.progress-ring-animated {
  animation: ring-fill 1s ease-out forwards;
  transform-origin: center;
}

/* Step indicator pulse for active step */
@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.3); }
  50%      { box-shadow: 0 0 0 4px rgba(30, 58, 138, 0); }
}
.step-active-pulse {
  animation: step-pulse 2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   5. CONFETTI (CSS-only celebration)
   ---------------------------------------------------------- */

@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 99999;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  opacity: 0;
  will-change: transform, opacity;
}

.confetti-active .confetti-piece {
  animation: confetti-fall 2.5s ease-in forwards;
}

/* 20 confetti pieces with staggered timing, positions, colors */
.confetti-piece:nth-child(1)  { left: 5%;  background: #1F3864; border-radius: 50%; animation-delay: 0s;    animation-duration: 2.1s; }
.confetti-piece:nth-child(2)  { left: 12%; background: #2E75B6; border-radius: 2px; animation-delay: 0.05s; animation-duration: 2.4s; }
.confetti-piece:nth-child(3)  { left: 18%; background: #F59E0B; border-radius: 50%; animation-delay: 0.1s;  animation-duration: 2.0s; }
.confetti-piece:nth-child(4)  { left: 25%; background: #10B981; border-radius: 2px; animation-delay: 0.15s; animation-duration: 2.6s; }
.confetti-piece:nth-child(5)  { left: 32%; background: #EF4444; border-radius: 50%; animation-delay: 0.08s; animation-duration: 2.2s; }
.confetti-piece:nth-child(6)  { left: 38%; background: #8B5CF6; border-radius: 2px; animation-delay: 0.2s;  animation-duration: 2.3s; }
.confetti-piece:nth-child(7)  { left: 45%; background: #F59E0B; border-radius: 50%; animation-delay: 0.12s; animation-duration: 2.5s; }
.confetti-piece:nth-child(8)  { left: 52%; background: #1F3864; border-radius: 2px; animation-delay: 0.18s; animation-duration: 2.1s; }
.confetti-piece:nth-child(9)  { left: 58%; background: #2E75B6; border-radius: 50%; animation-delay: 0.06s; animation-duration: 2.7s; }
.confetti-piece:nth-child(10) { left: 65%; background: #10B981; border-radius: 2px; animation-delay: 0.22s; animation-duration: 2.0s; }
.confetti-piece:nth-child(11) { left: 72%; background: #EF4444; border-radius: 50%; animation-delay: 0.03s; animation-duration: 2.4s; }
.confetti-piece:nth-child(12) { left: 78%; background: #F59E0B; border-radius: 2px; animation-delay: 0.16s; animation-duration: 2.2s; }
.confetti-piece:nth-child(13) { left: 85%; background: #8B5CF6; border-radius: 50%; animation-delay: 0.09s; animation-duration: 2.6s; }
.confetti-piece:nth-child(14) { left: 92%; background: #1F3864; border-radius: 2px; animation-delay: 0.25s; animation-duration: 2.3s; }
.confetti-piece:nth-child(15) { left: 8%;  background: #2E75B6; border-radius: 50%; animation-delay: 0.14s; animation-duration: 2.5s; width: 6px; height: 6px; }
.confetti-piece:nth-child(16) { left: 22%; background: #10B981; border-radius: 2px; animation-delay: 0.07s; animation-duration: 2.1s; width: 10px; height: 6px; }
.confetti-piece:nth-child(17) { left: 42%; background: #F59E0B; border-radius: 50%; animation-delay: 0.19s; animation-duration: 2.4s; width: 6px; height: 6px; }
.confetti-piece:nth-child(18) { left: 55%; background: #EF4444; border-radius: 2px; animation-delay: 0.11s; animation-duration: 2.0s; width: 10px; height: 6px; }
.confetti-piece:nth-child(19) { left: 75%; background: #8B5CF6; border-radius: 50%; animation-delay: 0.23s; animation-duration: 2.6s; width: 6px; height: 6px; }
.confetti-piece:nth-child(20) { left: 88%; background: #1F3864; border-radius: 2px; animation-delay: 0.04s; animation-duration: 2.2s; width: 10px; height: 6px; }

/* ----------------------------------------------------------
   6. SKELETON LOADING
   ---------------------------------------------------------- */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.skeleton {
  background: #e5e7eb;
  border-radius: 0.375rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text {
  height: 0.875rem;
  margin-bottom: 0.5rem;
}

.skeleton-heading {
  height: 1.5rem;
  width: 60%;
  margin-bottom: 0.75rem;
}

.skeleton-card {
  height: 6rem;
  border-radius: 0.75rem;
}

/* ----------------------------------------------------------
   7. PAGE TRANSITIONS
   ---------------------------------------------------------- */

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: page-enter 0.2s ease-out;
}

/* Table row stagger animation */
@keyframes row-appear {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.row-stagger {
  opacity: 0;
  animation: row-appear 0.15s ease-out forwards;
}
.row-stagger:nth-child(1)  { animation-delay: 0ms; }
.row-stagger:nth-child(2)  { animation-delay: 30ms; }
.row-stagger:nth-child(3)  { animation-delay: 60ms; }
.row-stagger:nth-child(4)  { animation-delay: 90ms; }
.row-stagger:nth-child(5)  { animation-delay: 120ms; }
.row-stagger:nth-child(6)  { animation-delay: 150ms; }
.row-stagger:nth-child(7)  { animation-delay: 180ms; }
.row-stagger:nth-child(8)  { animation-delay: 210ms; }
.row-stagger:nth-child(9)  { animation-delay: 240ms; }
.row-stagger:nth-child(10) { animation-delay: 270ms; }

/* Fade out for deleted elements */
@keyframes fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}
.fade-out {
  animation: fade-out 0.2s ease-out forwards;
}

/* ----------------------------------------------------------
   8. ANIMATED NUMBERS
   ---------------------------------------------------------- */

.num-animate {
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------
   9. ACTIVITY FEED
   ---------------------------------------------------------- */

@keyframes feed-item-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.feed-item-enter {
  animation: feed-item-in 0.2s ease-out;
}

/* Activity feed timeline dot */
.feed-dot {
  position: relative;
}
.feed-dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: calc(100% + 0.75rem);
  background: #e5e7eb;
  transform: translateX(-50%);
}
.feed-dot:last-child::before {
  display: none;
}

/* ----------------------------------------------------------
   10. NUDGE CARDS
   ---------------------------------------------------------- */

@keyframes nudge-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nudge-card {
  animation: nudge-enter 0.3s ease-out;
}

/* ----------------------------------------------------------
   11. SIDEBAR / NAV TRANSITIONS
   ---------------------------------------------------------- */

.nav-link-active {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Badge pulse for attention-needed counts */
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.badge-attention {
  animation: badge-pulse 2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .toast-enter,
  .toast-leave {
    transition-duration: 0ms !important;
  }

  .btn-spinner,
  .checkmark-path,
  .btn-success-pulse,
  .btn-shake,
  .btn-scale-pop,
  .progress-bar-animated,
  .progress-ring-animated,
  .step-active-pulse,
  .toast-celebration,
  .skeleton,
  .page-enter,
  .row-stagger,
  .fade-out,
  .feed-item-enter,
  .nudge-card,
  .badge-attention {
    animation: none !important;
  }

  .row-stagger {
    opacity: 1 !important;
  }

  .confetti-active .confetti-piece {
    animation: none !important;
    opacity: 0 !important;
  }

  .field-complete {
    transition: none !important;
  }
}