/* ==============================
   ROCKET ACADEMY — Premium Dark Theme
   Design System v2.0
   ============================== */

/* ---- Base Components ---- */

.input-field {
    @apply w-full bg-rocket-surface border border-rocket-border rounded-xl px-4 py-3
           text-rocket-text placeholder-rocket-muted/50
           focus:outline-none focus:ring-2 focus:ring-rocket-orange/50 focus:border-rocket-orange/50
           transition-all duration-200;
}

.btn-primary {
    @apply inline-flex items-center justify-center gap-2
           bg-gradient-to-r from-rocket-orange to-rocket-orange-light
           text-white font-semibold rounded-xl px-6 py-3
           hover:shadow-lg hover:shadow-rocket-orange/30
           active:scale-[0.98] transition-all duration-200;
}

.btn-secondary {
    @apply inline-flex items-center justify-center gap-2
           bg-rocket-surface border border-rocket-border
           text-rocket-text font-medium rounded-xl px-6 py-3
           hover:bg-rocket-card hover:border-rocket-orange/30
           transition-all duration-200;
}

/* ---- Navigation ---- */

.nav-link {
    @apply flex items-center gap-2 px-4 py-2 rounded-lg
           text-sm text-rocket-muted
           hover:text-white hover:bg-rocket-surface
           transition-all duration-200;
}

.nav-link.active {
    @apply text-white bg-rocket-surface;
}

.mobile-nav-link {
    @apply flex flex-col items-center gap-1 text-rocket-muted
           transition-colors duration-200;
}

.mobile-nav-link.active {
    @apply text-rocket-orange;
}

/* ---- Flash Messages ---- */

.flash-message {
    @apply flex items-center gap-3 px-5 py-3 rounded-xl
           bg-rocket-card/95 backdrop-blur-xl border border-rocket-border
           shadow-2xl min-w-[250px];
}

.flash-success { @apply border-rocket-green/30; }
.flash-error { @apply border-red-500/30; }
.flash-warning { @apply border-yellow-500/30; }
.flash-xp { @apply border-rocket-orange/40 bg-rocket-orange/10; }
.flash-achievement { @apply border-rocket-gold/40 bg-rocket-gold/10; }

/* ---- Animations ---- */

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes flame {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.streak-flame {
    animation: flame 1.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 107, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 107, 0, 0.4); }
}
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Progress bar fill */
.progress-bar-animated { animation: progress-fill 1.5s ease-out; }
@keyframes progress-fill { from { width: 0%; } }

/* Badge glow */
.badge-earned { animation: badge-glow 3s ease-in-out infinite alternate; }
@keyframes badge-glow {
    0% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.12); }
}

/* XP popup */
@keyframes xp-fly {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(1.3); }
}
.xp-fly { animation: xp-fly 1.5s ease-out forwards; }

/* Lesson content typography is defined inline in lesson.html (premium version) */

/* ---- Utility Classes ---- */

.grayscale { filter: grayscale(100%); }

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Confetti Canvas ---- */

#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* ---- Scrollbar ---- */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0A0A0F; }
::-webkit-scrollbar-thumb { background: #1E1E2E; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2E2E3E; }

/* ---- Responsive ---- */

@media (max-width: 640px) {
    .font-display { letter-spacing: 0.05em; }
}