/* === Animations & Keyframes === */

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
.floating-element {
  animation: float 6s ease-in-out infinite;
}
.floating-element-delayed {
  animation: float 6s ease-in-out infinite;
  animation-delay: -3s;
}

/* Bounce Subtle Animation */
@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.animate-bounce-subtle {
  animation: bounce-subtle 3s ease-in-out infinite;
}

/* Pulse Subtle Animation */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}
.animate-pulse-subtle {
  animation: pulse-subtle 2s ease-in-out infinite;
}

/* Underline Draw Animation */
@keyframes draw {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}
.underline-draw {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 1.5s ease-out forwards;
  animation-delay: 0.5s;
}

/* Progress Bar Animation */
@keyframes progress {
  from { width: 0%; }
}
.progress-bar {
  animation: progress 2s ease-out forwards;
  animation-delay: 0.3s;
}

/* Shimmer Effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Tab Pane Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-pane {
  animation: fadeIn 0.3s ease;
}

/* Responsive: hide floating elements on mobile */
@media (max-width: 768px) {
  .floating-element,
  .floating-element-delayed {
    display: none;
  }
}