/* Kanteek — Shared stylesheet (FR / EN / AR) */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { overflow-x: hidden; }

::selection { background: #6366F1; color: #fff; }

/* ──────────────────────────────────────────────── */
/*  Arabic / RTL support                            */
/* ──────────────────────────────────────────────── */
html[lang="ar"] {
  font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', 'Exo 2', system-ui, sans-serif;
}
html[lang="ar"] .font-display {
  font-family: 'Cairo', 'Tajawal', 'Orbitron', system-ui, sans-serif;
  font-weight: 800;
}
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .hero-grid { transform: scaleX(-1); }

/* Arrow glyphs that need to flip in RTL */
html[dir="rtl"] svg.rtl-flip { transform: scaleX(-1); }

/* ──────────────────────────────────────────────── */
/*  Brand visual effects                             */
/* ──────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(100deg, #6366F1 0%, #06B6D4 45%, #22C55E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: shift 10s ease infinite;
}
@keyframes shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(99,102,241,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99,102,241,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 20%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 60% at 50% 20%, #000 40%, transparent 100%);
  pointer-events: none;
}

.hero-dots {
  background-image: radial-gradient(rgba(255,255,255,0.35) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

.float-1 { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 7s ease-in-out infinite .4s; }
.float-3 { animation: float 5.5s ease-in-out infinite .8s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ──────────────────────────────────────────────── */
/*  Scroll reveal                                    */
/* ──────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────────────────────────────────────── */
/*  Navbar                                           */
/* ──────────────────────────────────────────────── */
#nav.scrolled nav {
  box-shadow: 0 14px 40px -18px rgba(17, 25, 54, 0.25);
  background-color: rgba(255,255,255,0.95);
}
.lang-btn.is-active { background: #0B1020; color: #fff; }

/* ──────────────────────────────────────────────── */
/*  Forms                                            */
/* ──────────────────────────────────────────────── */
input, select, textarea { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }

/* ──────────────────────────────────────────────── */
/*  Reduced motion                                   */
/* ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-gradient, .float-1, .float-2, .float-3, .reveal {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}