/* ═══════════════════════════════════════════════
   Academy — OPTIMIZED Visual Effects
   ═══════════════════════════════════════════════ */

/* ── Hero Title: Gradient ── */
.hero h1 {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Module Cards: Hover Depth ── */
.module-card {
  will-change: transform;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.module-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(61,46,34,0.08);
  border-color: var(--accent);
}
[data-theme="dark"] .module-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* ── Badges: Refined ── */
.badge-free { box-shadow: 0 0 0 1px rgba(45,140,78,0.12); }
.badge-premium {
  background: linear-gradient(135deg, rgba(180,133,21,0.12), rgba(139,105,20,0.08)) !important;
  box-shadow: 0 0 0 1px rgba(180,133,21,0.15);
}

/* ── Lesson Cards: Slide on Hover ── */
.lesson-card {
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.lesson-card:hover {
  transform: translateX(4px);
  border-color: var(--accent);
}

/* ── Lesson Title: Gradient ── */
.lesson-header h2 {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons: Hover Lift ── */
.btn-primary {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139,105,20,0.2);
}
.back-button:hover {
  transform: translateX(-3px);
  color: var(--accent);
}

/* ── Quiz Options: Hover ── */
.quiz-option {
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.quiz-option:hover {
  transform: translateX(4px);
  border-color: var(--accent);
}

/* ── Module Icons: Scale on Hover ── */
.module-card-icon { transition: transform 0.2s ease; }
.module-card:hover .module-card-icon { transform: scale(1.1); }

/* ── Mobile ── */
@media (max-width: 768px) {
  .module-card:hover { transform: translateY(-2px) !important; }
  .lesson-card:hover { transform: translateX(2px); }
}

/* ═══ TIER 3: DELIGHT ═══ */

/* ── Checkmark Overshoot Animation ── */
@keyframes mmm-check-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.lesson-checkbox.checked {
  animation: mmm-check-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}

/* ── Quiz Correct: Green Flash ── */
@keyframes mmm-correct-flash {
  0% { background: var(--surface); }
  30% { background: rgba(45, 140, 78, 0.15); border-color: var(--green); }
  100% { background: var(--surface); }
}
.quiz-option.correct-flash {
  animation: mmm-correct-flash 0.6s ease;
}

/* ── Quiz Wrong: Red Shake ── */
@keyframes mmm-wrong-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
.quiz-option.wrong-shake {
  animation: mmm-wrong-shake 0.5s ease;
  border-color: var(--red) !important;
  background: rgba(200, 50, 20, 0.05);
}

/* ── Module Complete: Glow State ── */
.module-card.mmm-completed {
  border-color: var(--green);
  background: linear-gradient(135deg, var(--surface), rgba(45, 140, 78, 0.03));
}

/* ── Forward Navigation: Slide Right ── */
@keyframes mmm-slide-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
/* ── Backward Navigation: Slide Left ── */
@keyframes mmm-slide-left {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
.mmm-nav-forward { animation: mmm-slide-right 0.3s ease both; }
.mmm-nav-backward { animation: mmm-slide-left 0.3s ease both; }

/* ── Progress Bar Flash on Complete ── */
@keyframes mmm-progress-flash {
  0% { box-shadow: none; }
  50% { box-shadow: 0 0 12px rgba(45, 140, 78, 0.4); }
  100% { box-shadow: none; }
}
.progress-mini.mmm-flash {
  animation: mmm-progress-flash 0.6s ease;
}