/* ============================================================
   ANIMATIONS & TRANSITIONS
   Basé sur la philosophie de design d'Emil Kowalski
   - Animations hardware-accelerated uniquement
   - Easing curves exponentielles pour la responsivité
   - Pas d'animation sur actions clavier (récurrentes)
   - Transitions interruptibles pour UI dynamique
   ============================================================ */

:root {
  /* Custom easing curves - plus forts que les standards */
  --ease-out: var(--ease-out);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: var(--ease-out);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ============================================================
   Question Container - Swipe Animations
   ============================================================ */

#questionContainer {
  /* Hardware accelerated - transform + opacity only */
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
  will-change: transform, opacity;
}

#questionContainer.swipe-left {
  transform: translateX(-30px);
  opacity: 0.5;
}

#questionContainer.swipe-right {
  transform: translateX(30px);
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  #questionContainer {
    transition: opacity 100ms linear;
  }
  #questionContainer.swipe-left,
  #questionContainer.swipe-right {
    transform: none;
    opacity: 1;
  }
}

/* ============================================================
   Sidebar Mobile - Transform Animation
   ============================================================ */

@media (max-width: 767px) {
  #sidebar {
    transition: transform 250ms var(--ease-out) !important;
    will-change: transform;
  }
  
  #sidebarOverlay {
    transition: opacity 250ms var(--ease-out) !important;
    will-change: opacity;
  }
  
  #sidebar.open {
    transform: translateX(0) !important;
  }
  
  @media (prefers-reduced-motion: reduce) {
    #sidebar,
    #sidebarOverlay {
      transition: none !important;
    }
  }
}

/* ============================================================
   Question Boxes - Interactive States
   ============================================================ */

.question-box {
  transition: transform 160ms var(--ease-out), 
              box-shadow 160ms var(--ease-out),
              background-color 160ms var(--ease-out);
  will-change: transform;
}

/* Active question - scale up subtly */
.question-box.active {
  transform: scale(1.05);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--color-primary-500) 20%, transparent);
}

/* Hover effect - must be gated for touch devices */
@media (hover: hover) and (pointer: fine) {
  .question-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* Press feedback - scale down */
.question-box:active {
  transform: scale(0.97);
}

/* Accessibility: Remove animations on motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .question-box {
    transition: background-color 100ms linear;
  }
  .question-box:active,
  .question-box.active {
    transform: none;
  }
}

/* ============================================================
   Buttons - Responsive Feedback
   ============================================================ */

button, 
[role="button"],
.custom-radio,
.custom-checkbox {
  transition: transform 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out),
              background-color 200ms var(--ease-out),
              color 200ms var(--ease-out);
  will-change: transform;
  touch-action: manipulation;
}

/* Press feedback - universal for all buttons */
button:active,
[role="button"]:active,
.custom-radio:active,
.custom-checkbox:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  button, 
  [role="button"],
  .custom-radio,
  .custom-checkbox {
    transition: background-color 100ms linear,
                color 100ms linear;
  }
  button:active,
  [role="button"]:active {
    transform: none;
  }
}

/* ============================================================
   Progress Bar - Smooth Width Transition
   ============================================================ */

.quiz-progress-fill {
  transition: width 300ms var(--ease-out);
  will-change: width;
}

/* ============================================================
   Save Status Indicator
   ============================================================ */

.save-status {
  transition: opacity 300ms var(--ease-out),
              color 300ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .save-status {
    transition: color 100ms linear;
  }
}

/* ============================================================
   Modal/Overlay Transitions
   ============================================================ */

#pauseOverlay,
#sidebarOverlay,
.update-banner {
  transition: opacity 250ms var(--ease-out),
              visibility 250ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  #pauseOverlay,
  #sidebarOverlay,
  .update-banner {
    transition: opacity 100ms linear;
  }
}

/* ============================================================
   Form Elements - Interactive States
   ============================================================ */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  transition: border-color 200ms var(--ease-out),
              background-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--focus-ring);
}

/* ============================================================
   Utility: Disable animations on body
   ============================================================ */

.no-animations * {
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   Performance Optimizations
   ============================================================ */

/* GPU acceleration for complex animations */
.accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* .blur-capable retiré : décoratif sans usage réel. */