/* Qur'an for Women - Landing Page Custom Styles */

/* ========================================
   Animations
   ======================================== */

/* Fade up animation for hero content */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s ease-out forwards;
}

/* Slow spin for decorative elements */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 30s linear infinite;
}

/* Gentle float animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Gentle pulse for CTA elements */
@keyframes gentle-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.animate-gentle-pulse {
  animation: gentle-pulse 2s ease-in-out infinite;
}

/* ========================================
   Scrollbar Styling
   ======================================== */

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ========================================
   Phone Mockup Styling
   ======================================== */

.phone-mockup {
  filter: drop-shadow(0 25px 50px rgba(77, 64, 57, 0.25));
}

.phone-mockup::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at center, rgba(232, 138, 154, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
}

/* ========================================
   Screenshot Cards
   ======================================== */

.screenshot-card {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.screenshot-card:hover {
  transform: translateY(-8px) scale(1.02);
}

/* ========================================
   Smooth Scrolling
   ======================================== */

html {
  scroll-behavior: smooth;
}

/* ========================================
   Typography Enhancements
   ======================================== */

/* Arabic text rendering */
.font-arabic {
  font-feature-settings: "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading tracking */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

/* ========================================
   Interactive Elements
   ======================================== */

/* Button hover states */
a, button {
  transition: all 0.2s ease;
}

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #e06b7e;
  outline-offset: 2px;
}

/* ========================================
   Gradient Text (for special headings)
   ======================================== */

.text-gradient {
  background: linear-gradient(135deg, #e06b7e 0%, #d44d63 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   Card Hover Effects
   ======================================== */

.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(77, 64, 57, 0.15);
}

/* ========================================
   Language Badges Animation
   ======================================== */

@keyframes badge-float-1 {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -5px); }
}

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

section#languages .absolute.top-0 {
  animation: badge-float-1 3s ease-in-out infinite;
}

section#languages .absolute.top-16.right-0 {
  animation: badge-float-2 3.5s ease-in-out infinite 0.5s;
}

section#languages .absolute.bottom-16.right-0 {
  animation: badge-float-2 4s ease-in-out infinite 1s;
}

section#languages .absolute.bottom-0 {
  animation: badge-float-1 3.2s ease-in-out infinite 0.3s;
}

section#languages .absolute.bottom-16.left-0 {
  animation: badge-float-2 3.8s ease-in-out infinite 0.7s;
}

section#languages .absolute.top-16.left-0 {
  animation: badge-float-2 4.2s ease-in-out infinite 1.2s;
}

/* ========================================
   Mobile Navigation (Simple)
   ======================================== */

@media (max-width: 767px) {
  /* Stack navigation items on mobile */
  nav {
    flex-wrap: wrap;
  }
}

/* ========================================
   Reduced Motion Support
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  header,
  footer,
  .phone-mockup,
  section#download {
    display: none !important;
  }
  
  body {
    background: white !important;
  }
}