/* ============================================================================
   Microinteractions System - Phase 46.6
   Hover Effects, Transitions, and Animations for All Components

   Includes:
   - Link and button hover states
   - Form input interactions (focus, hover, active)
   - Card and list item interactions
   - Loading, success, and error animations
   - Smooth transitions with easing functions
   - Accessibility-first design with prefers-reduced-motion support

   Updated: December 15, 2025
   ============================================================================ */

/* ============================================================================
   ANIMATION DEFINITIONS (with prefers-reduced-motion)
   ============================================================================ */

/* Fade animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Scale animations */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Slide animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-12px);
  }
}

/* Bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Spin animation for loading states */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Shimmer animation for loading skeleton */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Shake animation for error feedback */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-4px);
  }
}

/* Success checkmark animation */
@keyframes checkmark {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* ============================================================================
   ANIMATION UTILITY CLASSES
   ============================================================================ */

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-in-out;
}

.animate-scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-scale-out {
  animation: scaleOut 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-slide-up {
  animation: slideInUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-slide-down {
  animation: slideOutDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-slide-right {
  animation: slideInRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-slide-left {
  animation: slideOutLeft 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-bounce {
  animation: bounce 0.6s infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 25%,
    var(--color-bg-primary) 50%,
    var(--color-bg-secondary) 75%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ============================================================================
   LINK INTERACTIONS
   ============================================================================ */

a {
  transition: color 0.2s ease, text-decoration-color 0.2s ease,
              text-shadow 0.2s ease;
}

a:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

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

a:active {
  color: var(--color-primary-dark);
}

/* Link with underline decoration */
.link-underline {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.link-underline:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* ============================================================================
   FORM INPUT INTERACTIONS
   ============================================================================ */

/* Base input transition */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  transition: border-color 0.2s ease, background-color 0.2s ease,
              box-shadow 0.2s ease, outline-color 0.2s ease;
}

/* Input hover state */
input[type="text"]:hover:not(:disabled),
input[type="email"]:hover:not(:disabled),
input[type="password"]:hover:not(:disabled),
input[type="search"]:hover:not(:disabled),
input[type="number"]:hover:not(:disabled),
input[type="tel"]:hover:not(:disabled),
input[type="url"]:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) {
  border-color: var(--color-primary);
  background-color: var(--color-bg-primary);
}

/* Input focus state */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(199, 58, 72, 0.1);
  background-color: var(--color-bg-primary);
}

/* Input disabled state */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-bg-secondary);
}

/* Input error state */
input.error,
input[aria-invalid="true"],
textarea.error,
textarea[aria-invalid="true"],
select.error,
select[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: rgba(225, 29, 72, 0.05);
}

input.error:focus,
input[aria-invalid="true"]:focus,
textarea.error:focus,
textarea[aria-invalid="true"]:focus,
select.error:focus,
select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

/* Input success state */
input.success,
input[aria-invalid="false"],
textarea.success,
textarea[aria-invalid="false"],
select.success,
select[aria-invalid="false"] {
  border-color: var(--color-success);
  background-color: rgba(16, 185, 129, 0.05);
}

input.success:focus,
input[aria-invalid="false"]:focus,
textarea.success:focus,
textarea[aria-invalid="false"]:focus,
select.success:focus,
select[aria-invalid="false"]:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Checkbox and radio custom styling */
input[type="checkbox"],
input[type="radio"] {
  transition: all 0.2s ease;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  transform: scale(1.1);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================================
   BUTTON INTERACTIONS (Microinteractions)
   ============================================================================ */

/* All button states enhanced with smooth transitions */
.btn {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

/* Button ripple effect (subtle) */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.btn:active::before {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

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

/* Loading state */
.btn.is-loading {
  color: transparent;
  pointer-events: none;
  opacity: 0.8;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================================================
   CARD INTERACTIONS
   ============================================================================ */

.card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

.card:hover {
  transform: translateY(-2px);
}

/* Card link interaction */
a.card,
.card a {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.card:hover,
.card:has(a:hover) {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

a.card:active {
  transform: translateY(0);
}

/* Card header hover effect */
.card-header {
  transition: background-color 0.2s ease;
}

.card:hover .card-header {
  background-color: var(--color-bg-secondary);
}

/* Card title hover effect */
.card-title {
  transition: color 0.2s ease;
}

.card:hover .card-title {
  color: var(--color-primary);
}

/* ============================================================================
   LIST AND MENU ITEM INTERACTIONS
   ============================================================================ */

li,
.list-item,
.menu-item {
  transition: all 0.2s ease;
}

li:hover,
.list-item:hover,
.menu-item:hover {
  background-color: var(--color-bg-secondary);
}

/* Focus state for keyboard navigation */
li:focus-within,
.list-item:focus-within,
.menu-item:focus-within {
  background-color: var(--color-bg-secondary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Active/selected state */
li.active,
.list-item.active,
.menu-item.active {
  background-color: rgba(199, 58, 72, 0.08);
  color: var(--color-primary);
  font-weight: 500;
}

/* ============================================================================
   BADGE AND TAG INTERACTIONS
   ============================================================================ */

.badge,
.tag {
  transition: all 0.2s ease;
  display: inline-block;
}

.badge:hover,
.tag:hover {
  transform: scale(1.05);
}

.badge.closeable:hover,
.tag.closeable:hover {
  opacity: 0.8;
}

.badge button,
.tag button {
  transition: all 0.2s ease;
}

.badge button:hover,
.tag button:hover {
  transform: scale(1.2);
}

/* ============================================================================
   MODAL AND DIALOG INTERACTIONS
   ============================================================================ */

.modal,
.dialog {
  animation: slideInUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal.closing,
.dialog.closing {
  animation: slideOutDown 0.2s ease-out forwards;
}

/* Modal backdrop fade */
.modal-backdrop,
.dialog-backdrop {
  animation: fadeIn 0.3s ease-in-out;
  backdrop-filter: blur(2px);
}

.modal-backdrop.closing,
.dialog-backdrop.closing {
  animation: fadeOut 0.2s ease-out forwards;
}

/* ============================================================================
   ALERT AND NOTIFICATION INTERACTIONS
   ============================================================================ */

.alert,
.notification {
  animation: slideInRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.alert.dismissing,
.notification.dismissing {
  animation: slideOutLeft 0.2s ease-out forwards;
}

/* Alert close button */
.alert .close,
.notification .close {
  transition: all 0.2s ease;
  opacity: 0.6;
}

.alert .close:hover,
.notification .close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* Success state animation */
.alert-success,
.notification-success {
  border-left: 4px solid var(--color-success);
  animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Error state animation */
.alert-error,
.notification-error {
  border-left: 4px solid var(--color-error);
  animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.alert-error,
.notification-error {
  animation: slideInRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
             shake 0.5s ease 0.3s;
}

/* Warning state animation */
.alert-warning,
.notification-warning {
  border-left: 4px solid var(--color-warning);
  animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Info state animation */
.alert-info,
.notification-info {
  border-left: 4px solid var(--color-info);
  animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================================
   LOADING STATE INTERACTIONS
   ============================================================================ */

.skeleton {
  background-color: var(--color-bg-secondary);
  border-radius: 6px;
  animation: shimmer 2s infinite;
}

/* Loading spinner */
.loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Pulse effect for loading */
.loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================================================
   TRANSITION UTILITY CLASSES
   ============================================================================ */

/* Smooth transitions */
.transition {
  transition: all 0.3s ease;
}

.transition-fast {
  transition: all 0.15s ease;
}

.transition-slow {
  transition: all 0.5s ease;
}

.transition-color {
  transition: color 0.2s ease, background-color 0.2s ease;
}

.transition-transform {
  transition: transform 0.2s ease;
}

.transition-shadow {
  transition: box-shadow 0.2s ease;
}

.transition-all {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================================
   FOCUS STATES FOR INTERACTIVE ELEMENTS
   ============================================================================ */

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================================
   ACCESSIBILITY: PREFERS REDUCED MOTION
   ============================================================================ */

@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;
  }

  /* Disable animations but keep transitions smooth for essential interactions */
  .animate-fade-in,
  .animate-fade-out,
  .animate-scale-in,
  .animate-scale-out,
  .animate-slide-up,
  .animate-slide-down,
  .animate-bounce,
  .animate-spin,
  .animate-pulse,
  .animate-shimmer {
    animation: none !important;
  }

  /* Smooth color transitions still allowed */
  a,
  button,
  .btn,
  input,
  textarea,
  select,
  .card,
  li,
  .list-item,
  .menu-item {
    transition: color 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease, opacity 0.15s ease !important;
  }

  /* Remove transform-based animations */
  .btn:hover,
  .card:hover,
  .btn:active,
  .btn::before,
  .link-underline::after {
    transform: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   TOUCH AND MOBILE SPECIFIC INTERACTIONS
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  a:hover,
  button:hover,
  .btn:hover,
  .card:hover,
  .list-item:hover,
  .menu-item:hover {
    transform: none;
    box-shadow: inherit;
  }

  /* Use active state for touch feedback */
  a:active,
  button:active,
  .btn:active,
  .card:active {
    opacity: 0.8;
    transform: scale(0.98);
  }

  /* Larger touch targets */
  button,
  .btn,
  a,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-3) var(--space-4);
  }
}

/* ============================================================================
   FOCUS-VISIBLE ENHANCEMENTS
   ============================================================================ */

/* High contrast mode support */
@media (prefers-contrast: more) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }

  .btn:focus-visible {
    outline-width: 4px;
  }
}

/* Dark mode transition support */
@media (prefers-color-scheme: dark) {
  /* Smooth color scheme transition */
  * {
    transition: background-color 0.3s ease, color 0.3s ease,
                border-color 0.3s ease;
  }

  /* Ensure text remains readable during transitions */
  a,
  button,
  .btn {
    transition: all 0.2s ease;
  }
}

/* ============================================================================
   EASING FUNCTIONS AND TRANSITIONS
   ============================================================================ */

/* Cubic bezier easing functions for smooth animations */
.ease-in {
  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
}

.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

.ease-in-out {
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.ease-in-back {
  animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.ease-out-back {
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ease-spring {
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* End of Microinteractions System */