/* ==========================================================================
   Cospixare Academy — Subtle Professional Transitions & Micro-Interactions
   ========================================================================== */

/* Subtle Float for Floating Elements */
@keyframes softFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}

.float-subtle {
  animation: softFloat 4s ease-in-out infinite;
}

/* Subtle Shimmer for High-Priority Buttons & Badges */
@keyframes shimmerWave {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.badge-shimmer {
  background: linear-gradient(90deg, #fefaf2 0%, #f7e7c4 50%, #fefaf2 100%);
  background-size: 200% 100%;
  animation: shimmerWave 6s infinite linear;
}

/* Fade in scale for smooth modals */
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-overlay.active .modal-card {
  animation: modalEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tab indicator transition */
.curriculum-tab-btn {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.2s ease;
}

.curriculum-tab-btn:hover {
  border-color: var(--navy-600);
  color: var(--navy-800);
}

.curriculum-tab-btn.active {
  background: var(--navy-800);
  color: #ffffff;
  border-color: var(--navy-800);
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15);
}