/* Base animations */
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.2s ease-out;
}

/* Global Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* Hide custom scrollbars on mobile/touch devices for native performance */
/* @media (max-width: 768px) {
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  * {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
} */

/* .no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
} */

/* =============================================
   LIGHT MODE STYLES
   ============================================= */

/* Light mode variables */
html.light-mode {
  --bg-color: #fcfcfd;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fa;
  --border-color: rgba(0, 0, 0, 0.06);
  --border-hover: rgba(0, 0, 0, 0.12);
  --text-main: #111111;
  --text-muted: #555555;
  --text-dim: #888888;
}

html.light-mode body {
  background-color: var(--bg-color);
  color: var(--text-main);
}

/* Light mode logo inversion */
html.light-mode .logo-img {
  filter: invert(1) brightness(0.2);
}

html.light-mode .sidebar-logo-text,
html.light-mode .nav-logo-text,
html.light-mode .mobile-logo-text {
  color: #000000 !important;
}

/* Light mode section background - specifically for landing page sections */
html.light-mode .bg-black {
  background-color: #ffffff !important;
}

/* Light mode scrollbar */
html.light-mode ::-webkit-scrollbar-thumb {
  background: #e5e5e7;
}

html.light-mode ::-webkit-scrollbar-thumb:hover {
  background: #d1d1d6;
}

/* Light mode glass panel */
html.light-mode .glass-panel {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

/* Light mode bento card - more premium appearance */
html.light-mode .bento-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

html.light-mode .bento-card:hover {
  border-color: var(--border-hover) !important;
  background-color: var(--bg-card-hover) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Light mode typography overrides */
html.light-mode .text-\[\#EEEEEE\],
html.light-mode .text-\[\#eeeeee\],
html.light-mode .text-white {
  color: #111111 !important;
}

html.light-mode .text-\[\#888888\] {
  color: #555555 !important;
}

html.light-mode .text-\[\#555555\] {
  color: #777777 !important;
}

html.light-mode .text-\[\#333333\],
html.light-mode .text-\[\#333\] {
  color: #999999 !important;
}

/* Specific section: "Everything you need to scale your engagement" */
html.light-mode #features h2 {
  color: #000000 !important;
}

/* Light mode background colors */
html.light-mode [class*='bg-[#050505]'],
html.light-mode [class*='bg-[#0A0A0A]'],
html.light-mode [class*='bg-[#0a0a0a]'],
html.light-mode [class*='bg-[#080808]'] {
  background-color: #fcfcfd !important;
}

html.light-mode [class*='bg-[#111111]'] {
  background-color: #f3f3f5 !important;
}

html.light-mode [class*='bg-[#1a1a1a]'],
html.light-mode [class*='bg-[#1A1A1A]'] {
  background-color: #ededef !important;
}

/* Light mode borders */
html.light-mode [class*='border-[#ffffff08]'],
html.light-mode [class*='border-[#ffffff14]'],
html.light-mode [class*='border-white/5'],
html.light-mode [class*='border-white/10'] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Light mode hover states */
html.light-mode [class*='hover:bg-[#ffffff08]']:hover,
html.light-mode [class*='hover:bg-[#ffffff05]']:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

html.light-mode .hover\:bg-\[\#1a1a1a\]:hover {
  background-color: #e5e5e7 !important;
}

/* Light mode sidebar and mobile header */
html.light-mode aside,
html.light-mode .md\:hidden.fixed.top-0 {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light-mode .md\:hidden.fixed.top-0 span {
  color: #000000 !important;
}

/* Light mode inputs and textareas */
html.light-mode input,
html.light-mode textarea {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #111111 !important;
}

html.light-mode input:focus,
html.light-mode textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

/* Light mode buttons */
html.light-mode button.text-\[\#EEEEEE\],
html.light-mode button.text-white {
  color: #111111 !important;
}

html.light-mode button.bg-\[\#111111\],
html.light-mode button.bg-\[\#0A0A0A\],
html.light-mode button.bg-white\/5 {
  background-color: #f3f3f5 !important;
  color: #111111 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

html.light-mode button.bg-\[\#111111\]:hover,
html.light-mode button.bg-\[\#0A0A0A\]:hover,
html.light-mode button.bg-white\/5:hover,
html.light-mode button.bg-white\/10:hover {
  background-color: #eaeaec !important;
}

/* Fix for "Next Step" and other ghost buttons in light mode */
html.light-mode button.bg-white\/10 {
  background-color: #f1f1f4 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #111111 !important;
}

/* Light mode: Preserve accent backgrounds like blue-600 */
html.light-mode .bg-blue-600,
html.light-mode .bg-blue-500 {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

html.light-mode .bg-blue-600 .text-white,
html.light-mode .bg-blue-500 .text-white,
html.light-mode .text-white[class*='bg-blue'],
html.light-mode button.bg-blue-600,
html.light-mode button.bg-blue-500 {
  color: #ffffff !important;
}

/* Accent text colors in light mode */
html.light-mode .text-blue-400,
html.light-mode .text-blue-500 {
  color: #2563eb !important;
}

html.light-mode .fixed.inset-0[class*='bg-black/60'] {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

html.light-mode [class*='bg-[#111]'],
html.light-mode [class*='bg-[#111111]'] {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

html.light-mode [class*='bg-[rgba(10,10,10,0.6)]'],
html.light-mode [class*='bg-[rgba(5,5,5,0.8)]'] {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

/* "Continue or start fresh" modal text fix */
html.light-mode [class*='bg-[#111]'] h3,
html.light-mode [class*='bg-[#111]'] span,
html.light-mode [class*='bg-[#111111]'] h3 {
  color: #000000 !important;
}

html.light-mode [class*='bg-[#111]'] p,
html.light-mode [class*='bg-[#111111]'] p {
  color: #555555 !important;
}

/* Button transitions */
html.light-mode button {
  transition: all 0.2s ease-in-out !important;
}

/* Background noise should be subtle in light mode */
html.light-mode .bg-noise {
  opacity: 0.03 !important;
}

/* iPhone Mockup Light Mode */
html.light-mode .iphone-frame {
  background-color: #fcfcfd !important;
  border-color: #e5e5e7 !important;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .iphone-screen {
  background-color: #ffffff !important;
  color: #000000 !important;
}

html.light-mode .iphone-device span.text-white,
html.light-mode .iphone-device svg.text-white {
  color: #000000 !important;
}

html.light-mode .iphone-device div.bg-white {
  background-color: #000000 !important;
}

html.light-mode .iphone-home-indicator {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .iphone-tabs {
  background-color: #f1f1f4 !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

html.light-mode .iphone-tabs button {
  color: #8e8e93 !important;
}

html.light-mode .iphone-tabs button[class*='bg-white/10'] {
  background-color: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

html.light-mode .ig-post-container,
html.light-mode .ig-dm-container {
  background-color: #ffffff !important;
}

html.light-mode .ig-header,
html.light-mode .ig-footer {
  background-color: #ffffff !important;
  border-color: #efefef !important;
}

html.light-mode .ig-text,
html.light-mode .ig-icon {
  color: #000000 !important;
}

html.light-mode .ig-icon-muted {
  color: #8e8e93 !important;
}

html.light-mode .ig-sheet {
  background-color: #ffffff !important;
  border-color: #efefef !important;
}

html.light-mode .ig-input {
  background-color: #f5f5f5 !important;
  border-color: #efefef !important;
}

html.light-mode .ig-profile-btn {
  background-color: #efefef !important;
  color: #000000 !important;
}

html.light-mode .ig-bubble {
  background-color: #f1f1f4 !important;
  border: 1px solid #e5e5e7 !important;
}

html.light-mode .ig-button {
  background-color: #ffffff !important;
  border-color: #efefef !important;
  color: #000000 !important;
}