/**
 * ============================================
 * FLUTTER-INSPIRED INTERACTIONS
 * ============================================
 * Brings Material Design 3 elegance to the Jekyll site:
 * - Spring animations with cubic-bezier curves
 * - Backdrop blur effects
 * - Micro-interactions (scale, ripples)
 * - Haptic feedback via Web Vibration API
 *
 * WCAG 2.2 AAA Compliant:
 * - All animations respect prefers-reduced-motion
 * - Focus states remain visible
 * - Touch targets maintain 44x44px minimum
 */

/* ============================================
   SPRING ANIMATION CURVES
   ============================================
   Flutter's spring physics approximated with CSS cubic-bezier
*/
:root {
  /* Spring curves - natural, bouncy feel */
  --spring-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --spring-smooth: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-gentle: cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Material Design standard curves */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Durations */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
}

/* ============================================
   BACKDROP BLUR EFFECTS
   ============================================ */
.backdrop-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Mobile filter backdrop with blur */
.mobile-filter-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.4);
}

/* Modal backgrounds with blur */
.program-modal-backdrop,
.modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================
   DRAG HANDLE - Material Bottom Sheet Style
   ============================================ */
.drag-handle {
  width: 36px;
  height: 5px;
  background: var(--border-color, #d1d5db);
  border-radius: 2.5px;
  margin: 12px auto 8px;
  cursor: grab;
  transition: background-color var(--duration-fast) var(--ease-standard),
              width var(--duration-fast) var(--ease-standard);
}

.drag-handle:hover {
  background: var(--text-muted, #6b7280);
  width: 48px;
}

.drag-handle:active {
  cursor: grabbing;
  background: var(--text-secondary, #586069);
}

/* Enhanced drawer header for mobile */
@media (max-width: 768px) {
  .search-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 5px;
    background: var(--border-color, #d1d5db);
    border-radius: 2.5px;
    margin: 12px auto 8px;
    transition: width var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
  }

  .search-panel:hover::before {
    width: 48px;
    background: var(--text-muted, #6b7280);
  }

  /* Spring animation for drawer */
  .search-panel {
    transition: transform var(--duration-slow) var(--spring-gentle);
  }

  .search-panel.mobile-open {
    transform: translateY(0);
  }
}

/* ============================================
   ACTIVE SCALE TRANSFORMS
   ============================================
   Subtle press feedback like Flutter's InkWell
*/

/* Buttons - scale down slightly on press */
button,
.btn,
[role="button"],
.filter-btn,
.card-save-btn,
.mobile-filter-toggle,
.back-to-top {
  transition: transform var(--duration-instant) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

button:active:not(:disabled),
.btn:active:not(:disabled),
[role="button"]:active,
.filter-btn:active,
.card-save-btn:active,
.mobile-filter-toggle:active,
.back-to-top:active {
  transform: scale(0.96);
}

/* Cards - subtle lift on hover, press on click */
.program-card {
  transition: transform var(--duration-normal) var(--spring-gentle),
              box-shadow var(--duration-normal) var(--ease-standard);
}

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

.program-card:active {
  transform: translateY(-2px) scale(0.995);
}

/* Category tags - pop effect */
.card-tag,
.eligibility-badge,
.filter-chip {
  transition: transform var(--duration-instant) var(--spring-bounce),
              background-color var(--duration-fast) var(--ease-standard);
}

.card-tag:active,
.eligibility-badge:active,
.filter-chip:active {
  transform: scale(0.92);
}

/* Navigation items */
.mobile-bottom-nav button,
.nav-link {
  transition: transform var(--duration-instant) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.mobile-bottom-nav button:active,
.nav-link:active {
  transform: scale(0.94);
}

/* ============================================
   RIPPLE EFFECT
   ============================================
   Material Design ripple on interactive elements
*/

/* Ripple container setup */
.ripple-container {
  position: relative;
  overflow: hidden;
}

/* The ripple effect itself */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-animation var(--duration-slower) var(--ease-decelerate);
  pointer-events: none;
}

/* Dark theme ripple */
@media (prefers-color-scheme: dark) {
  .ripple {
    background: rgba(255, 255, 255, 0.2);
  }
}

body[data-theme="dark"] .ripple {
  background: rgba(255, 255, 255, 0.2);
}

/* Ripple animation */
@keyframes ripple-animation {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Elements that should have ripple effect */
.has-ripple {
  position: relative;
  overflow: hidden;
}

/* ============================================
   STATE LAYERS - Material Design 3
   ============================================
   Hover/press overlays that work across themes
*/

.filter-btn,
.card-tag {
  position: relative;
  overflow: hidden;
}

/* State layer overlay */
.filter-btn::before,
.card-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--duration-fast, 150ms) var(--ease-standard, ease);
  pointer-events: none;
  border-radius: inherit;
}

/* Hover state - 8% opacity per MD3 spec */
.filter-btn:hover::before,
.card-tag:hover::before {
  opacity: 0.08;
}

/* Active state - 12% opacity */
.filter-btn:active::before,
.card-tag:active::before {
  opacity: 0.12;
}

/* Selected state - different color layer */
.filter-btn.active::before {
  background: white;
  opacity: 0;
}

.filter-btn.active:hover::before {
  opacity: 0.12;
}

/* ============================================
   ICON ANIMATIONS - SwiftUI-inspired
   ============================================ */

/* Heart/save icon bounce animation */
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.25); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.1); }
}

@keyframes icon-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.85); }
}

@keyframes icon-pop {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Save button animation when favorited */
.card-save-btn.saved svg,
.card-save-btn[aria-pressed="true"] svg {
  animation: heart-beat 0.5s var(--spring-bounce, cubic-bezier(0.175, 0.885, 0.32, 1.275));
}

/* Category/filter icon bounce on click */
.filter-btn:active svg {
  animation: icon-bounce 0.2s var(--spring-bounce, cubic-bezier(0.175, 0.885, 0.32, 1.275));
}

/* Icon color transition */
.card-save-btn svg {
  transition: fill var(--duration-fast, 150ms) var(--ease-standard, ease),
              stroke var(--duration-fast, 150ms) var(--ease-standard, ease),
              transform var(--duration-fast, 150ms) var(--spring-gentle, ease);
}

/* Filled heart when saved */
.card-save-btn.saved svg,
.card-save-btn[aria-pressed="true"] svg {
  fill: var(--color-error, #ef4444);
  stroke: var(--color-error, #ef4444);
}

/* ============================================
   FOCUS STATES - Enhanced for Accessibility
   ============================================ */

/* Focus-visible for keyboard navigation */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
.filter-btn:focus-visible,
.program-card:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus-ring, #2563eb);
  outline-offset: 2px;
  box-shadow: var(--focus-ring-shadow, 0 0 0 4px rgba(37, 99, 235, 0.25));
}

/* Remove default outline for mouse users */
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.filter-btn:focus:not(:focus-visible),
.program-card:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ============================================
   LOADING STATES - Skeleton Animation
   ============================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt, #f9fafb) 0%,
    var(--bg-surface, #ffffff) 50%,
    var(--bg-surface-alt, #f9fafb) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

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

/* ============================================
   REDUCED MOTION - WCAG Compliance
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Keep essential state changes visible */
  .search-panel,
  .mobile-filter-backdrop,
  .program-modal-backdrop {
    transition: opacity 0.01ms !important;
  }

  /* Disable scale transforms */
  button:active,
  .btn:active,
  [role="button"]:active,
  .filter-btn:active,
  .program-card:active,
  .program-card:hover {
    transform: none !important;
  }

  /* Disable ripple */
  .ripple {
    animation: none !important;
    display: none !important;
  }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */
@media (forced-colors: active) {
  .ripple {
    display: none;
  }

  button:active,
  .btn:active,
  [role="button"]:active {
    transform: none;
  }

  .drag-handle {
    background: CanvasText;
  }
}

/* ============================================
   PRINT STYLES - Disable Interactions
   ============================================ */
@media print {
  .ripple,
  .drag-handle,
  .mobile-filter-toggle,
  .mobile-filter-backdrop {
    display: none !important;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
}