body { font-family: 'Baloo 2', sans-serif; }

/* === Keyframes === */
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(0.92); } 100% { transform: scale(1); } }
@keyframes bounce-in { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.08); } 70% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } }
@keyframes bounce-up { 0% { transform: translateY(100px); opacity: 0; } 60% { transform: translateY(-10px); } 80% { transform: translateY(5px); } 100% { transform: translateY(0); opacity: 1; } }
@keyframes confetti-fall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 5px rgba(0, 210, 106, 0.3); } 50% { box-shadow: 0 0 25px rgba(0, 210, 106, 0.6); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* === Utility Classes === */
.animate-bounce-in { animation: bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.animate-bounce-up { animation: bounce-up 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.animate-fade-in-up { animation: fade-in-up 0.5s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-slow { animation: float 5s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-wiggle { animation: wiggle 0.5s ease-in-out; }
.animate-scale-in { animation: scale-in 0.4s ease-out forwards; }
.animate-shake { animation: shake 0.4s ease-out; }
.animate-slide-up { animation: slide-up 0.5s ease-out forwards; }

/* === Scroll Animation === */
.scroll-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.scroll-animate.visible { opacity: 1; transform: translateY(0); }

/* === Confetti === */
.confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti-piece { position: absolute; width: 10px; height: 20px; opacity: 0; animation: confetti-fall 2s ease-out forwards; }

/* === Ads === */
.ads-container { min-height: 100px; margin: 2rem auto; text-align: center; overflow: hidden; background-color: rgba(255,255,255,0.1); border-radius: 1rem; display: flex; align-items: center; justify-content: center; position: relative; }
.ad-label { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 10px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 1px; }

/* === Modals === */
.modal-overlay { display: none; }
.modal-overlay.open { display: flex; animation: fade-in-up 0.3s ease-out; }
.modal-overlay.open > div { animation: scale-in 0.3s ease-out; }

/* === Prose === */
.prose-custom p { margin-bottom: 1.5rem; line-height: 1.8; text-align: justify; }
.prose-custom h3 { margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 800; color: #00d26a; font-size: 1.5rem; border-bottom: 2px solid #f0f0f0; padding-bottom: 0.5rem; }
.prose-custom h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 700; color: #ff4081; font-size: 1.2rem; }
.prose-custom ul { list-style-type: disc; padding-left: 2rem; margin-bottom: 1.5rem; }
.prose-custom li { margin-bottom: 0.5rem; }
.prose-custom strong { color: #333; }
.prose-custom blockquote { border-left: 4px solid #ff4081; padding-left: 1rem; font-style: italic; color: #666; margin: 1.5rem 0; background: #fff0f5; padding: 1rem; border-radius: 0 8px 8px 0; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #00b359; }
::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 4px; }

/* === Mobile Menu === */
#mobileMenu { transition: max-height 0.3s ease-in-out; max-height: 0; overflow: hidden; }
#mobileMenu.open { max-height: 300px; }

/* === Letter Cards === */
.tap-pop { animation: pop 220ms ease-out; }

/* === Drop Zone === */
.drop-box { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.drop-box.empty { border-color: rgba(255,255,255,0.5); animation: pulse-glow 1.5s ease-in-out infinite; }

/* === Choice Buttons === */
.choice-btn { transition: all 0.2s; }
.choice-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.choice-btn:active { transform: scale(0.95); }
.choice-btn.selected { ring: 4px solid #ff4081; transform: scale(1.1); }

/* === Toast === */
#toast { transition: opacity 0.3s ease-out, transform 0.3s ease-out; }

/* === Character Animations === */
@keyframes galope {
  0%   { transform: translateY(0) rotate(0deg); }
  15%  { transform: translateY(-8px) rotate(-2deg); }
  30%  { transform: translateY(-14px) rotate(-4deg) scale(1.03); }
  45%  { transform: translateY(-5px) rotate(-1deg); }
  60%  { transform: translateY(-2px) rotate(2deg); }
  75%  { transform: translateY(-10px) rotate(3deg) scale(0.98); }
  90%  { transform: translateY(-3px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes danca {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  20%  { transform: rotate(6deg) translateY(-10px) scale(1.05); }
  40%  { transform: rotate(-4deg) translateY(-5px); }
  60%  { transform: rotate(8deg) translateY(-14px) scale(1.02); }
  80%  { transform: rotate(-2deg) translateY(-3px); }
}

@keyframes aponta {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  50%  { transform: translateX(8px) translateY(-4px) rotate(-5deg); }
}

.animate-galope { animation: galope 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
.animate-danca { animation: danca 1.2s ease-in-out infinite; }
.animate-aponta { animation: aponta 1.5s ease-in-out infinite; }