/* ==========================================================================
   FAILURE'S FAILS - ANIMATIONS
   Smooth Transitions & Effects
   ========================================================================== */

/* Button Click Effect */
.btn-large:active, .list-card:active, .grid-card:active, .btn-back:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}
.btn-large, .list-card, .grid-card, .btn-back {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Control Buttons Click Effect */
.control-btn:active {
  transform: translateY(4px) scale(0.95);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; /* overrides standard shadow */
  transition: all 0.1s ease;
}
.control-btn {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Flashcard 3D Flip */
.flashcard.flipped {
  transform: rotateY(180deg);
}

.flashcard {
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Screen Transitions */
.screen {
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}
.screen.active {
  transform: translateY(0) scale(1);
}

/* Flashcard Swipe Animations */
@keyframes swipeOutLeft {
  0% { transform: translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateX(-150%) rotate(-15deg); opacity: 0; }
}
@keyframes swipeOutRight {
  0% { transform: translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateX(150%) rotate(15deg); opacity: 0; }
}
@keyframes swipeInRight {
  0% { transform: translateX(100%) rotate(10deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes swipeInLeft {
  0% { transform: translateX(-100%) rotate(-10deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}

.swipe-out-left { animation: swipeOutLeft 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.swipe-out-right { animation: swipeOutRight 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.swipe-in-right { animation: swipeInRight 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.swipe-in-left { animation: swipeInLeft 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }

/* Glowing effects for Results page */
@keyframes glowPulse {
  0% { box-shadow: 0 0 30px rgba(255,255,255,0.2); transform: scale(1); }
  50% { box-shadow: 0 0 60px rgba(255,255,255,0.6); transform: scale(1.05); }
  100% { box-shadow: 0 0 30px rgba(255,255,255,0.2); transform: scale(1); }
}
.result-circle {
  animation: glowPulse 2s infinite ease-in-out;
}

/* Floating Particles */
@keyframes floatUp {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-20px) rotate(10deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes floatDown {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(20px) rotate(-10deg); }
  100% { transform: translateY(0) rotate(0); }
}
.p1 { animation: floatUp 4s ease-in-out infinite; }
.p2 { animation: floatDown 6s ease-in-out infinite; }
.p3 { animation: floatUp 5s ease-in-out infinite; }
.p4 { animation: floatDown 4s ease-in-out infinite; }
.p5 { animation: floatUp 7s ease-in-out infinite; }