/**
 * Gamification Feedback Animations
 *
 * This file contains all keyframe animations, transition utilities, and animation
 * classes used throughout the gamification system. These animations provide visual
 * feedback for XP gains, achievements, level-ups, and other milestone moments.
 *
 * Design Philosophy:
 * - Animations feel like a warm embrace, not flashy explosions
 * - Support intrinsic learning motivation without creating pressure
 * - Professional aesthetic (LinkedIn skills, not mobile game)
 * - All animations respect prefers-reduced-motion for accessibility
 */

/* Import design tokens */
@import './variables.css';

/* ═══════════════════════════════════════
   KEYFRAMES
   Animation definitions for gamification feedback

   GPU OPTIMIZATION NOTE:
   All animations in this file use ONLY transform, opacity, filter,
   and box-shadow properties - these are GPU-accelerated and do not
   trigger layout recalculation. This ensures smooth 60fps performance
   even on low-end mobile devices.

   Properties that trigger layout (and are AVOIDED):
   - width, height, margin, padding
   - left, top, right, bottom
   - border-width, font-size
   - display, position

   Properties that are GPU-accelerated (and are USED):
   - transform (translateX/Y, scale, rotate)
   - opacity
   - filter (brightness, blur)
   - box-shadow (composited layer)
   ═══════════════════════════════════════ */

/**
 * XP Float-Up Animation
 * A gentle float-up with fade-out effect that makes earning XP feel satisfying
 * without being disruptive. Used when displaying "+50 XP" type notifications.
 */
@keyframes xpFloatUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
  }
}

/**
 * Success Feedback Glow Animation
 * A subtle green glow pulse for successful actions like completing a lesson
 * or getting a quiz answer correct. Uses --color-success RGB values.
 * Duration: 400ms (quick but noticeable)
 */
@keyframes feedbackSuccess {
  0% {
    box-shadow: 0 0 0 0 var(--color-success-glow);
  }
  50% {
    box-shadow: 0 0 0 8px var(--color-success-glow-light);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/**
 * Checkmark Scale-In Animation
 * A bouncy scale animation for checkmarks appearing on completion,
 * giving a satisfying "done!" feeling. The overshoot at 60% creates
 * a playful bounce effect that settles into place.
 * Duration: 300ms
 * Timing: cubic-bezier with overshoot for bounce effect
 */
@keyframes checkmarkScaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/**
 * Progress Bar Pulse Animation
 * A subtle pulse animation for progress bars when they increase,
 * drawing attention to progress without being flashy. Uses brightness
 * filter for a clean, non-intrusive highlight effect.
 * Duration: 600ms
 * Iteration: 2 (plays twice for emphasis)
 */
@keyframes progressPulse {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
  100% {
    filter: brightness(1);
  }
}

/**
 * Toast Slide-In Animation
 * Smooth slide-in animation for toast notifications appearing from
 * the right side of the screen. Creates a gentle entrance that
 * draws attention without being jarring.
 * Duration: 200ms (quick but visible)
 */
@keyframes toastSlideIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/**
 * Toast Slide-Out Animation
 * Smooth slide-out animation for toast notifications dismissing to
 * the right. Slightly faster than slide-in for snappy dismissal.
 * Duration: 150ms (fast exit)
 */
@keyframes toastSlideOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/**
 * XP Pulse Animation
 * A subtle scale pulse animation for the XP display when XP is earned.
 * Draws attention without being disruptive - a gentle "bump" effect.
 * Duration: 400ms
 */
@keyframes xpPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/**
 * Path Node Complete Animation
 * A satisfying scale-in animation for path nodes transitioning to completed state.
 * The overshoot at 50% creates a bouncy "pop" effect that settles into place,
 * giving users a rewarding sense of accomplishment.
 * Duration: 300ms
 * Timing: ease-out for natural deceleration
 *
 * GPU Optimization: Uses transform only for smooth 60fps performance.
 */
@keyframes pathNodeComplete {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/**
 * Path Node Pulse Animation
 * A subtle pulsing ring animation for the current lesson node.
 * Draws attention to where the user should focus without being distracting.
 * The ring grows outward and fades, creating a gentle "beacon" effect.
 * Duration: 2s, infinite loop
 * Timing: ease-out for natural expansion and fade
 *
 * GPU Optimization: Uses box-shadow and opacity only for smooth 60fps performance.
 */
@keyframes pathNodePulse {
  0% {
    box-shadow: 0 0 0 0 var(--color-path-node-glow-strong);
  }
  70% {
    box-shadow: 0 0 0 10px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/**
 * Path Connector Draw Animation
 * A satisfying "draw" animation that makes the connector line grow downward
 * when a lesson is completed. This gives users a visual sense of progress
 * along the learning path.
 * Duration: 400ms
 * Timing: ease-out for natural deceleration (fast start, gentle finish)
 *
 * Implementation Note: Uses scaleY transform with transform-origin at top
 * to create the "drawing downward" effect. This is more performant than
 * animating height because transforms are GPU-accelerated.
 *
 * GPU Optimization: Uses transform (scaleY) only for smooth 60fps performance.
 */
@keyframes pathConnectorDraw {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/**
 * Milestone Glow Animation
 * A celebratory golden glow pulse for milestones when they are just reached.
 * The glow expands outward and fades, creating a satisfying visual celebration
 * that draws attention to the achievement without being overwhelming.
 * Duration: 2s (plays once for emphasis)
 * Timing: ease-out for natural expansion and fade
 *
 * The glow uses the warm celebration color (--color-celebration: #E8B86D)
 * to reinforce the celebratory moment with warm, golden light.
 *
 * GPU Optimization: Uses box-shadow only for smooth 60fps performance.
 * Box-shadow is composited on GPU in modern browsers.
 */
@keyframes milestoneGlow {
  0% {
    box-shadow: 0 0 0 0 var(--color-milestone-strong),
                0 4px 12px var(--color-milestone-glow);
  }
  25% {
    box-shadow: 0 0 0 12px var(--color-milestone-medium),
                0 4px 20px var(--color-milestone-glow-strong);
  }
  50% {
    box-shadow: 0 0 0 20px var(--color-milestone-glow-light),
                0 4px 24px var(--color-milestone-medium);
  }
  75% {
    box-shadow: 0 0 0 24px var(--color-milestone-subtle),
                0 4px 16px var(--color-milestone-glow);
  }
  100% {
    box-shadow: 0 0 0 0 transparent,
                0 4px 12px var(--color-milestone-glow);
  }
}

/**
 * Level Badge Shimmer Animation
 * A subtle golden shimmer effect that sweeps diagonally across the level badge
 * in level-up toasts. Creates a premium, celebratory feel for the achievement.
 * Duration: 1.5s, plays twice for emphasis
 * Timing: ease-in-out for smooth sweep effect
 *
 * The shimmer uses a pseudo-element with a diagonal gradient that moves
 * across the badge, creating a light reflection effect reminiscent of
 * shiny metal or gem surfaces.
 *
 * GPU Optimization: Uses transform (translateX) only for smooth 60fps performance.
 * The shimmer is rendered on a separate compositing layer via will-change.
 */
@keyframes levelBadgeShimmer {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(200%) rotate(25deg);
  }
}

/* ═══════════════════════════════════════
   UTILITY CLASSES
   Reusable animation classes
   ═══════════════════════════════════════ */

/**
 * XP Float Animation Class
 * Apply to elements that display XP earnings (e.g., "+50 XP" text).
 * Duration: 600ms (snappy feel)
 * Timing: ease-out for natural deceleration
 * Fill: forwards to keep final state (invisible)
 *
 * GPU Optimization: Uses transform and opacity only for smooth 60fps performance.
 * will-change hint tells browser to prepare the compositing layer.
 */
.xp-float {
  animation: xpFloatUp 600ms ease-out forwards;
  will-change: transform, opacity;
}

/**
 * Success Feedback Animation Class
 * Apply to elements that need a success glow pulse (e.g., correct answers,
 * completed lessons). Animation plays once and completes.
 * Duration: 400ms
 *
 * GPU Optimization: box-shadow is composited on GPU in modern browsers.
 */
.feedback-success {
  animation: feedbackSuccess 400ms ease-out;
  will-change: box-shadow;
}

/**
 * Checkmark Scale-In Animation Class
 * Apply to checkmark icons/elements when they appear on completion.
 * Duration: 300ms
 * Timing: cubic-bezier(0.175, 0.885, 0.32, 1.275) for bounce effect
 *
 * GPU Optimization: Uses transform and opacity only for smooth 60fps performance.
 */
.checkmark-animate {
  animation: checkmarkScaleIn 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform, opacity;
}

/**
 * Progress Bar Pulse Animation Class
 * Apply to progress bar elements when they increase to draw attention
 * to the progress without being disruptive.
 * Duration: 600ms per pulse
 * Iteration: 2 (two pulses for emphasis)
 *
 * GPU Optimization: filter:brightness() is GPU-accelerated in modern browsers.
 */
.progress-pulse {
  animation: progressPulse 600ms ease-out 2;
  will-change: filter;
}

/**
 * Toast Enter Animation Class
 * Apply to toast notifications when they appear.
 * Duration: 200ms
 * Timing: ease-out for natural deceleration
 *
 * GPU Optimization: Uses transform and opacity only for smooth 60fps performance.
 */
.toast-enter {
  animation: toastSlideIn 200ms ease-out;
  will-change: transform, opacity;
}

/**
 * Toast Exit Animation Class
 * Apply to toast notifications when they are dismissed.
 * Duration: 150ms (faster than enter for snappy exit)
 * Timing: ease-in for acceleration as it leaves
 * Fill: forwards to keep final state (off-screen)
 *
 * GPU Optimization: Uses transform and opacity only for smooth 60fps performance.
 */
.toast-exit {
  animation: toastSlideOut 150ms ease-in forwards;
  will-change: transform, opacity;
}

/**
 * XP Pulse Animation Class
 * Apply to XP display when XP is earned to draw attention
 * with a subtle scale pulse. Animation is brief and non-intrusive.
 * Duration: 400ms
 * Timing: ease-out for natural deceleration
 *
 * GPU Optimization: Uses transform only for smooth 60fps performance.
 */
.xp-pulse {
  animation: xpPulse 400ms ease-out;
  will-change: transform;
}

/**
 * Quiz XP Indicator Fade Out Animation
 * A fade-out animation for the +XP indicator that appears on correct answers.
 * Shows briefly after a correct answer, then fades out smoothly.
 * Duration: 1s (visible for first 300ms, then fades)
 * Timing: ease-out for natural fade
 *
 * GPU Optimization: Uses opacity only for smooth 60fps performance.
 */
@keyframes xpIndicatorFadeOut {
  0% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  30% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
  }
}

/**
 * Quiz XP Indicator Class
 * Applied to the +XP indicator shown on correct answer options.
 * Uses the fade-out animation defined above.
 */
.quiz-xp-indicator {
  animation: xpIndicatorFadeOut 1s ease-out forwards;
  will-change: opacity, transform;
}

/* ═══════════════════════════════════════
   COMPONENT STYLES
   Specific component animation styles
   ═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   PATH NODE STYLES
   Lesson nodes on the vertical learning path
   ═══════════════════════════════════════ */

/**
 * Path Node Base Styles
 *
 * Base styling for all path nodes on the learning path.
 * Nodes are circular with icons or numbers inside.
 * All state changes use 300ms transitions for smooth visual updates.
 *
 * GPU Optimization: will-change hint prepares compositing layer for
 * transform and box-shadow animations.
 */
.path-node {
  transition: transform 300ms ease, box-shadow 300ms ease, opacity 300ms ease;
  will-change: transform, box-shadow;
}

/**
 * Path Node Completed State
 *
 * Completed nodes get a satisfying scale-in animation when transitioning.
 * The animation plays once and the node settles at a slightly larger scale (1.05)
 * to visually distinguish completed lessons from available ones.
 */
.path-node--completed {
  animation: pathNodeComplete 300ms ease-out;
  will-change: transform, opacity;
}

/**
 * Path Node Current State
 *
 * The current lesson node has a subtle pulsing ring animation to draw
 * attention without being distracting. This helps users quickly identify
 * where they should focus.
 */
.path-node--current {
  animation: pathNodePulse 2s ease-out infinite;
  will-change: box-shadow;
}

/**
 * Path Node Available State - Hover Effects
 *
 * Available (unlocked, not completed) nodes have an interactive hover state
 * that lifts the node slightly and adds a subtle shadow, indicating
 * the node is clickable.
 *
 * GPU Optimization: Uses transform (translateY) only for smooth 60fps.
 */
.path-node--available:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/**
 * Path Node Focus State
 *
 * Clear focus ring for keyboard navigation accessibility.
 * Uses the design system focus color for consistency.
 */
.path-node:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.path-node:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.path-node:focus:not(:focus-visible) {
  outline: none;
}

/**
 * Path Node Locked State
 *
 * Locked nodes should not have hover effects since they're not interactive.
 * The cursor is set to not-allowed in inline styles, this ensures no
 * accidental hover animations.
 */
.path-node--locked:hover {
  transform: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════
   PATH CONNECTOR STYLES
   Vertical lines connecting lesson nodes on the learning path
   ═══════════════════════════════════════ */

/**
 * Path Connector Base Styles
 *
 * Base styling for all path connectors on the learning path.
 * Connectors are vertical lines that connect nodes to show the path progression.
 * Uses CSS variables for consistent sizing.
 *
 * GPU Optimization: transform-origin set to top for scaleY animation.
 */
.path-connector {
  transform-origin: top center;
  transition: transform 300ms ease, opacity 300ms ease;
  will-change: transform, opacity;
}

/**
 * Path Connector Animate State
 *
 * When animate prop is true, the connector plays the draw animation.
 * This creates a satisfying visual of the path "drawing" downward
 * when a lesson is completed and transitions to the next node.
 * Duration: 400ms
 * Timing: ease-out for natural deceleration
 */
.path-connector--animate {
  animation: pathConnectorDraw 400ms ease-out;
  will-change: transform, opacity;
}

/**
 * Path Connector Completed State
 *
 * Completed connectors have a subtle transition for smoothness.
 * The solid color indicates completed progress.
 */
.path-connector--completed {
  /* No additional styles needed - state is handled by inline styles */
}

/**
 * Path Connector Partial State
 *
 * Partial connectors show gradient progress.
 * The gradient is calculated dynamically in the component.
 */
.path-connector--partial {
  /* No additional styles needed - gradient is handled by inline styles */
}

/**
 * Path Connector Pending State
 *
 * Pending connectors appear as dotted lines to indicate
 * future progress that hasn't been made yet.
 */
.path-connector--pending {
  /* No additional styles needed - dotted border is handled by inline styles */
}

/* ═══════════════════════════════════════
   PATH MILESTONE STYLES
   Journey markers at key progress points (25%, 50%, 75%, 100%)
   ═══════════════════════════════════════ */

/**
 * Path Milestone Base Styles
 *
 * Base styling for all path milestones on the learning path.
 * Milestones are larger than regular nodes and mark key journey points.
 * All state changes use 300ms transitions for smooth visual updates.
 *
 * GPU Optimization: will-change hint prepares compositing layer for
 * transform and box-shadow animations.
 */
.path-milestone {
  transition: transform 300ms ease, box-shadow 300ms ease, opacity 300ms ease;
  will-change: transform, box-shadow;
}

/**
 * Path Milestone Just Reached State
 *
 * Celebratory state for milestones that were just reached. The golden glow
 * animation plays for 2 seconds, drawing attention to the achievement.
 * After the animation completes, the milestone returns to the normal
 * reached state styling.
 *
 * Duration: 2s
 * Timing: ease-out for natural expansion and fade
 *
 * GPU Optimization: Uses box-shadow only for smooth 60fps performance.
 */
.path-milestone--just-reached {
  animation: milestoneGlow 2s ease-out;
  will-change: box-shadow;
}

/**
 * Path Milestone Reached State - Hover Effects
 *
 * Reached milestones have an interactive hover state that lifts
 * the milestone slightly and enhances the golden glow, indicating
 * the milestone is clickable.
 *
 * GPU Optimization: Uses transform (translateY) only for smooth 60fps.
 */
.path-milestone--reached:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 0 0 4px var(--color-milestone-ring),
              0 6px 16px var(--color-milestone-shadow);
}

/**
 * Path Milestone Focus State
 *
 * Clear focus ring for keyboard navigation accessibility.
 * Uses the design system focus color for consistency.
 */
.path-milestone:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.path-milestone:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.path-milestone:focus:not(:focus-visible) {
  outline: none;
}

/**
 * Path Milestone Unreached State
 *
 * Unreached milestones should not have hover effects since they're
 * not yet interactive. They appear muted to indicate future progress.
 */
.path-milestone--unreached:hover {
  transform: none;
  box-shadow: none;
}

/**
 * Path Milestone Complete Type
 *
 * The course completion milestone (100%) has extra celebratory styling.
 * It's the largest and most prominent milestone.
 */
.path-milestone--complete.path-milestone--reached {
  transform: scale(1.1);
}

.path-milestone--complete.path-milestone--just-reached {
  animation: milestoneGlow 2s ease-out, pathNodeComplete 300ms ease-out;
}

/* ═══════════════════════════════════════
   LEVEL BADGE SHIMMER STYLES
   Golden shimmer effect for level-up toasts
   ═══════════════════════════════════════ */

/**
 * Level Badge Shimmer Class
 *
 * Apply to level badges in level-up toasts to create a premium
 * celebratory shimmer effect. The shimmer is a diagonal light sweep
 * that moves across the badge twice, drawing attention to the
 * level-up achievement.
 *
 * Implementation: Uses a pseudo-element with overflow hidden to
 * contain the shimmer effect within the circular badge bounds.
 * The shimmer gradient creates a white-to-transparent reflection
 * that sweeps diagonally across the badge.
 *
 * Duration: 1.5s per sweep, plays twice (3s total)
 * Timing: ease-in-out for smooth, natural movement
 *
 * GPU Optimization:
 * - Uses transform (translateX) only for smooth 60fps
 * - will-change hint on pseudo-element for compositing layer
 * - overflow:hidden on parent prevents repaint outside bounds
 */
.level-badge--shimmer {
  position: relative;
  overflow: hidden;
}

.level-badge--shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 35%,
    var(--color-shimmer-50) 45%,
    var(--color-shimmer-80) 50%,
    var(--color-shimmer-50) 55%,
    transparent 65%,
    transparent 100%
  );
  transform: translateX(-100%) rotate(25deg);
  animation: levelBadgeShimmer 1.5s ease-in-out 2;
  will-change: transform;
  pointer-events: none;
}

/**
 * XPDisplay Component Styles
 * Styles for the compact XP and level display shown in the header.
 * The badge should slightly enlarge on hover for visual feedback.
 *
 * Accessibility considerations:
 * - Container has role="status" for screen reader announcements
 * - Link and toggle button are separate for proper keyboard navigation
 * - Focus states are clearly visible for keyboard users
 * - aria-live="polite" announces XP changes without interrupting
 */

/* Container wrapper with role="status" for screen reader announcements */
.xp-display-container {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--color-surface);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-full);
  max-height: 32px;
  transition: border-color 0.2s ease;
}

.xp-display-container:hover {
  border-color: var(--color-border);
}

/* Main link to /progress page */
.xp-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

/* Focus state for keyboard navigation - clearly visible */
.xp-display:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: var(--color-selection);
}

/* Focus-visible for modern browsers - only show on keyboard focus */
.xp-display:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: var(--color-selection);
}

/* Remove outline for mouse users */
.xp-display:focus:not(:focus-visible) {
  outline: none;
  background: transparent;
}

.xp-display:hover .xp-display__badge {
  transform: scale(1.1);
}

.xp-display__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--level-badge-size, 24px);
  height: var(--level-badge-size, 24px);
  background: var(--color-level-bg, var(--color-main));
  color: var(--color-surface);
  border-radius: 50%;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.xp-display__info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}

.xp-display__level-text {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.xp-display__separator {
  color: var(--color-text-muted);
}

.xp-display__percentage {
  color: var(--color-xp, #5B6FD9);
  font-weight: var(--font-weight-semibold);
}

.xp-display__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-right: 4px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.xp-display__toggle:hover {
  color: var(--color-text);
  background: var(--color-selection);
}

/* Focus state for keyboard navigation */
.xp-display__toggle:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: var(--color-selection);
}

/* Focus-visible for modern browsers */
.xp-display__toggle:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: var(--color-selection);
}

/* Remove outline for mouse users */
.xp-display__toggle:focus:not(:focus-visible) {
  outline: none;
}

/* Header XP Display - hidden on mobile, shown in mobile menu instead (Task 2.3.2) */
.header__xp-display {
  display: flex;
  align-items: center;
}

/* Hide XP display on mobile - it will be shown in mobile menu instead */
@media (max-width: 768px) {
  .header__xp-display {
    display: none;
  }
}

/* ═══════════════════════════════════════
   MOBILE XP DISPLAY
   Larger, touch-friendly version for mobile menu (Task 2.3.2)
   ═══════════════════════════════════════ */

/* Mobile XP Display link hover/active states */
.mobile-xp-display a:hover,
.mobile-xp-display a:active {
  background-color: var(--color-selection);
}

/* Focus state for keyboard navigation */
.mobile-xp-display a:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: var(--color-selection);
}

/* Focus-visible for modern browsers */
.mobile-xp-display a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: var(--color-selection);
}

/* Remove outline for mouse users */
.mobile-xp-display a:focus:not(:focus-visible) {
  outline: none;
}

/* ═══════════════════════════════════════
   REDUCED MOTION CELEBRATION
   Alternative visual feedback when animations/confetti are disabled.
   Provides a brief brightness flash or border glow as celebration
   feedback for users with prefers-reduced-motion or who have disabled
   animations in their preferences.

   This ensures level-up and milestone celebrations still have visual
   feedback beyond just toast notifications.
   ═══════════════════════════════════════ */

/**
 * Celebration Reduced Motion Keyframe
 *
 * A brief brightness pulse animation as an alternative to confetti.
 * Uses brightness filter for a subtle "flash" effect that draws attention
 * without movement. Plays only once over 600ms.
 *
 * GPU Optimization: filter:brightness() is GPU-accelerated in modern browsers.
 */
@keyframes celebrationReducedMotion {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 0 0 transparent;
  }
  30% {
    filter: brightness(1.15);
    box-shadow: 0 0 0 6px var(--color-milestone-medium);
  }
  60% {
    filter: brightness(1.1);
    box-shadow: 0 0 0 12px var(--color-milestone-glow-light);
  }
  100% {
    filter: brightness(1);
    box-shadow: 0 0 0 0 transparent;
  }
}

/**
 * Celebration Reduced Motion Class
 *
 * Apply to a container element when confetti would have fired but animations
 * are disabled. This provides alternative visual celebration feedback:
 * - Brief brightness increase (flash effect)
 * - Golden glow ring expanding outward
 *
 * Duration: 600ms (single play)
 * Color: Uses celebration gold (#E8B86D) for consistency with design system
 */
.celebration-reduced-motion {
  animation: celebrationReducedMotion 600ms ease-out;
  will-change: filter, box-shadow;
}

/* ═══════════════════════════════════════
   REDUCED MOTION OVERRIDES
   Accessibility support for users who prefer reduced motion

   This section disables or simplifies all animations when the user has
   enabled "Reduce motion" in their operating system settings. This is
   critical for:
   - Users with vestibular disorders who may experience motion sickness
   - Users with attention disorders who find animations distracting
   - Users who simply prefer a calmer interface

   Instead of completely removing visual feedback, transform-based
   animations are replaced with simple opacity fades to maintain
   the informational value while eliminating movement.
   ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Disable all keyframe animations and reset will-change to avoid
     unnecessary GPU memory allocation when animations are disabled */
  .xp-float,
  .feedback-success,
  .checkmark-animate,
  .progress-pulse,
  .toast-enter,
  .toast-exit,
  .xp-pulse,
  .quiz-xp-indicator,
  .path-node--completed,
  .path-node--current,
  .path-connector--animate,
  .path-milestone--just-reached,
  .path-milestone--complete.path-milestone--just-reached,
  .level-badge--shimmer::after {
    animation: none;
    will-change: auto;
  }

  /* Reduce all transitions to near-instant */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  /* Replace XP float with simple fade-out */
  .xp-float {
    opacity: 0;
    transition: opacity 0.01ms !important;
  }

  /* Replace checkmark scale with simple appear */
  .checkmark-animate {
    opacity: 1;
    transform: scale(1);
  }

  /* Replace toast slide with simple appear/disappear */
  .toast-enter {
    opacity: 1;
    transform: translateX(0);
  }

  .toast-exit {
    opacity: 0;
    transform: translateX(0);
  }

  /* Remove progress bar pulse effect */
  .progress-pulse {
    filter: none;
  }

  /* Remove success glow effect */
  .feedback-success {
    box-shadow: none;
  }

  /* Quiz XP indicator shows briefly then hides (no animation) */
  .quiz-xp-indicator {
    opacity: 0;
  }

  /* Path Node reduced motion overrides */
  /* Completed nodes appear instantly without scale animation */
  .path-node--completed {
    opacity: 1;
    transform: scale(1.05);
  }

  /* Current node has no pulsing animation - uses static ring instead */
  .path-node--current {
    box-shadow: 0 0 0 4px var(--color-path-node-glow);
  }

  /* Available node hover - instant state change, no animation */
  .path-node--available:hover {
    transform: translateY(-2px);
  }

  /* Base path-node has no transition in reduced motion */
  .path-node {
    transition: none;
  }

  /* Path Connector reduced motion overrides */
  /* Connectors appear instantly without draw animation */
  .path-connector--animate {
    opacity: 1;
    transform: scaleY(1);
  }

  /* Base path-connector has no transition in reduced motion */
  .path-connector {
    transition: none;
  }

  /* Path Milestone reduced motion overrides */
  /* Just-reached milestones show static golden glow instead of animation */
  .path-milestone--just-reached {
    box-shadow: 0 0 0 8px var(--color-milestone-glow),
                0 4px 12px var(--color-milestone-glow);
  }

  /* Complete milestones appear instantly at final scale */
  .path-milestone--complete.path-milestone--reached {
    transform: scale(1.1);
  }

  /* Base path-milestone has no transition in reduced motion */
  .path-milestone {
    transition: none;
  }
}

/* ═══════════════════════════════════════
   BADGE SHOWCASE STYLES
   Displays earned achievement badges grouped by category
   Progressive disclosure: Only shows after first badge earned
   ═══════════════════════════════════════ */

.badge-showcase {
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border-light);
}

.badge-showcase__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--spacing-lg);
}

.badge-showcase__category {
  margin-bottom: var(--spacing-lg);
}

.badge-showcase__category:last-child {
  margin-bottom: 0;
}

.badge-showcase__category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-light);
}

.badge-showcase__category-name {
  color: var(--color-text);
}

.badge-showcase__category-count {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Responsive grid: 4 per row desktop, 3 tablet, 2 mobile */
.badge-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

@media (max-width: 1024px) {
  .badge-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .badge-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.badge-showcase__item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-sm);
}

/* ═══════════════════════════════════════
   LEARNING PATH MODULE HEADER STYLES
   Visual grouping header for course modules
   ═══════════════════════════════════════ */

/**
 * Module Header
 *
 * Visual separator showing module title, badge, and completion status.
 * Displays before each group of lessons in a module.
 */
.learning-path__module-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 500px;
  padding: var(--spacing-md) 0;
  margin: var(--spacing-lg) 0 var(--spacing-md) 0;
  background: none;
  border: none;
  font-family: var(--font-family);
}

.learning-path__module-header--completed {
  background: none;
}

.learning-path__module-badge {
  font-size: 1.5rem;
  line-height: 1;
}

.learning-path__module-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.learning-path__module-check {
  font-size: 1rem;
  color: var(--color-success);
  font-weight: bold;
}

/* ═══════════════════════════════════════
   LEARNING PATH LESSON ROW STYLES
   Horizontal layout with node and info panel for each lesson
   ═══════════════════════════════════════ */

/**
 * Lesson Row Container
 *
 * Horizontal layout that positions the path node and lesson info side by side.
 * On mobile, the layout stacks vertically with the node above the info panel.
 */
.lesson-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  max-width: 500px;
}

/**
 * Lesson Info Panel
 *
 * Container for lesson title, duration, and status information.
 * Clickable for unlocked lessons to navigate to the lesson page.
 */
.lesson-info {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.lesson-info:not(.lesson-info--locked) {
  cursor: pointer;
}

.lesson-info:not(.lesson-info--locked):hover {
  border-color: var(--color-border);
  transform: translateX(4px);
}

.lesson-info:not(.lesson-info--locked):focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.lesson-info:not(.lesson-info--locked):focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.lesson-info:not(.lesson-info--locked):focus:not(:focus-visible) {
  outline: none;
}

/**
 * Lesson Info Title
 *
 * The lesson title is the primary content of the info panel.
 * Truncated with ellipsis if too long.
 */
.lesson-info__title {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--spacing-2xs);
}

/**
 * Lesson Info Meta
 *
 * Secondary information line with duration and status.
 */
.lesson-info__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.lesson-info__duration {
  color: var(--color-text-muted);
}

.lesson-info__status {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

.lesson-info__status-icon {
  font-size: var(--font-size-xs);
}

/**
 * Progress Indicator for Current Lesson
 *
 * Animated bar at the bottom of the info panel for the lesson in progress.
 * Creates a subtle "progress happening" visual cue.
 */
.lesson-info__progress-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 30%;
  background: linear-gradient(
    90deg,
    var(--color-path-current) 0%,
    var(--color-encouragement) 100%
  );
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  animation: progressIndicatorPulse 2s ease-in-out infinite;
}

@keyframes progressIndicatorPulse {
  0%, 100% {
    width: 30%;
    opacity: 0.7;
  }
  50% {
    width: 50%;
    opacity: 1;
  }
}

/**
 * Lesson Info State Variations
 */

/* Completed lessons have a subtle success tint */
.lesson-info--completed {
  border-color: var(--color-path-complete);
  background: var(--color-path-complete-subtle);
}

.lesson-info--completed .lesson-info__status {
  color: var(--color-path-complete);
  font-weight: var(--font-weight-medium);
}

.lesson-info--completed .lesson-info__status-icon {
  color: var(--color-path-complete);
}

/* Current lesson has a highlighted appearance */
.lesson-info--current {
  border-color: var(--color-path-current);
  background: var(--color-path-node-subtle);
}

.lesson-info--current .lesson-info__title {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.lesson-info--current .lesson-info__status {
  color: var(--color-path-current);
  font-weight: var(--font-weight-medium);
}

/* Locked lessons are dimmed and non-interactive */
.lesson-info--locked {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-surface-hover);
}

.lesson-info--locked .lesson-info__title {
  color: var(--color-text-muted);
}

.lesson-info--locked .lesson-info__status {
  color: var(--color-path-locked);
}

/* Sequential lock: different visual from purchase lock */
.lesson-info--locked-sequential {
  opacity: 0.7;
  cursor: pointer;
  background: var(--color-surface);
  border-style: dashed;
}

.lesson-info--locked-sequential .lesson-info__title {
  color: var(--color-text-muted);
}

.lesson-info--locked-sequential .lesson-info__status {
  color: var(--color-text-muted);
}

.lesson-info--locked-sequential:hover {
  opacity: 0.85;
  background: var(--color-surface-hover);
}

/* Available lessons have default styling with hover lift */
.lesson-info--available:hover {
  background: var(--color-surface-hover);
}

/**
 * Responsive Stacking for Mobile
 *
 * On smaller screens, the lesson row stacks vertically
 * with the node centered above the info panel.
 */
@media (max-width: 480px) {
  .lesson-row {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .lesson-info {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  .lesson-info__meta {
    justify-content: center;
  }

  .lesson-info:not(.lesson-info--locked):hover {
    transform: translateY(-2px);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .lesson-info {
    transition: none;
  }

  .lesson-info:not(.lesson-info--locked):hover {
    transform: none;
  }

  .lesson-info__progress-indicator {
    animation: none;
    width: 40%;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════
   LEARNING PATH XP INDICATORS
   XP badges and progress shown along the learning path
   ═══════════════════════════════════════ */

/**
 * Learning Path XP Header
 *
 * Displays total XP progress at the top of the learning path.
 * Shows earned XP / total available XP for lessons.
 * Small and muted so it doesn't dominate the visual hierarchy.
 */
.learning-path__xp-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-xp-glow-subtle);
  border-radius: var(--radius-full);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}

.learning-path__xp-icon {
  font-size: var(--font-size-xs);
}

.learning-path__xp-earned {
  font-weight: var(--font-weight-semibold);
  color: var(--color-xp);
}

.learning-path__xp-separator {
  color: var(--color-text-muted);
}

.learning-path__xp-total {
  color: var(--color-text-muted);
}

/**
 * Lesson Info XP Badge
 *
 * Small XP indicators shown in the lesson meta section.
 * Two variants:
 * - Earned: muted style for completed lessons (+50 XP)
 * - Potential: highlighted with sparkle for current lesson (✨ 50 XP)
 */
.lesson-info__xp {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Earned XP badge - muted style for completed lessons */
.lesson-info__xp--earned {
  color: var(--color-path-complete);
  background: var(--color-path-complete-light);
}

/* Potential XP badge - highlighted for current lesson */
.lesson-info__xp--potential {
  color: var(--color-xp);
  background: var(--color-xp-glow);
  animation: xpPotentialPulse 2s ease-in-out infinite;
}

/* Sparkle icon for potential XP */
.lesson-info__xp-sparkle {
  font-size: 10px;
  line-height: 1;
}

/* Subtle pulse animation for potential XP badge */
@keyframes xpPotentialPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Reduced motion: disable pulse animation */
@media (prefers-reduced-motion: reduce) {
  .lesson-info__xp--potential {
    animation: none;
  }
}

/* Mobile adjustments for XP indicators */
@media (max-width: 480px) {
  .learning-path__xp-header {
    font-size: var(--font-size-xs);
    padding: var(--spacing-2xs) var(--spacing-sm);
  }

  .lesson-info__xp {
    font-size: 10px;
    padding: 1px 4px;
  }
}

/* ═══════════════════════════════════════
   LEARNING PATH MINI-MAP NAVIGATION
   Jump-to-section navigation for longer courses (>8 lessons)
   Fixed position: side on desktop, bottom on mobile
   ═══════════════════════════════════════ */