/* LinguaNaija — custom design system on top of Tailwind CDN */

:root {
  --brand-50: #f5f3ff;
  --brand-100: #ede9fe;
  --brand-500: #7c3aed;
  --brand-600: #6d28d9;
  --brand-700: #5b21b6;
  --brand-900: #3b0764;
  --accent-orange: #fb923c;
  --accent-green: #22c55e;
  --accent-gold: #f59e0b;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, -apple-system, sans-serif;
}

.font-display { font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif; }

/* ---------- Gradient backgrounds ---------- */
.bg-brand-gradient {
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 45%, #9333ea 100%);
}
.bg-hero-soft {
  background: radial-gradient(circle at 20% 20%, #f5f3ff 0%, #ffffff 55%, #fdf4ff 100%);
}
.text-gradient {
  background: linear-gradient(90deg, #7c3aed, #c026d3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Floating blobs (hero decoration) ---------- */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(6deg); }
}
@keyframes float-slower {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(14px) translateX(10px); }
}
.animate-float { animation: float-slow 6s ease-in-out infinite; }
.animate-float-slower { animation: float-slower 9s ease-in-out infinite; }
.animate-float-delay { animation: float-slow 6s ease-in-out infinite; animation-delay: 1.5s; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45); }
  100% { box-shadow: 0 0 0 22px rgba(124, 58, 237, 0); }
}
.animate-pulse-ring { animation: pulse-ring 2.2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ---------- Fade / rise-in on load ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fade-up-1 { animation-delay: .05s; }
.fade-up-2 { animation-delay: .15s; }
.fade-up-3 { animation-delay: .25s; }
.fade-up-4 { animation-delay: .35s; }
.fade-up-5 { animation-delay: .45s; }

@keyframes scale-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.scale-in { animation: scale-in .6s cubic-bezier(0.16,1,0.3,1) both; }

/* ---------- Hover interactions ---------- */
.hover-lift { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(109, 40, 217, 0.35); }

.hover-grow { transition: transform .25s ease; }
.hover-grow:hover { transform: scale(1.05); }

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-shine:hover::after { left: 125%; }

/* ---------- Card / badge chips like reference image ---------- */
.chip-floating {
  animation: float-slow 5s ease-in-out infinite;
  backdrop-filter: blur(6px);
}

/* ---------- Progress bars ---------- */
.progress-bar-fill {
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Scrollbar polish ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }

/* ---------- Letter flip cards (alphabet learning) ---------- */
.letter-card { perspective: 1000px; }
.letter-card-inner {
  position: relative; transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.letter-card.flipped .letter-card-inner { transform: rotateY(180deg); }
.letter-face { backface-visibility: hidden; }
.letter-back { transform: rotateY(180deg); }

/* ---------- Toast ---------- */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-in { animation: toast-in .35s cubic-bezier(0.16,1,0.3,1) both; }

/* ---------- Confetti burst ---------- */
.ln-confetti-piece {
  position: fixed; width: 8px; height: 12px; pointer-events: none; z-index: 9998;
  border-radius: 2px;
  animation: confetti-burst 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes confetti-burst {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 220px)) rotate(var(--rot)); opacity: 0; }
}

/* ---------- XP progress ring ---------- */
.xp-ring { transform: rotate(-90deg); }
.xp-ring circle { transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1); }

/* ---------- Level badge ---------- */
.level-badge {
  background: conic-gradient(#7c3aed calc(var(--pct, 0) * 1%), #ede9fe calc(var(--pct, 0) * 1%));
  transition: background 1s cubic-bezier(.16,1,.3,1);
}
.dark .level-badge { background: conic-gradient(#a78bfa calc(var(--pct, 0) * 1%), #2a1f42 calc(var(--pct, 0) * 1%)); }

/* ---------- Streak flame glow ---------- */
@keyframes flame-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(249,115,22,0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 10px rgba(249,115,22,0.85)); transform: scale(1.08); }
}
.streak-flame { animation: flame-glow 1.6s ease-in-out infinite; display: inline-block; }

/* ---------- Game-like button press feedback ---------- */
.game-btn { transition: transform .12s ease, box-shadow .12s ease; }
.game-btn:active { transform: scale(0.94); }

/* ---------- XP toast pop ---------- */
@keyframes xp-pop {
  0% { transform: translateY(8px) scale(0.9); opacity: 0; }
  15% { transform: translateY(0) scale(1.05); opacity: 1; }
  85% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-10px) scale(0.95); opacity: 0; }
}
.xp-toast { animation: xp-pop 2.2s ease forwards; }

/* ---------- Correct/incorrect exercise feedback ---------- */
@keyframes shake-wrong { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); } }
.shake-wrong { animation: shake-wrong 0.6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes pop-correct { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.pop-correct { animation: pop-correct 0.4s ease; }

/* ---------- Dark mode ---------- */
.dark body { background-color: #0f0a19; color: #ede9fe; }
.dark .bg-hero-soft { background: radial-gradient(circle at 20% 20%, #1a1330 0%, #0f0a19 55%, #170f27 100%); }
.dark .bg-white { background-color: #171025 !important; }
.dark .border-violet-100 { border-color: #2a1f42 !important; }
.dark .text-slate-800 { color: #ede9fe !important; }
.dark .text-slate-900 { color: #f5f3ff !important; }
.dark .text-slate-600, .dark .text-slate-500, .dark .text-slate-400 { color: #9d8fc7 !important; }
.dark .bg-slate-50 { background-color: #140e22 !important; }
.dark .bg-violet-50\/40 { background-color: #0f0a19 !important; }
.dark ::-webkit-scrollbar-thumb { background: #4c1d95; }

/* ---------- Page transition loading bar ---------- */
#page-loading-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #7c3aed, #d946ef, #f59e0b);
  background-size: 200% 100%;
  animation: bar-shimmer 1.2s linear infinite;
  z-index: 9999; opacity: 0;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.6);
}
@keyframes bar-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: .08s; }
.reveal-delay-2.is-visible { transition-delay: .16s; }
.reveal-delay-3.is-visible { transition-delay: .24s; }
.reveal-delay-4.is-visible { transition-delay: .32s; }

/* ---------- Bottom mobile nav (app feel) ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.85);
  border-top: 1px solid rgba(124,58,237,0.12);
  box-shadow: 0 -8px 30px -12px rgba(109,40,217,0.25);
  padding-bottom: env(safe-area-inset-bottom);
}
.dark .bottom-nav { background: rgba(15,10,25,0.9); border-top-color: #2a1f42; }
.bottom-nav a { transition: transform .2s ease, color .2s ease; }
.bottom-nav a.active, .bottom-nav a:active { color: var(--brand-600); transform: translateY(-3px); }
.dark .bottom-nav a.active { color: #c4b5fd; }
.bottom-nav .bn-icon { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.bottom-nav a.active .bn-icon { transform: scale(1.15); }

/* ---------- Sidebar scroll ---------- */
.sidebar-scroll { overflow-y: auto; scrollbar-width: thin; }

/* ---------- Theme toggle ---------- */
.theme-toggle { transition: background-color .3s ease, transform .3s ease; }
.theme-toggle:hover { transform: rotate(20deg); }

/* ---------- Generic page fade-in ---------- */
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
.page-fade-in { animation: page-fade-in .45s ease both; }


[x-cloak] { display: none !important; }

.ln-audio-playing { color: #7c3aed !important; animation: ln-audio-pulse 0.6s ease-in-out infinite; }
@keyframes ln-audio-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- Homepage: marquee + gradient mesh + tilt ---------- */
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 28s linear infinite; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

@keyframes mesh-drift-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.1); } }
@keyframes mesh-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,20px) scale(1.15); } }
.mesh-blob-1 { animation: mesh-drift-1 12s ease-in-out infinite; }
.mesh-blob-2 { animation: mesh-drift-2 15s ease-in-out infinite; }

.tilt-card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; transform-style: preserve-3d; }
.tilt-card:hover { transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) translateY(-8px) scale(1.02); }

.bento-card { position: relative; overflow: hidden; }
.bento-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(circle at 30% 20%, rgba(124,58,237,.12), transparent 60%);
}
.bento-card:hover::before { opacity: 1; }

.gradient-underline { position: relative; display: inline-block; }
.gradient-underline::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 3px; width: 100%;
  background: linear-gradient(90deg,#7c3aed,#ec4899,#f59e0b); border-radius: 999px;
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.gradient-underline:hover::after { transform: scaleX(1); }