/* ==============================================
   Moshan — Custom Styles
   Beyond what Tailwind CDN provides
   ============================================== */

/* Smooth scroll with sticky nav offset */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Font-family direction switching */
html[dir="ltr"] body {
  font-family: 'Inter', sans-serif;
}

html[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}

/* Theme transition */
body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Disable transitions during language switch */
.no-transition,
.no-transition * {
  transition: none !important;
}

/* ==============================================
   Scroll Animations
   ============================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
[data-animate][data-delay="1"] { transition-delay: 100ms; }
[data-animate][data-delay="2"] { transition-delay: 200ms; }
[data-animate][data-delay="3"] { transition-delay: 300ms; }

/* ==============================================
   Reduced Motion
   ============================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body {
    transition: none;
  }
}

/* ==============================================
   Navbar glassmorphism (Safari prefix)
   ============================================== */
#navbar {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ==============================================
   Phone mockup styling
   ============================================== */
.phone-mockup {
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.08),
    0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.phone-mockup-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .phone-mockup-float {
    animation: none;
  }
}

/* ==============================================
   Mobile menu animation
   ============================================== */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

#mobile-menu.open {
  max-height: 300px;
}

/* ==============================================
   Focus styles for accessibility
   ============================================== */
:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==============================================
   CTA section gradient overlay (dark mode)
   ============================================== */
.cta-section-dark {
  background: linear-gradient(135deg, #0C0F0F 0%, #1a1a1a 50%, #0C0F0F 100%);
}

.dark .cta-section-dark {
  background: linear-gradient(135deg, #0C0F0F 0%, #1a1500 50%, #0C0F0F 100%);
}