/* ==============================================================================
   CHEERS (🥂) MASTER STYLESHEET
   Mobile-first 100dvh feel, Bento grid, & Clinking Animations
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --app-height: 100dvh;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background-color: #0D0F12;
  color: #F3F4F6;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  user-select: none;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0D0F12;
}
::-webkit-scrollbar-thumb {
  background: #272B35;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3B4252;
}

/* ==============================================================================
   CLINKING GLASSES ANIMATION (🥂)
   ============================================================================== */

.clinking-logo:hover .glass-left,
.clink-animate .glass-left {
  animation: clinkLeft 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
  transform-origin: 230px 260px;
}

.clinking-logo:hover .glass-right,
.clink-animate .glass-right {
  animation: clinkRight 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
  transform-origin: 282px 260px;
}

.clinking-logo:hover .sparkle-burst,
.clink-animate .sparkle-burst {
  animation: sparkleFlash 1.2s ease-in-out infinite;
}

@keyframes clinkLeft {
  0% { transform: rotate(16deg); }
  45% { transform: rotate(24deg) translateY(-2px); }
  55% { transform: rotate(8deg) translate(8px, 1px); }
  70% { transform: rotate(10deg); }
  100% { transform: rotate(16deg); }
}

@keyframes clinkRight {
  0% { transform: rotate(-16deg); }
  45% { transform: rotate(-24deg) translateY(-2px); }
  55% { transform: rotate(-8deg) translate(-8px, 1px); }
  70% { transform: rotate(-10deg); }
  100% { transform: rotate(-16deg); }
}

@keyframes sparkleFlash {
  0%, 40% { opacity: 0; transform: scale(0.6); }
  55% { opacity: 1; transform: scale(1.3); }
  70% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0.3; transform: scale(0.8); }
}

/* Subtle Floating Bob Animation */
@keyframes floatBob {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
.animate-float {
  animation: floatBob 4s ease-in-out infinite;
}

/* Pulse Amber Glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.25); }
  50% { box-shadow: 0 0 35px rgba(245, 158, 11, 0.55); }
}
.glow-amber {
  animation: pulseGlow 3s infinite;
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(18, 21, 28, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
  background: rgba(24, 27, 35, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Mobile Navigo-Style App Dock */
.navigo-dock {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 32px);
  max-width: 440px;
  background: rgba(15, 17, 23, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
}

/* Drawer Backdrop */
.drawer-backdrop {
  background: rgba(5, 6, 8, 0.75);
  backdrop-filter: blur(8px);
}

/* ==============================================================================
   THEME DEFINITIONS (5 Free + 5 Pro Themes)
   ============================================================================== */

/* Free Theme 1: Minimal Slate (Default) */
.theme-minimal-slate {
  --bg-primary: #0D0F12;
  --bg-card: #181B22;
  --accent-color: #F59E0B;
  --accent-hover: #D97706;
  --text-main: #F3F4F6;
  --text-muted: #9CA3AF;
  --border-card: #272B35;
}

/* Free Theme 2: Warm Cream */
.theme-warm-cream {
  --bg-primary: #F7F5F0;
  --bg-card: #FFFFFF;
  --accent-color: #78350F;
  --accent-hover: #92400E;
  --text-main: #1C1917;
  --text-muted: #78716C;
  --border-card: #E7E5E4;
}

/* Free Theme 3: Sunset Glow */
.theme-sunset-glow {
  --bg-primary: #120E15;
  --bg-card: #1E1724;
  --accent-color: #FF5E3A;
  --accent-hover: #E04826;
  --text-main: #FFF1EE;
  --text-muted: #B7A8A3;
  --border-card: #3A2B44;
}

/* Free Theme 4: Forest Sage */
.theme-forest-sage {
  --bg-primary: #0A120E;
  --bg-card: #13221B;
  --accent-color: #10B981;
  --accent-hover: #059669;
  --text-main: #ECFDF5;
  --text-muted: #6EE7B7;
  --border-card: #1E3A2E;
}

/* Free Theme 5: Clean Mono */
.theme-clean-mono {
  --bg-primary: #000000;
  --bg-card: #111111;
  --accent-color: #FFFFFF;
  --accent-hover: #E5E5E5;
  --text-main: #FFFFFF;
  --text-muted: #A3A3A3;
  --border-card: #262626;
}

/* PRO Theme 1: Cyberpunk Neon */
.theme-cyberpunk-neon {
  --bg-primary: #0A0612;
  --bg-card: #140C24;
  --accent-color: #06B6D4;
  --accent-hover: #0891B2;
  --text-main: #F43F5E;
  --text-muted: #C084FC;
  --border-card: #4C1D95;
  box-shadow: inset 0 0 50px rgba(168, 85, 247, 0.1);
}

/* PRO Theme 2: Liquid Glass */
.theme-liquid-glass {
  --bg-primary: #0F172A;
  --bg-card: rgba(30, 41, 59, 0.5);
  --accent-color: #38BDF8;
  --accent-hover: #0284C7;
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --border-card: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
}

/* PRO Theme 3: Retro Terminal */
.theme-retro-terminal {
  --bg-primary: #050B05;
  --bg-card: #0A160A;
  --accent-color: #22C55E;
  --accent-hover: #16A34A;
  --text-main: #4ADE80;
  --text-muted: #15803D;
  --border-card: #14532D;
  font-family: var(--font-mono);
}

/* PRO Theme 4: Bento Grid */
.theme-bento-grid {
  --bg-primary: #0B0E14;
  --bg-card: #151922;
  --accent-color: #6366F1;
  --accent-hover: #4F46E5;
  --text-main: #EEF2FF;
  --text-muted: #A5B4FC;
  --border-card: #283042;
}

/* PRO Theme 5: Obsidian Gold */
.theme-obsidian-gold {
  --bg-primary: #050505;
  --bg-card: #12100E;
  --accent-color: #EAB308;
  --accent-hover: #CA8A04;
  --text-main: #FEF08A;
  --text-muted: #A1A1AA;
  --border-card: #3D3320;
}