/**
 * GCSE Revision Hub - Micro-Interactions Library
 *
 * Feature: F-032.13 Micro-Interactions
 * Version: 1.0
 * Created: 2026-01-20
 *
 * This file contains all micro-interaction animations for enhanced UX.
 * All animations are subtle, performant (GPU-accelerated), and respect prefers-reduced-motion.
 *
 * DESIGN PRINCIPLES:
 * - Subtle movements (1-4px translations)
 * - Short durations (150-350ms)
 * - Only animate transform & opacity (GPU-accelerated)
 * - Respect prefers-reduced-motion
 * - 60fps target on mid-range devices
 *
 * USAGE:
 * - Include after design-system.css
 * - Add classes to elements or trigger via JavaScript
 * - Use with MicroInteractions.js for dynamic effects
 */

/* ============================================================================
   BUTTON MICRO-INTERACTIONS
   ============================================================================ */

.btn {
  position: relative;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  transform: translateZ(0); /* Enable GPU acceleration */
  will-change: auto; /* Only set during hover */
}

/* Hover State - Subtle lift */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  will-change: transform, box-shadow;
}

/* Active State - Press down */
.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition-duration: 50ms; /* Immediate feedback */
}

/* Ripple effect container */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width var(--duration-slow) var(--ease-out),
              height var(--duration-slow) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Ripple animation trigger */
.btn.ripple-active::before {
  width: 300px;
  height: 300px;
  opacity: 0;
  transition-duration: 600ms;
}

/* Primary button glow on hover */
.btn-primary:hover {
  box-shadow: var(--shadow-primary);
}

/* Secondary button glow on hover */
.btn-secondary:hover {
  box-shadow: var(--shadow-secondary);
}

/* Success button glow on hover */
.btn-success:hover {
  box-shadow: var(--shadow-success);
}

/* Disabled state - no animations */
.btn:disabled,
.btn[disabled] {
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
  will-change: auto;
}

/* ============================================================================
   CARD MICRO-INTERACTIONS
   ============================================================================ */

.card,
.action-card,
.subject-card,
.task-card {
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  transform: translateZ(0); /* GPU acceleration */
  cursor: pointer;
  will-change: auto;
}

/* Hover - Lift up with subtle scale */
.card:hover,
.action-card:hover,
.subject-card:hover,
.task-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  will-change: transform, box-shadow;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .action-card:hover,
[data-theme="dark"] .subject-card:hover,
[data-theme="dark"] .task-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

/* Active - Press down */
.card:active,
.action-card:active,
.subject-card:active,
.task-card:active {
  transform: translateY(-2px) scale(0.99);
  transition-duration: 50ms; /* Immediate feedback */
}

/* Focus state for keyboard navigation */
.card:focus-visible,
.action-card:focus-visible,
.subject-card:focus-visible,
.task-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  transform: translateY(-4px);
}

/* Shimmer effect on hover (optional, very subtle) */
.card::after,
.action-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left var(--duration-slower) var(--ease-out);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

.card:hover::after,
.action-card:hover::after {
  left: 100%;
}

/* Complete state - checkmark animation */
.card--complete {
  border-color: var(--color-success);
}

.card--complete .card-status-icon {
  animation: checkmark-draw 0.5s var(--ease-out) forwards;
}

@keyframes checkmark-draw {
  0% {
    stroke-dashoffset: 50;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* In-progress state - subtle pulse */
.card--in-progress {
  border-color: var(--color-primary);
}

.card--in-progress .card-status-icon {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Locked state - shake on click */
.card--locked:active,
.shake {
  animation: shake 0.4s var(--ease-out);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ============================================================================
   SVG ICON ANIMATIONS
   ============================================================================ */

/* Checkmark draw-in animation */
.icon-checkmark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: draw-checkmark 0.5s var(--ease-out) forwards;
}

@keyframes draw-checkmark {
  to {
    stroke-dashoffset: 0;
  }
}

/* Success checkmark with bounce (trigger with .animate class) */
.icon-success.animate {
  animation: scale-bounce 0.5s var(--ease-bounce) forwards;
}

@keyframes scale-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Error X with shake (trigger with .animate class) */
.icon-error.animate {
  animation: error-shake 0.5s var(--ease-out) forwards;
}

@keyframes error-shake {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); }
  20%, 40%, 60%, 80% { transform: rotate(5deg); }
}

/* Flame icon flicker (for streak badge) */
.icon-flame {
  animation: flame-flicker 1.5s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes flame-flicker {
  0%, 100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  25% {
    transform: scale(1.05) translateY(-2px);
    opacity: 0.9;
  }
  50% {
    transform: scale(0.95) translateY(1px);
    opacity: 1;
  }
  75% {
    transform: scale(1.02) translateY(-1px);
    opacity: 0.95;
  }
}

/* Star icon sparkle (for level badge) */
.icon-star {
  animation: star-sparkle 2s ease-in-out infinite;
}

@keyframes star-sparkle {
  0%, 100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 0.8;
  }
}

/* Spinner rotation (smooth) */
.icon-spinner {
  animation: spin-smooth 1s linear infinite;
}

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

/* Loading dots pulse */
.loading-dot {
  animation: dot-pulse 1.4s ease-in-out infinite;
}

.loading-dot:nth-child(1) {
  animation-delay: 0s;
}

.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dot-pulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Icon hover effects */
.icon-interactive {
  transition: transform var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.icon-interactive:hover {
  transform: scale(1.1);
  color: var(--color-primary);
}

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

/* ============================================================================
   PROGRESS BAR ANIMATIONS
   ============================================================================ */

.progress-bar__fill {
  position: relative;
  transition: width var(--duration-slow) var(--ease-out);
  overflow: hidden;
}

/* Shimmer effect during progress */
.progress-bar__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progress-shimmer 2s ease-in-out infinite;
}

@keyframes progress-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Progress complete celebration */
.progress-bar--complete .progress-bar__fill {
  animation: progress-complete 0.6s var(--ease-out) forwards;
}

@keyframes progress-complete {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.2);
  }
  100% {
    transform: scaleY(1);
  }
}

/* ============================================================================
   XP & ACHIEVEMENT ANIMATIONS
   ============================================================================ */

/* XP counter animation */
.xp-gain {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  animation: xp-pop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  color: var(--color-success);
  font-weight: var(--font-bold);
  font-size: var(--text-2xl);
  pointer-events: none;
  z-index: 10;
}

@keyframes xp-pop {
  0% {
    transform: translate(-50%, -50%) scale(0) translateY(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4) translateY(-20px);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(1) translateY(-40px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8) translateY(-60px);
    opacity: 0;
  }
}

/* XP particles */
.xp-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  animation: particle-burst 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

@keyframes particle-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  70% {
    opacity: 0.6;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   MODAL & TOAST ANIMATIONS
   ============================================================================ */

/* Modal entrance/exit */
.modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.modal--active {
  opacity: 1;
  pointer-events: auto;
}

/* Modal backdrop fade */
.modal__backdrop {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.modal--active .modal__backdrop {
  opacity: 1;
}

/* Modal container scale + fade */
.modal__container {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}

.modal--active .modal__container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Modal shake on invalid action */
.modal__container.shake {
  animation: modal-shake 0.4s var(--ease-out);
}

@keyframes modal-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

/* Toast slide-in */
.toast {
  animation: toast-slide-in var(--duration-normal) var(--ease-bounce) forwards;
}

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

/* Toast exit */
.toast.toast--exiting {
  animation: toast-slide-out var(--duration-fast) var(--ease-in) forwards;
}

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

/* Toast progress bar (auto-dismiss timer) */
.toast__timer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--color-primary);
  animation: toast-timer 5s linear forwards;
}

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

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

.form-input,
.input {
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

/* Focus state */
.form-input:focus,
.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

/* Success state */
.form-input.success,
.input.success {
  border-color: var(--color-success);
}

.form-input.success:focus,
.input.success:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Error state with shake */
.form-input.error,
.input.error {
  border-color: var(--color-error);
  animation: input-shake 0.4s var(--ease-out);
}

@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.form-input.error:focus,
.input.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Floating label animation */
.form-group {
  position: relative;
}

.form-label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  transition: all var(--duration-fast) var(--ease-out);
  background: transparent;
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label,
.input:focus + .form-label,
.input:not(:placeholder-shown) + .form-label {
  top: 0;
  left: 8px;
  transform: translateY(-50%) scale(0.85);
  color: var(--color-primary);
  background: var(--bg-surface);
  padding: 0 4px;
}

/* Checkbox/Radio custom animations */
.custom-checkbox input:checked + .checkbox-visual::after {
  animation: checkmark-draw 0.3s var(--ease-out) forwards;
}

.custom-radio input:checked + .radio-visual::after {
  animation: radio-pop 0.3s var(--ease-bounce) forwards;
}

@keyframes radio-pop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

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

.badge {
  display: inline-flex;
  animation: badge-pop-in 0.4s var(--ease-bounce) forwards;
}

@keyframes badge-pop-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Streak badge pulse */
.streak-badge {
  animation: streak-pulse 2s ease-in-out infinite;
}

@keyframes streak-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}

/* Level badge glow */
.level-badge {
  position: relative;
  overflow: visible;
}

.level-badge::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  border-radius: inherit;
  filter: blur(12px);
  opacity: 0.3;
  animation: level-glow 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes level-glow {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* Notification dot pulse */
.notification-dot {
  width: 8px;
  height: 8px;
  background: var(--color-error);
  border-radius: 50%;
  animation: notification-pulse 2s ease-in-out infinite;
}

@keyframes notification-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

/* ============================================================================
   PAGE TRANSITION EFFECTS
   ============================================================================ */

/* Fade in content on page load */
.fade-in {
  animation: fade-in-up 0.6s var(--ease-out) forwards;
  opacity: 0;
}

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

/* Staggered fade-in for lists */
.fade-in-stagger {
  opacity: 0;
  animation: fade-in-up 0.6s var(--ease-out) forwards;
}

.fade-in-stagger:nth-child(1) { animation-delay: 0ms; }
.fade-in-stagger:nth-child(2) { animation-delay: 50ms; }
.fade-in-stagger:nth-child(3) { animation-delay: 100ms; }
.fade-in-stagger:nth-child(4) { animation-delay: 150ms; }
.fade-in-stagger:nth-child(5) { animation-delay: 200ms; }
.fade-in-stagger:nth-child(6) { animation-delay: 250ms; }
.fade-in-stagger:nth-child(7) { animation-delay: 300ms; }
.fade-in-stagger:nth-child(8) { animation-delay: 350ms; }

/* Slide in from sides */
.slide-in-left {
  animation: slide-in-left 0.6s var(--ease-out) forwards;
  opacity: 0;
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slide-in-right 0.6s var(--ease-out) forwards;
  opacity: 0;
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================================
   HORIZONTAL SCROLL INTERACTIONS
   ============================================================================ */

.horizontal-scroll {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* iOS momentum */
}

.horizontal-scroll__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

/* Dim non-focused items (subtle) */
.horizontal-scroll__item {
  opacity: 0.6;
}

.horizontal-scroll__item:hover,
.horizontal-scroll__item:focus-visible,
.horizontal-scroll__item.in-viewport {
  opacity: 1;
}

/* ============================================================================
   RIPPLE ANIMATION KEYFRAMES
   ============================================================================ */

@keyframes ripple-expand {
  from {
    transform: scale(0);
    opacity: 0.4;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* GPU acceleration for animated elements */
.animate-transform {
  transform: translateZ(0);
  will-change: transform;
}

/* Only add will-change during hover/focus */
.btn:not(:hover):not(:focus),
.card:not(:hover):not(:focus),
.action-card:not(:hover):not(:focus) {
  will-change: auto; /* Remove after animation */
}

/* Contain layout calculations */
.card,
.btn,
.modal__container {
  contain: layout style paint;
}

/* ============================================================================
   ACCESSIBILITY: REDUCED MOTION SUPPORT
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  .btn,
  .card,
  .action-card,
  .subject-card,
  .task-card,
  .form-input,
  .input,
  .form-label {
    transition: none;
  }

  .btn:hover,
  .btn:active,
  .card:hover,
  .card:active,
  .action-card:hover,
  .form-input:focus,
  .input:focus {
    transform: none;
  }

  .btn::before,
  .card::after,
  .action-card::after {
    display: none;
  }

  /* Disable all animations */
  .icon-checkmark,
  .icon-success,
  .icon-error,
  .icon-flame,
  .icon-star,
  .icon-spinner,
  .loading-dot,
  .badge,
  .streak-badge,
  .level-badge::after,
  .notification-dot,
  .progress-bar__fill::after,
  .xp-gain,
  .xp-particle,
  .toast,
  .fade-in,
  .fade-in-stagger,
  .slide-in-left,
  .slide-in-right {
    animation: none;
  }

  .modal__container,
  .modal__backdrop {
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .modal--active .modal__container {
    transform: none;
  }

  .horizontal-scroll {
    scroll-behavior: auto;
  }

  /* Keep basic fade transitions for accessibility */
  .fade-in,
  .fade-in-stagger,
  .slide-in-left,
  .slide-in-right {
    opacity: 1;
    transform: none;
  }
}