/* Single source of truth: load IBM Plex Sans Arabic (must be first) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

/* Tailwind v4 core */
@import "tailwindcss";

/* Theme tokens (Tailwind v4) */
@theme {
  --font-family-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', Arial, sans-serif;

  /* Primary scale */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #342e87;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;

  /* Secondary scale */
  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;
  --color-secondary-200: #e2e8f0;
  --color-secondary-300: #cbd5e1;
  --color-secondary-400: #94a3b8;
  --color-secondary-500: #64748b;
  --color-secondary-600: #475569;
  --color-secondary-700: #334155;
  --color-secondary-800: #1e293b;
  --color-secondary-900: #0f172a;
}

/* Global typography and direction */
body {
  font-family: var(--font-family-sans);
  overflow-x: hidden;
}

/* Mega menu full width without overflow */
.mega-menu-full {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.fade-in-down {
  animation: fadeInDown 0.5s ease-out both;
}

/* Hero text transitions and glow */
.hero-text {
  transition: opacity 600ms ease, transform 600ms ease;
}
.hero-text.is-hiding {
  opacity: 0;
  transform: translateY(10px);
}
.text-glow {
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 4px 18px rgba(0,0,0,0.35);
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 40% at 50% 70%, rgba(14,165,233,0.20), transparent 70%),
              radial-gradient(40% 30% at 80% 20%, rgba(99,102,241,0.18), transparent 70%);
  filter: blur(10px);
}
/* Hero slider indicators helper */
.hero-indicator {
  @apply w-2.5 h-2.5 rounded-full bg-white opacity-50 transition-opacity;
}
.hero-indicator-active {
  @apply opacity-100;
}

/* Custom button styles */
.btn-primary {
  @apply bg-primary-600 hover:bg-primary-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 ease-in-out;
}

.btn-secondary {
  @apply bg-secondary-600 hover:bg-secondary-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 ease-in-out;
}

/* Asymmetric hero button: big top-right & bottom-left corners */
.btn-asym {
  @apply rounded-tr-3xl rounded-bl-3xl rounded-tl-lg rounded-br-lg transition-all duration-300 ease-out shadow-md hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60 active:translate-y-0 hover:rounded-tr-lg hover:rounded-bl-lg hover:rounded-tl-3xl hover:rounded-br-3xl;
}

/* Asymmetric hero button mirror: big top-left & bottom-right corners */
.btn-asym-mirror {
  @apply rounded-tl-3xl rounded-br-3xl rounded-tr-lg rounded-bl-lg transition-all duration-300 ease-out shadow-md hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60 active:translate-y-0 hover:rounded-tl-lg hover:rounded-br-lg hover:rounded-tr-3xl hover:rounded-bl-3xl;
}

/* Card hover effects */
.card-hover {
  @apply transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl;
}

/* Link underline animation */
.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition: background-size 200ms ease;
}
.link-underline:hover {
  background-size: 100% 2px;
}

/* Hero background handled inline via inc/hero.php */

/* Gradient helpers for energy/secondary accents */
.energy-gradient { background: linear-gradient(135deg, hsl(267, 84%, 64%), hsl(267, 84%, 74%)); }
.secondary-gradient { background: linear-gradient(135deg, hsl(193, 75%, 59%), hsl(193, 75%, 69%)); }

/* Hero curved SVG - mobile scale only */
@media (max-width: 639px) {
  #hero-curve {
    transform: scale3d(1.5, 1.5, 1.5);
  }
}
