/**
 * Micro-Interactions Stylesheet
 *
 * This file defines modern UI micro-interactions for hover, active, and transition states.
 * All transitions use consistent 200ms ease-out timing for a polished feel.
 *
 * Key Features:
 * - Hover effects for all interactive elements
 * - Active state animations (pulsing border glow)
 * - Transition timing consistency
 * - Focus states for keyboard navigation
 */

/* ========================================
   CORE TRANSITION TIMING
   ======================================== */

:root {
  /* Standard transition duration for micro-interactions */
  --transition-micro: 200ms;
  /* Easing function for smooth, natural motion */
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  /* Alternative ease-out for specific effects */
  --easing-out: ease-out;

  /* Shadow depths for elevation effects */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Glow effect colors (theme-aware) */
  --glow-yang-light: rgba(230, 150, 62, 0.4);
  --glow-yang-dark: rgba(230, 150, 62, 0.5);
  --glow-yin-light: rgba(95, 130, 186, 0.4);
  --glow-yin-dark: rgba(95, 130, 186, 0.5);
}

/* ========================================
   PENDING STEPS - HOVER EFFECTS
   Scale up slightly with subtle shadow
   ======================================== */

.step-pending {
  transition: transform var(--transition-micro) var(--easing-out),
              box-shadow var(--transition-micro) var(--easing-out);
  cursor: pointer;
}

.step-pending:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-medium);
}

/* Ensure smooth transition when not hovering */
.step-pending:not(:hover) {
  transform: scale(1);
  box-shadow: var(--shadow-subtle);
}

/* ========================================
   ACTIVE STEP - PULSING BORDER GLOW
   Subtle pulsing animation for current step
   ======================================== */

.step-active {
  position: relative;
  animation: pulse-border-glow 2s var(--easing-smooth) infinite;
}

@keyframes pulse-border-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--glow-yang-light, rgba(230, 150, 62, 0.4));
  }
  50% {
    box-shadow: 0 0 0 4px var(--glow-yang-light, rgba(230, 150, 62, 0.4));
  }
}

/* Theme-specific glow colors */
[data-theme="yang-dark"] .step-active {
  animation-name: pulse-border-glow-yang-dark;
}

@keyframes pulse-border-glow-yang-dark {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--glow-yang-dark, rgba(230, 150, 62, 0.5));
  }
  50% {
    box-shadow: 0 0 0 4px var(--glow-yang-dark, rgba(230, 150, 62, 0.5));
  }
}

[data-theme="yin-light"] .step-active {
  animation-name: pulse-border-glow-yin-light;
}

@keyframes pulse-border-glow-yin-light {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--glow-yin-light, rgba(95, 130, 186, 0.4));
  }
  50% {
    box-shadow: 0 0 0 4px var(--glow-yin-light, rgba(95, 130, 186, 0.4));
  }
}

[data-theme="yin-dark"] .step-active {
  animation-name: pulse-border-glow-yin-dark;
}

@keyframes pulse-border-glow-yin-dark {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--glow-yin-dark, rgba(95, 130, 186, 0.5));
  }
  50% {
    box-shadow: 0 0 0 4px var(--glow-yin-dark, rgba(95, 130, 186, 0.5));
  }
}

/* ========================================
   BUTTONS - LIFT EFFECT
   Elevate on hover with subtle upward movement
   ======================================== */

.btn-interactive {
  transition: transform var(--transition-micro) var(--easing-out),
              box-shadow var(--transition-micro) var(--easing-out),
              background-color var(--transition-micro) var(--easing-out);
  position: relative;
}

.btn-interactive:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.btn-interactive:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-subtle);
  transition-duration: 100ms;
}

/* Disabled state - no interactions */
.btn-interactive:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ========================================
   TRAIL MARKER - HOVER EFFECTS
   Scale and color shift on hover
   ======================================== */

.trail-marker {
  transition: transform var(--transition-micro) var(--easing-out),
              fill var(--transition-micro) var(--easing-out),
              stroke var(--transition-micro) var(--easing-out),
              opacity var(--transition-micro) var(--easing-out);
  cursor: pointer;
}

.trail-marker:hover {
  transform: scale(1.15);
}

/* Active trail marker - already at full opacity */
.trail-marker.active:hover {
  transform: scale(1.15) rotate(5deg);
}

/* Inactive trail marker - brightens on hover */
.trail-marker.inactive {
  opacity: 0.3;
}

.trail-marker.inactive:hover {
  opacity: 0.6;
  transform: scale(1.15);
}

/* ========================================
   SELECTABLE CARDS - ENHANCED INTERACTIONS
   Combine lift, shadow, and border effects
   ======================================== */

.card-selectable {
  transition: transform var(--transition-micro) var(--easing-out),
              box-shadow var(--transition-micro) var(--easing-out),
              border-color var(--transition-micro) var(--easing-out),
              background-color var(--transition-micro) var(--easing-out);
  cursor: pointer;
}

.card-selectable:hover:not(.card-selected) {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-medium);
}

.card-selectable.card-selected {
  box-shadow: var(--shadow-medium);
}

.card-selectable.card-selected:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-elevated);
}

/* ========================================
   FOCUS STATES - KEYBOARD NAVIGATION
   Accessible focus indicators for all interactive elements
   ======================================== */

/* Base focus ring style */
.focusable:focus,
.focusable:focus-visible {
  outline: 2px solid var(--color-accent-primary, #E6963E);
  outline-offset: 2px;
  transition: outline-offset var(--transition-micro) var(--easing-out);
}

/* Enhanced focus for buttons */
.btn-interactive:focus-visible {
  outline: 2px solid var(--color-accent-primary, #E6963E);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(230, 150, 62, 0.2);
}

/* Focus for steps */
.step-pending:focus-visible,
.step-active:focus-visible {
  outline: 2px solid var(--color-accent-primary, #E6963E);
  outline-offset: 3px;
}

/* Focus for cards */
.card-selectable:focus-visible {
  outline: 2px solid var(--color-accent-primary, #E6963E);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(230, 150, 62, 0.15);
}

/* Remove default focus outline (replaced with custom styles above) */
.btn-interactive:focus:not(:focus-visible),
.step-pending:focus:not(:focus-visible),
.step-active:focus:not(:focus-visible),
.card-selectable:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================
   INPUT FIELDS - FOCUS AND INTERACTION
   Smooth transitions for form inputs
   ======================================== */

.input-interactive {
  transition: border-color var(--transition-micro) var(--easing-out),
              box-shadow var(--transition-micro) var(--easing-out),
              background-color var(--transition-micro) var(--easing-out);
}

.input-interactive:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-accent, #E6963E);
}

.input-interactive:focus {
  outline: none;
  border-color: var(--color-accent-primary, #E6963E);
  box-shadow: 0 0 0 3px rgba(230, 150, 62, 0.15);
}

/* ========================================
   PROGRESS PATH - STEP INDICATORS
   Smooth transitions for progress elements
   ======================================== */

.progress-step {
  transition: transform var(--transition-micro) var(--easing-out),
              background-color var(--transition-micro) var(--easing-out),
              border-color var(--transition-micro) var(--easing-out);
}

.progress-step:hover {
  transform: scale(1.1);
}

.progress-step.current {
  animation: pulse-subtle 2s var(--easing-smooth) infinite;
}

@keyframes pulse-subtle {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* ========================================
   TOGGLE SWITCHES - DARK MODE, ETC.
   Smooth sliding and color transitions
   ======================================== */

.toggle-interactive {
  transition: background-color var(--transition-micro) var(--easing-out);
}

.toggle-interactive .toggle-slider {
  transition: transform var(--transition-micro) var(--easing-smooth),
              background-color var(--transition-micro) var(--easing-out);
}

.toggle-interactive:hover {
  opacity: 0.9;
}

/* ========================================
   EXPANDABLE PANELS - SMOOTH EXPANSION
   Smooth height and opacity transitions
   ======================================== */

.panel-header {
  transition: background-color var(--transition-micro) var(--easing-out);
  cursor: pointer;
}

.panel-header:hover {
  background-color: var(--color-background-subtle, rgba(0, 0, 0, 0.02));
}

.panel-content {
  transition: max-height 300ms var(--easing-smooth),
              opacity var(--transition-micro) var(--easing-out),
              padding 300ms var(--easing-smooth);
}

/* ========================================
   SORTABLE ITEMS - DRAG INTERACTION
   Visual feedback during drag operations
   ======================================== */

.sortable-item {
  transition: transform var(--transition-micro) var(--easing-out),
              box-shadow var(--transition-micro) var(--easing-out),
              background-color var(--transition-micro) var(--easing-out);
  cursor: grab;
}

.sortable-item:hover {
  background-color: var(--color-background-subtle, rgba(0, 0, 0, 0.02));
}

.sortable-item.dragging {
  cursor: grabbing;
  opacity: 0.8;
  transform: scale(1.05);
  box-shadow: var(--shadow-elevated);
  z-index: 1000;
}

.sortable-item.drag-over {
  border-top: 2px solid var(--color-accent-primary, #E6963E);
}

/* ========================================
   ICON BUTTONS - SMALL INTERACTIVE ELEMENTS
   Subtle hover effects for icon-only buttons
   ======================================== */

.icon-btn {
  transition: transform var(--transition-micro) var(--easing-out),
              background-color var(--transition-micro) var(--easing-out),
              color var(--transition-micro) var(--easing-out);
  cursor: pointer;
}

.icon-btn:hover {
  transform: scale(1.1);
  background-color: var(--color-background-subtle, rgba(0, 0, 0, 0.05));
}

.icon-btn:active {
  transform: scale(0.95);
}

/* ========================================
   LINK ELEMENTS - TEXT LINKS
   Smooth underline and color transitions
   ======================================== */

.link-interactive {
  transition: color var(--transition-micro) var(--easing-out),
              text-decoration-color var(--transition-micro) var(--easing-out);
  text-decoration: underline;
  text-decoration-color: transparent;
}

.link-interactive:hover {
  text-decoration-color: currentColor;
}

/* ========================================
   REDUCED MOTION - ACCESSIBILITY
   Respect user's motion preferences
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable animations for users who prefer reduced motion */
  .step-active,
  .progress-step.current {
    animation: none;
  }

  /* Keep transitions but make them instant */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   UTILITY CLASSES
   Quick-apply classes for common patterns
   ======================================== */

/* Apply to any element that should have micro-interaction hover */
.hover-lift {
  transition: transform var(--transition-micro) var(--easing-out),
              box-shadow var(--transition-micro) var(--easing-out);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* Apply to any element that should scale on hover */
.hover-scale {
  transition: transform var(--transition-micro) var(--easing-out);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Apply to any element that should brighten on hover */
.hover-brighten {
  transition: filter var(--transition-micro) var(--easing-out);
}

.hover-brighten:hover {
  filter: brightness(1.1);
}

/* Smooth all property changes */
.transition-smooth {
  transition: all var(--transition-micro) var(--easing-out);
}