/**
 * Micro-Interactions & Animations
 * Delightful feedback for every interaction
 */

/* ========================================
   GENERAL TRANSITIONS
   ======================================== */

/* Smooth color transitions for interactive elements */
.dv-btn,
.dv-checkbox,
.dv-status,
.dv-table tbody tr,
.dv-card,
.dv-list-item {
  transition: 
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}

/* ========================================
   BUTTON INTERACTIONS
   ======================================== */

/* Button press effect */
.dv-btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Primary button hover glow */
.dv-btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

/* Danger button hover */
.dv-btn-danger:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

/* Icon button ripple effect */
.dv-icon-btn {
  position: relative;
  overflow: hidden;
}

.dv-icon-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(102, 126, 234, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.dv-icon-btn:active::after {
  width: 200%;
  height: 200%;
}

/* ========================================
   CHECKBOX ANIMATIONS
   ======================================== */

/* Custom checkbox with draw animation */
.dv-checkbox {
  position: relative;
  cursor: pointer;
}

.dv-checkbox::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background: var(--content-bg);
  transition: 
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.dv-checkbox:hover::before {
  border-color: var(--primary-color);
}

.dv-checkbox:active::before {
  transform: scale(0.9);
}

.dv-checkbox:checked::before {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.dv-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  animation: checkmark-draw 0.2s ease-out forwards;
}

@keyframes checkmark-draw {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

/* Success burst on task complete */
.dv-checkbox.celebrate:checked::before {
  animation: celebrate-pop 0.4s ease-out;
}

@keyframes celebrate-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ========================================
   STATUS BADGE ANIMATIONS
   ======================================== */

/* Status badge transitions */
.dv-status {
  transition: 
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

/* Pulse on status change */
.dv-status.status-changed {
  animation: status-pulse 0.4s ease-out;
}

@keyframes status-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ========================================
   ROW HIGHLIGHT ANIMATIONS
   ======================================== */

/* Row save highlight */
.dv-row-saved {
  animation: row-save-highlight 1.2s ease-out;
}

@keyframes row-save-highlight {
  0% { 
    background: rgba(16, 185, 129, 0.25);
    box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.3);
  }
  100% { 
    background: transparent;
    box-shadow: none;
  }
}

/* New row slide-in */
.dv-row-new {
  animation: row-slide-in 0.3s ease-out;
}

@keyframes row-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Row delete fade-out */
.dv-row-deleting {
  animation: row-delete 0.3s ease-out forwards;
}

@keyframes row-delete {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
    max-height: 0;
    padding: 0;
    margin: 0;
  }
}

/* Row hover lift effect */
.dv-card:hover,
.dv-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .dv-card:hover,
[data-theme="dark"] .dv-list-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ========================================
   MODAL ANIMATIONS
   ======================================== */

/* Modal backdrop blur */
.dv-modal {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dv-modal.dv-modal-visible {
  opacity: 1;
}

/* Modal content animation */
.dv-modal-content {
  transform: scale(0.95) translateY(-10px);
  opacity: 0;
  transition: 
    transform 0.2s ease,
    opacity 0.2s ease;
}

.dv-modal.dv-modal-visible .dv-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ========================================
   INPUT FOCUS ANIMATIONS
   ======================================== */

/* Input focus ring */
.dv-input,
.dv-form input,
.dv-form select,
.dv-form textarea {
  transition: 
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.dv-input:focus,
.dv-form input:focus,
.dv-form select:focus,
.dv-form textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
  outline: none;
}

/* ========================================
   LOADING ANIMATIONS
   ======================================== */

/* Skeleton shimmer */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--hover-bg) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    var(--hover-bg) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

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

/* Spinner with smooth rotation */
.dv-spinner,
.spinner {
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* Loading dots */
.loading-dots {
  display: inline-flex;
  gap: 4px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  background: var(--primary-color);
  border-radius: 50%;
  animation: loading-dot-bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0; }

@keyframes loading-dot-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ========================================
   TOOLTIP ANIMATIONS
   ======================================== */

/* Tooltip fade in */
.tooltip {
  opacity: 0;
  transform: translateY(4px);
  transition: 
    opacity 0.15s ease,
    transform 0.15s ease;
  pointer-events: none;
}

.tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   DROPDOWN ANIMATIONS
   ======================================== */

/* Dropdown slide down */
.dv-dropdown,
.dv-menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: 
    opacity 0.15s ease,
    transform 0.15s ease;
  pointer-events: none;
}

.dv-dropdown.open,
.dv-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ========================================
   DRAG & DROP ANIMATIONS
   ======================================== */

/* Dragging state */
.dv-dragging {
  opacity: 0.8;
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

/* Drop target highlight */
.dv-drop-target {
  box-shadow: inset 0 0 0 2px var(--primary-color);
  background: rgba(102, 126, 234, 0.1);
}

/* ========================================
   TOAST ANIMATIONS
   ======================================== */

/* Toast slide in from bottom */
.toast-container .toast {
  animation: toast-slide-in 0.3s ease-out;
}

@keyframes toast-slide-in {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Toast exit animation */
.toast-container .toast.toast-exit {
  animation: toast-slide-out 0.2s ease-in forwards;
}

@keyframes toast-slide-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

/* Toast progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  animation: toast-progress 4s linear forwards;
}

@keyframes toast-progress {
  0% { width: 100%; }
  100% { width: 0%; }
}

/* ========================================
   SCROLL REVEAL
   ======================================== */

/* Fade in on scroll */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: 
    opacity 0.5s ease,
    transform 0.5s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   FOCUS VISIBLE
   ======================================== */

/* Better focus indicators for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ========================================
   REDUCED MOTION
   ======================================== */

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}