/* Smart Animations and Visual Effects for Arabic Learning */

/* Enhanced Floating Animation with Depth */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: translateY(-20px) rotate(5deg) scale(1.05);
    text-shadow: 0 25px 15px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
}

/* Enhanced Wobble Animation - Smoother for Arabic Letters */
@keyframes wobble {
  0%, 100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
    filter: brightness(1);
  }
  15% {
    transform: translateX(-10px) rotate(-5deg);
    filter: brightness(1.1);
  }
  30% {
    transform: translateX(8px) rotate(3deg);
    filter: brightness(1.05);
  }
  45% {
    transform: translateX(-6px) rotate(-3deg);
    filter: brightness(1.1);
  }
  60% {
    transform: translateX(4px) rotate(2deg);
    filter: brightness(1.05);
  }
  75% {
    transform: translateX(-2px) rotate(-1deg);
    filter: brightness(1.02);
  }
}

/* Enhanced Jello Animation with Color Emphasis */
@keyframes jello {
  0%, 11.1%, 100% {
    transform: none;
    color: inherit;
    text-shadow: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
    color: #0056b3;
    text-shadow: 0 0 5px rgba(0, 86, 179, 0.3);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
    color: #007bff;
    text-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
    color: #0056b3;
    text-shadow: 0 0 5px rgba(0, 86, 179, 0.3);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
    color: #007bff;
    text-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
    color: #0056b3;
    text-shadow: 0 0 5px rgba(0, 86, 179, 0.3);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
    color: #007bff;
    text-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    color: #0056b3;
    text-shadow: 0 0 5px rgba(0, 86, 179, 0.3);
  }
}

/* Heartbeat Animation */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

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

/* Rubber Band Animation */
@keyframes rubberBand {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

/* Swing Animation */
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

/* Tada Animation */
@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

/* Floating Elements */
.floating-element {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
  animation: float 6s ease-in-out infinite;
}

/* Apply animations to elements */
.float {
  animation: float 6s ease-in-out infinite;
}

.wobble {
  animation: wobble 2s ease-in-out;
}

.jello {
  animation: jello 2s both;
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

.shake {
  animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

.rubberBand {
  animation: rubberBand 1s;
}

.swing {
  transform-origin: top center;
  animation: swing 1s;
}

.tada {
  animation: tada 1s;
}

/* Enhanced Button Hover Effects */
.btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* Enhanced Card Hover Effects */
.letter-card:hover {
  transform: translateY(-10px) scale(1.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Smooth Transitions */
.smooth-transition {
  transition: all 0.5s ease-in-out;
}

/* Glowing Effect */
.glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073;
  }
  to {
    box-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6;
  }
}

/* Bouncing Elements */
.bounce {
  animation: bounce 0.8s ease infinite alternate;
}

/* Rotating Elements */
.rotate {
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pulsating Elements */
.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

/* Background Floating Shapes */
.floating-shapes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.shape {
  position: absolute;
  opacity: 0.2;
  animation: float-shape 15s linear infinite;
}

@keyframes float-shape {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0.1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0.1;
  }
}

/* New Arabic Calligraphy Animation */
@keyframes calligraphy-flow {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
    letter-spacing: normal;
  }
  25% {
    transform: scale(1.05) rotate(2deg);
    opacity: 1;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: scale(1.1) rotate(-1deg);
    opacity: 1;
    letter-spacing: 0.1em;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
  }
  75% {
    transform: scale(1.05) rotate(1deg);
    opacity: 1;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
    letter-spacing: normal;
    text-shadow: none;
  }
}

.calligraphy-flow {
  animation: calligraphy-flow 3s ease-in-out;
  display: inline-block;
}

/* Letter Focus Animation */
@keyframes letter-focus {
  0% {
    transform: scale(1);
    filter: blur(0);
    box-shadow: none;
  }
  50% {
    transform: scale(1.2);
    filter: blur(0);
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.7), 0 0 40px rgba(0, 123, 255, 0.4);
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 10px;
  }
  100% {
    transform: scale(1);
    filter: blur(0);
    box-shadow: none;
  }
}

.letter-focus {
  animation: letter-focus 2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  display: inline-block;
}

/* Pronunciation Animation */
@keyframes pronounce {
  0% {
    transform: scale(1);
    text-shadow: none;
  }
  10% {
    transform: scale(1.1);
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
  }
  20% {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
  }
  30% {
    transform: scale(1.3);
    text-shadow: 0 0 15px rgba(255, 255, 0, 0.5);
  }
  40% {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(0, 128, 0, 0.5);
  }
  50% {
    transform: scale(1.1);
    text-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
  }
  60% {
    transform: scale(1.0);
    text-shadow: none;
  }
  100% {
    transform: scale(1);
    text-shadow: none;
  }
}

.pronounce {
  animation: pronounce 1.5s ease-in-out;
  display: inline-block;
}

/* Enhanced Modal Animations */
.modal.fade .modal-dialog {
  transition: transform 0.5s ease-out;
  transform: scale(0.8);
}

.modal.show .modal-dialog {
  transform: scale(1);
}

/* Toast Animations */
#achievementToast {
  border-radius: 15px;
  overflow: hidden;
  border: 3px solid #4CAF50;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#achievementToast .toast-header {
  background: linear-gradient(45deg, #4CAF50, #8BC34A);
  color: white;
  border-bottom: none;
  padding: 0.8rem 1rem;
}

#achievementToast .toast-body {
  background-color: #F1F8E9;
  color: #2E7D32;
  font-weight: bold;
  padding: 1rem;
  font-size: 1.1rem;
}

/* Enhanced Success Animation */
.success-animation {
  animation: success-pulse 1.2s ease-in-out;
}

@keyframes success-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    filter: brightness(1);
  }
  30% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0.5);
    filter: brightness(1.2);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 15px rgba(76, 175, 80, 0.3);
    filter: brightness(1.3);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0.1);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    filter: brightness(1);
  }
}

/* Enhanced Error Animation */
.error-animation {
  animation: error-shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes error-shake {
  0% {
    transform: translate3d(0, 0, 0);
    background-color: rgba(255, 0, 0, 0);
  }
  10%, 90% {
    transform: translate3d(-2px, 0, 0);
    background-color: rgba(255, 0, 0, 0.05);
  }
  20%, 80% {
    transform: translate3d(4px, 0, 0);
    background-color: rgba(255, 0, 0, 0.1);
  }
  30%, 50%, 70% {
    transform: translate3d(-6px, 0, 0);
    background-color: rgba(255, 0, 0, 0.15);
  }
  40%, 60% {
    transform: translate3d(6px, 0, 0);
    background-color: rgba(255, 0, 0, 0.1);
  }
  100% {
    transform: translate3d(0, 0, 0);
    background-color: rgba(255, 0, 0, 0);
  }
}

/* Attention Guiding Animation */
@keyframes guide-attention {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    border-color: transparent;
  }
  20% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.5);
    border-color: rgba(255, 193, 7, 0.7);
  }
  40% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(255, 193, 7, 0.3);
    border-color: rgba(255, 193, 7, 0.9);
  }
  60% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.5);
    border-color: rgba(255, 193, 7, 0.7);
  }
  80% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    border-color: transparent;
  }
}

.guide-attention {
  animation: guide-attention 2s ease-in-out infinite;
  border: 2px solid transparent;
  border-radius: 5px;
}

/* Arabic Diacritical Marks (Harakat) Animations */
@keyframes haraka-appear {
  0% {
    transform: translateY(-10px) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translateY(-5px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.haraka-appear {
  animation: haraka-appear 0.5s ease-out;
  display: inline-block;
}

/* Tanween Animation (double diacritical marks) */
@keyframes tanween-appear {
  0% {
    transform: translateX(5px) scale(0.5);
    opacity: 0;
    letter-spacing: -0.1em;
  }
  50% {
    transform: translateX(0) scale(1.2);
    opacity: 1;
    letter-spacing: 0.1em;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
    letter-spacing: normal;
  }
}

.tanween-appear {
  animation: tanween-appear 0.6s ease-out;
  display: inline-block;
}

/* Long Vowel Animation (madd) */
@keyframes madd-appear {
  0% {
    transform: scaleX(0.5);
    opacity: 0;
  }
  50% {
    transform: scaleX(1.3);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.madd-appear {
  animation: madd-appear 0.7s ease-out;
  display: inline-block;
}

/* Smart Contextual Animations */
/* These animations respond to the context of the application */

/* Correct Answer Animation */
@keyframes correct-answer {
  0% {
    transform: scale(1);
    background-color: rgba(76, 175, 80, 0);
  }
  30% {
    transform: scale(1.1);
    background-color: rgba(76, 175, 80, 0.2);
  }
  60% {
    transform: scale(1.05);
    background-color: rgba(76, 175, 80, 0.1);
  }
  100% {
    transform: scale(1);
    background-color: rgba(76, 175, 80, 0);
  }
}

.correct-answer {
  animation: correct-answer 1s ease-out;
  border-radius: 5px;
}

/* Progress Celebration Animation */
@keyframes progress-celebration {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  10% {
    transform: scale(1.1) rotate(-3deg);
    filter: brightness(1.2) hue-rotate(0deg);
  }
  20% {
    transform: scale(1.2) rotate(3deg);
    filter: brightness(1.3) hue-rotate(60deg);
  }
  30% {
    transform: scale(1.1) rotate(-3deg);
    filter: brightness(1.2) hue-rotate(120deg);
  }
  40% {
    transform: scale(1.2) rotate(3deg);
    filter: brightness(1.3) hue-rotate(180deg);
  }
  50% {
    transform: scale(1.1) rotate(-3deg);
    filter: brightness(1.2) hue-rotate(240deg);
  }
  60% {
    transform: scale(1.2) rotate(3deg);
    filter: brightness(1.3) hue-rotate(300deg);
  }
  70% {
    transform: scale(1.1) rotate(-3deg);
    filter: brightness(1.2) hue-rotate(360deg);
  }
  80% {
    transform: scale(1.05) rotate(1deg);
    filter: brightness(1.1);
  }
  100% {
    transform: scale(1) rotate(0);
    filter: brightness(1);
  }
}

.progress-celebration {
  animation: progress-celebration 2s ease-in-out;
}