/* ==========================================================================
   DOPAMINE UX — FL Studio-Style Animation System
   3 levels: off / subtle / ultra
   All animations use transform & opacity only (GPU-accelerated)
   Uses var(--accent) for glow colors
   ========================================================================== */

/* ==========================================================================
   Section 1: Variables & Timings
   ========================================================================== */

:root {
  --dop-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dop-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --dop-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dop-snappy: cubic-bezier(0.19, 1, 0.22, 1);
  --dop-stagger-base: 60ms;
}

/* ==========================================================================
   Section 2: Staggered Reveal (Page Entry)
   ========================================================================== */

[data-animations="subtle"] .dop-stagger,
[data-animations="ultra"] .dop-stagger {
  opacity: 0;
  transform: translateY(12px);
  animation: dop-fade-up 0.5s var(--dop-smooth) forwards;
}

/* Stagger delays via nth-child */
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(1),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(1) { animation-delay: calc(var(--dop-stagger-base) * 0); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(2),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(2) { animation-delay: calc(var(--dop-stagger-base) * 1); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(3),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(3) { animation-delay: calc(var(--dop-stagger-base) * 2); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(4),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(4) { animation-delay: calc(var(--dop-stagger-base) * 3); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(5),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(5) { animation-delay: calc(var(--dop-stagger-base) * 4); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(6),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(6) { animation-delay: calc(var(--dop-stagger-base) * 5); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(7),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(7) { animation-delay: calc(var(--dop-stagger-base) * 6); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(8),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(8) { animation-delay: calc(var(--dop-stagger-base) * 7); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(9),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(9) { animation-delay: calc(var(--dop-stagger-base) * 8); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(10),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(10) { animation-delay: calc(var(--dop-stagger-base) * 9); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(n+11),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(n+11) { animation-delay: calc(var(--dop-stagger-base) * 10); }

@keyframes dop-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Section 3: Card Interactions
   ========================================================================== */

/* Subtle — Hover lift + shadow */
[data-animations="subtle"] .card {
  transition: transform 0.25s var(--dop-smooth), box-shadow 0.25s var(--dop-smooth), border-color 0.25s ease;
}

[data-animations="subtle"] .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Disable card hover effects inside forms (static cards) */
[data-animations="subtle"] .card:has(form):hover,
[data-animations="subtle"] .card:has(.form-input):hover,
[data-animations="subtle"] .card:has(.form-textarea):hover,
[data-animations="subtle"] form .card:hover {
  transform: none;
  box-shadow: none;
}

/* Ultra — Lift + scale + accent glow */
[data-animations="ultra"] .card {
  transition: transform 0.3s var(--dop-spring), box-shadow 0.3s var(--dop-spring), border-color 0.3s ease;
}

[data-animations="ultra"] .card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.1),
    0 0 20px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Form cards in ultra: no zoom, soft accent glow instead */
[data-animations="ultra"] .card:has(form):hover,
[data-animations="ultra"] .card:has(.form-input):hover,
[data-animations="ultra"] .card:has(.form-textarea):hover,
[data-animations="ultra"] form .card:hover {
  transform: none;
  box-shadow:
    0 0 0 1px var(--accent-20, rgba(56, 178, 172, 0.2)),
    0 0 20px var(--accent-10, rgba(56, 178, 172, 0.1)),
    0 0 40px var(--accent-5, rgba(56, 178, 172, 0.05));
  border-color: var(--accent-20, rgba(56, 178, 172, 0.2));
}

/* Ultra — 3D tilt (applied via JS on .dop-tilt elements) */
[data-animations="ultra"] .dop-tilt {
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
}

/* ==========================================================================
   Section 4: Button Effects
   ========================================================================== */

/* Subtle — Lift + bounce-back */
[data-animations="subtle"] .btn {
  transition: transform 0.3s var(--dop-spring), box-shadow 0.3s var(--dop-spring), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

[data-animations="subtle"] .btn:hover {
  transform: translateY(-1px);
}

[data-animations="subtle"] .btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* Ultra — Glow + deep press + bounce-back */
[data-animations="ultra"] .btn {
  transition: transform 0.4s var(--dop-bounce), box-shadow 0.4s var(--dop-bounce), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

[data-animations="ultra"] .btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.1),
    0 0 15px color-mix(in srgb, var(--accent) 15%, transparent);
}

[data-animations="ultra"] .btn:active {
  transform: scale(0.94);
  transition-duration: 0.15s;
}

/* Ultra — Ripple effect */
[data-animations="ultra"] .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  pointer-events: none;
}

[data-animations="ultra"] .btn:active::after {
  opacity: 1;
  transform: scale(2.5);
  transition-duration: 0.1s, 0s;
}

/* Success state morphing */
[data-animations="subtle"] .dop-success,
[data-animations="ultra"] .dop-success {
  animation: dop-success-pulse 0.6s var(--dop-spring);
}

@keyframes dop-success-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   Section 5: Input Focus Effects
   ========================================================================== */

/* Subtle — Accent border + soft ring */
[data-animations="subtle"] .form-input:focus,
[data-animations="subtle"] input:focus,
[data-animations="subtle"] textarea:focus,
[data-animations="subtle"] select:focus {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Ultra — Accent border + pulsing glow */
[data-animations="ultra"] .form-input:focus,
[data-animations="ultra"] input:focus,
[data-animations="ultra"] textarea:focus,
[data-animations="ultra"] select:focus {
  animation: dop-focus-glow 2s ease-in-out infinite;
}

@keyframes dop-focus-glow {
  0%, 100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent),
                0 0 15px color-mix(in srgb, var(--accent) 10%, transparent);
  }
}

/* ==========================================================================
   Section 6: Navigation & Sidebar
   ========================================================================== */

/* Subtle — Active nav item with accent accent */
[data-animations="subtle"] .sidebar .sidebar-link {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-animations="subtle"] .sidebar .sidebar-link:hover {
  background-color: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Ultra — Slide-in hover background */
[data-animations="ultra"] .sidebar .sidebar-link {
  position: relative;
  overflow: hidden;
  transition: color 0.2s ease;
}

[data-animations="ultra"] .sidebar .sidebar-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--dop-snappy);
  pointer-events: none;
  z-index: 0;
}

[data-animations="ultra"] .sidebar .sidebar-link:hover::before {
  transform: scaleX(1);
}

[data-animations="ultra"] .sidebar .sidebar-link > * {
  position: relative;
  z-index: 1;
}

/* Ultra — Badge pulse */
[data-animations="ultra"] .sidebar .badge,
[data-animations="ultra"] .sidebar [data-badge] {
  animation: dop-badge-pulse 2s ease-in-out infinite;
}

@keyframes dop-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ==========================================================================
   Section 7: Toast / Flash Enhancements
   ========================================================================== */

/* Subtle — Spring entrance */
[data-animations="subtle"] .flash-message {
  animation: dop-toast-in 0.5s var(--dop-spring) forwards;
}

/* Ultra — Spring entrance with icon bounce */
[data-animations="ultra"] .flash-message {
  animation: dop-toast-in 0.5s var(--dop-spring) forwards;
}

[data-animations="ultra"] .flash-message .flash-message-icon {
  animation: dop-icon-bounce 0.6s var(--dop-bounce) 0.2s both;
}

@keyframes dop-toast-in {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes dop-icon-bounce {
  0% { transform: scale(0.5) rotate(-10deg); }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Stacked toasts offset (ultra) */
[data-animations="ultra"] .flash-message:nth-child(2) { animation-delay: 50ms; }
[data-animations="ultra"] .flash-message:nth-child(3) { animation-delay: 100ms; }

/* ==========================================================================
   Section 8: Number Counter Animation
   ========================================================================== */

/* Counter elements — animated by JS dopamine controller */
[data-animations="subtle"] .dop-counter,
[data-animations="ultra"] .dop-counter {
  display: inline-block;
}

/* ==========================================================================
   Section 9: Skeleton -> Content Crossfade
   ========================================================================== */

[data-animations="subtle"] .dop-skeleton-reveal,
[data-animations="ultra"] .dop-skeleton-reveal {
  animation: dop-reveal 0.4s var(--dop-smooth) forwards;
}

@keyframes dop-reveal {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   Section 10: Celebrations (Ultra only)
   ========================================================================== */

/* Confetti container */
.dop-celebration-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* Confetti particle */
.dop-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: dop-confetti-fall linear forwards;
}

@keyframes dop-confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg) scale(1);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg) scale(0.5);
    opacity: 0;
  }
}

/* Sparkle */
.dop-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: dop-sparkle 0.8s var(--dop-spring) forwards;
}

@keyframes dop-sparkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* Success ring */
[data-animations="ultra"] .dop-success-ring {
  animation: dop-success-ring 0.8s var(--dop-smooth) forwards;
}

@keyframes dop-success-ring {
  0% {
    transform: scale(0.5);
    opacity: 1;
    box-shadow: 0 0 0 0 var(--accent);
  }
  100% {
    transform: scale(1);
    opacity: 0;
    box-shadow: 0 0 0 30px transparent;
  }
}

/* ==========================================================================
   Section 11: Page Transitions (Morph)
   ========================================================================== */

/* Crossfade page transitions (Subtle + Ultra) */
.dop-page-exit {
  animation: dop-fade-out 0.15s ease forwards;
}

.dop-page-enter {
  animation: dop-fade-up 0.3s var(--dop-spring) forwards;
}

@keyframes dop-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Ultra — View Transitions API morph */
::view-transition-old(main-content) {
  animation: dop-morph-out 0.2s var(--dop-smooth);
}

::view-transition-new(main-content) {
  animation: dop-morph-in 0.3s var(--dop-spring);
}

::view-transition-old(sidebar) {
  animation: none;
}

::view-transition-new(sidebar) {
  animation: none;
}

::view-transition-old(header) {
  animation: none;
}

::view-transition-new(header) {
  animation: none;
}

@keyframes dop-morph-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes dop-morph-in {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   Section 12: Reduced Motion Override (Off Level)
   ========================================================================== */

[data-animations="off"] .dop-stagger,
[data-animations="off"] .dop-counter,
[data-animations="off"] .dop-tilt,
[data-animations="off"] .dop-skeleton-reveal {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-animations="off"] .card,
[data-animations="off"] .btn {
  transition-duration: 0.01ms !important;
}

[data-animations="off"] .flash-message {
  animation: none !important;
}

/* Also respect prefers-reduced-motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .dop-stagger,
  .dop-counter,
  .dop-tilt,
  .dop-skeleton-reveal,
  .flash-message,
  .dop-confetti,
  .dop-sparkle {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}