/**
 * Mango AI - Best Modern Animations & Micro-Interactions
 * GPU-accelerated, high performance, mobile friendly
 */

/* ==========================================================================
   1. Ambient Organic Motion (Background Leaves & Mascot)
   ========================================================================== */

.dash-bg-pattern-top,
.auth-bg-pattern-top,
.top-pattern img {
  animation: ambientFloatTop 14s ease-in-out infinite alternate;
  transform-origin: top right;
  pointer-events: none;
  will-change: transform;
}

.dash-bg-pattern-bottom,
.auth-bg-pattern-bottom,
.bottom-pattern img {
  animation: ambientFloatBottom 16s ease-in-out infinite alternate;
  transform-origin: bottom right;
  pointer-events: none;
  will-change: transform;
}

@keyframes ambientFloatTop {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate3d(-10px, 8px, 0) scale(1.025) rotate(0.8deg);
  }
  100% {
    transform: translate3d(-18px, -6px, 0) scale(1.04) rotate(-0.6deg);
  }
}

@keyframes ambientFloatBottom {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate3d(12px, -10px, 0) scale(1.03) rotate(-1deg);
  }
  100% {
    transform: translate3d(6px, 6px, 0) scale(1.01) rotate(0.8deg);
  }
}

/* Mascot Playful Floating & Hover Reaction */
.sidebar-mascot {
  position: relative;
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
  animation: mascotFloat 5s ease-in-out infinite;
  will-change: transform;
}

.sidebar-mascot:hover {
  animation: mascotWiggle 0.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 18px rgba(255, 150, 0, 0.5));
}

@keyframes mascotFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(0, -6px, 0) rotate(1.2deg);
  }
  50% {
    transform: translate3d(0, -10px, 0) rotate(-1deg);
  }
  75% {
    transform: translate3d(0, -4px, 0) rotate(0.8deg);
  }
}

@keyframes mascotWiggle {
  0% {
    transform: scale(1.08) rotate(-4deg) translateY(-8px);
  }
  50% {
    transform: scale(1.12) rotate(4deg) translateY(-14px);
  }
  100% {
    transform: scale(1.08) rotate(-3deg) translateY(-8px);
  }
}

/* Natural Waving Hand Greeting */
.hand_icon {
  display: inline-block;
  transform-origin: 75% 75%;
  animation: naturalWave 2.2s ease-in-out infinite;
  will-change: transform;
}

@keyframes naturalWave {
  0%, 60%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(16deg) scale(1.1);
  }
  20% {
    transform: rotate(-10deg) scale(1.1);
  }
  30% {
    transform: rotate(14deg) scale(1.1);
  }
  40% {
    transform: rotate(-6deg) scale(1.05);
  }
  50% {
    transform: rotate(10deg);
  }
}

/* ==========================================================================
   2. Entrance & Stagger Animations
   ========================================================================== */

.anim-fade-up {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  animation: mangoFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.anim-fade-in {
  opacity: 0;
  animation: mangoFadeIn 0.6s ease forwards;
}

.anim-scale-in {
  opacity: 0;
  transform: scale(0.92) translate3d(0, 15px, 0);
  animation: mangoScaleIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

.anim-slide-right {
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
  animation: mangoSlideRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Light Slow Fade-In (Gentle, elegant entrance for auth & pre-auth) */
.anim-fade-slow {
  opacity: 0;
  animation: authFadeInSlow 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.anim-fade-slow-left {
  opacity: 0;
  animation: authFadeLeftSlow 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.anim-fade-slow-right {
  opacity: 0;
  animation: authFadeRightSlow 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes mangoFadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mangoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mangoScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translate3d(0, 15px, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

@keyframes mangoSlideRight {
  0% {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Stagger Delays */
.stagger-1  { animation-delay: 0.05s; }
.stagger-2  { animation-delay: 0.12s; }
.stagger-3  { animation-delay: 0.19s; }
.stagger-4  { animation-delay: 0.26s; }
.stagger-5  { animation-delay: 0.33s; }
.stagger-6  { animation-delay: 0.40s; }
.stagger-7  { animation-delay: 0.47s; }
.stagger-8  { animation-delay: 0.54s; }
.stagger-9  { animation-delay: 0.61s; }
.stagger-10 { animation-delay: 0.68s; }
.stagger-11 { animation-delay: 0.75s; }
.stagger-12 { animation-delay: 0.82s; }

/* ==========================================================================
   3. Gamification & Progress Bar Shimmer
   ========================================================================== */

.progress-bar-track {
  overflow: hidden;
  position: relative;
}

/* Animated Shimmer along Progress Bars */
.progress-bar-fill {
  position: relative;
  overflow: hidden;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  animation: shimmerSweep 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shimmerSweep {
  0% {
    left: -100%;
  }
  60%, 100% {
    left: 200%;
  }
}

/* XP Hexagon / Level Badge Breathing Aura */
.db-hex-xp,
.db-level-hex,
.db-level-purp,
.db-level-blue {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  will-change: transform;
}

.db-hex-xp:hover,
.db-level-hex:hover,
.db-level-purp:hover,
.db-level-blue:hover {
  transform: scale(1.12) rotate(3deg);
}

.db-level-hex::before,
.db-level-purp::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  filter: blur(8px);
  opacity: 0.4;
  z-index: -1;
  animation: pulseAura 3s infinite ease-in-out;
}

@keyframes pulseAura {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.65;
  }
}

/* XP Card Elevation */
.db-xp-card {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  overflow: hidden;
}

.db-xp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(18, 56, 26, 0.15);
}

.db-xp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%
  );
  transition: all 0.8s ease;
  pointer-events: none;
}

.db-xp-card:hover::before {
  left: 200%;
}

/* ==========================================================================
   4. Module Cards & Interactive Learning Path
   ========================================================================== */

.module-card {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
  will-change: transform, box-shadow;
}

.module-card:hover {
  transform: translateY(-6px) scale(1.012) !important;
  box-shadow: 0 14px 30px rgba(26, 67, 27, 0.18) !important;
  border-color: #1A431B !important;
}

/* Fruit Thumbnail playful bounce on hover */
.module-card .mango-imgbox {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.module-card:hover .mango-imgbox {
  transform: scale(1.12) rotate(4deg);
}

.module-card:hover .mango-imgbox img {
  filter: drop-shadow(0 6px 12px rgba(222, 122, 23, 0.35));
}

/* Action arrow forward peek on hover */
.module-card .start-button svg,
.module-card > div > svg,
.module-card svg path {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.module-card:hover .start-button svg,
.module-card:hover > div > svg {
  transform: translateX(5px);
}

/* CTA Banner (Ready to Begin / Continue Learning) */
.cta-banner,
.continue-card {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  overflow: hidden;
}

.cta-banner:hover,
.continue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(18, 56, 26, 0.14);
}

.cta-icon img {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-banner:hover .cta-icon img {
  transform: scale(1.15) rotate(6deg);
}

/* ==========================================================================
   5. Buttons & Interactive Controls
   ========================================================================== */

.start-button,
.cmn-btn,
.outline-btn,
.modal-btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              background-color 0.25s ease !important;
  will-change: transform;
}

.start-button:hover,
.cmn-btn:hover,
.modal-btn-primary:hover {
  transform: translateY(-2.5px);
  box-shadow: 0 8px 20px rgba(26, 67, 27, 0.25);
}

.start-button:active,
.cmn-btn:active,
.outline-btn:active,
.modal-btn:active {
  transform: translateY(0) scale(0.96) !important;
}

/* Glossy gleam sweep across buttons on hover */
.start-button::before,
.cmn-btn::before,
.modal-btn-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: rotate(25deg);
  transition: left 0.7s ease;
  pointer-events: none;
}

.start-button:hover::before,
.cmn-btn:hover::before,
.modal-btn-primary:hover::before {
  left: 200%;
}

.start-button svg,
.cmn-btn svg {
  transition: transform 0.25s ease;
}

.start-button:hover svg,
.cmn-btn:hover svg {
  transform: translateX(4px);
}

.outline-btn:hover {
  transform: translateX(-3px);
  border-color: #1A431B;
}

.outline-btn svg {
  transition: transform 0.25s ease;
}

.outline-btn:hover svg {
  transform: translateX(-3px);
}

/* ==========================================================================
   6. Badges Grid & Unlock Celebrations (Progress Space)
   ========================================================================== */

.prog-item {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease,
              border-color 0.3s ease;
  will-change: transform;
}

.prog-item:not(.locked):hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 28px rgba(26, 67, 27, 0.16);
  border-color: #1A431B;
}

.prog-item:not(.locked) span img {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.prog-item:not(.locked):hover span img {
  transform: scale(1.15) rotate(4deg);
  filter: drop-shadow(0 6px 12px rgba(251, 214, 132, 0.4));
}

.prog-item .badge-status {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.prog-item:hover .badge-status {
  transform: scale(1.2);
}

.prog-item.locked:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

/* ==========================================================================
   7. Audio Player & Soundwave Visualizer (Module Detail)
   ========================================================================== */

.audio-player {
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.audio-player:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.play-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  cursor: pointer;
}

.play-btn:hover {
  transform: scale(1.12);
}

.play-btn:active {
  transform: scale(0.92);
}

/* Live Sound Wave Visualizer when audio is playing */
.audio-soundwaves {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
}

.audio-soundwaves .wave-bar {
  display: inline-block;
  width: 3px;
  height: 6px;
  background: #1A431B;
  border-radius: 3px;
  transition: height 0.2s ease;
}

.audio-player.is-playing .audio-soundwaves .wave-bar {
  animation: soundWaveBar 0.9s ease-in-out infinite alternate;
}

.audio-player.is-playing .audio-soundwaves .wave-bar:nth-child(1) { animation-delay: 0.1s; height: 16px; }
.audio-player.is-playing .audio-soundwaves .wave-bar:nth-child(2) { animation-delay: 0.3s; height: 20px; }
.audio-player.is-playing .audio-soundwaves .wave-bar:nth-child(3) { animation-delay: 0.2s; height: 12px; }
.audio-player.is-playing .audio-soundwaves .wave-bar:nth-child(4) { animation-delay: 0.4s; height: 18px; }
.audio-player.is-playing .audio-soundwaves .wave-bar:nth-child(5) { animation-delay: 0.25s; height: 10px; }

@keyframes soundWaveBar {
  0% {
    height: 4px;
    transform: scaleY(0.4);
  }
  100% {
    height: 20px;
    transform: scaleY(1);
  }
}

/* AI Tips Floating Character */
.iner-foot .ai-logo img {
  animation: floatMascot 4s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.iner-foot:hover .ai-logo img {
  transform: scale(1.1) rotate(5deg);
}

/* ==========================================================================
   8. Sidebar Navigation Interactivity
   ========================================================================== */

.sidebar-item a {
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-item a:hover {
  /* transform: translateX(6px); */
  background: rgba(255, 255, 255, 0.24);
  padding-left: 10px;
}

.sidebar-item a .sidebar-icon-wrapper svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar-item a:hover .sidebar-icon-wrapper svg {
  transform: scale(1.22) rotate(-5deg);
}

.sidebar-item.active a {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  
}

.sidebar-brand:hover .logo_img {
  transform: scale(1.08) rotate(3deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   9. Notebooks Page Animations
   ========================================================================== */

.notebooks_card {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
  overflow: hidden;
}

.notebooks_card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(251, 214, 132, 0.15) 50%,
    transparent 100%
  );
  transition: all 0.7s ease;
  pointer-events: none;
}

.notebooks_card:hover::before {
  left: 200%;
}

.notebooks_card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 16px 32px rgba(18, 56, 26, 0.22);
  border-color: #FBD684;
}

/* ==========================================================================
   10. Lessons Accordion Smoothness
   ========================================================================== */

.course-accordion .accordion-item {
  border-radius: 16px !important;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.course-accordion .accordion-item:hover {
  box-shadow: 0 8px 24px rgba(26, 67, 27, 0.1);
}

.course-accordion .lesson {
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.course-accordion .lesson:hover {
  background-color: rgba(26, 67, 27, 0.05);
  transform: translateX(6px);
}

.course-accordion .lesson .lesson-no {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

.course-accordion .lesson:hover .lesson-no {
  transform: scale(1.15);
  background-color: #1A431B;
  color: #FFFFFF;
}

/* ==========================================================================
   11. Modals Smooth Spring In
   ========================================================================== */

.modal.fade .modal-dialog {
  transform: scale(0.92) translate3d(0, 20px, 0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

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

.modal-backdrop.show {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   12. Ripple Effect Click Feedback
   ========================================================================== */

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: rippleAnimation 0.6s linear;
  pointer-events: none;
}

@keyframes rippleAnimation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Mango Tree Live Big - Organic Breathing & Sprout */
.mango-tree-img img {
  animation: treeSproutBig 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both, treeLivingBig 5s ease-in-out 1.4s infinite alternate;
  transform-origin: 50% 92%;
}

@keyframes treeSproutBig {
  0% {
    opacity: 0;
    transform: scale(0.65) translateY(40px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateY(-8px);
  }
  80% {
    transform: scale(0.97) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes treeLivingBig {
  0% {
    transform: rotate(0deg) scale(1, 1) translateY(0);
  }
  25% {
    transform: rotate(1.8deg) scale(1.025, 1.015) translateY(-6px);
  }
  50% {
    transform: rotate(0deg) scale(1.045, 1.03) translateY(-10px);
  }
  75% {
    transform: rotate(-1.8deg) scale(1.02, 1.015) translateY(-5px);
  }
  100% {
    transform: rotate(0deg) scale(1, 1) translateY(0);
  }
}

/* ==========================================================================
   13. Reduced Motion Support (Accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .dash-bg-pattern-top,
  .dash-bg-pattern-bottom,
  .sidebar-mascot,
  .hand_icon,
  .audio-player.is-playing .audio-soundwaves .wave-bar {
    animation: none !important;
  }
}