/* ============================================================
   Spotlight Studio — global styles
   ============================================================ */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255, 45, 122, 0.08), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, rgba(34, 233, 255, 0.06), transparent 60%),
    #07070b;
  overflow-x: hidden;
}

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a10; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff2d7a, #22e9ff);
  border-radius: 999px;
}

/* ---------- Grid background ---------- */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 30%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black 30%, transparent 80%);
}

/* ---------- Noise overlay ---------- */
.noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* ---------- Sticky nav scroll state ---------- */
#nav.scrolled {
  background: rgba(7, 7, 11, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.7);
}

/* ---------- Glitch effect ---------- */
.glitch {
  position: relative;
  display: inline-block;
  color: #fff;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch::before {
  color: #22e9ff;
  transform: translate(2px, 0);
  mix-blend-mode: screen;
  animation: glitchA 3.6s infinite linear alternate;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.glitch::after {
  color: #ff2d7a;
  transform: translate(-2px, 0);
  mix-blend-mode: screen;
  animation: glitchB 3.4s infinite linear alternate;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}
@keyframes glitchA {
  0%, 92%, 100% { transform: translate(2px, 0); }
  93% { transform: translate(6px, -2px); }
  95% { transform: translate(-3px, 1px); }
  97% { transform: translate(4px, 2px); }
}
@keyframes glitchB {
  0%, 92%, 100% { transform: translate(-2px, 0); }
  94% { transform: translate(-6px, 2px); }
  96% { transform: translate(3px, -1px); }
  98% { transform: translate(-4px, -2px); }
}

/* ---------- Marquee ---------- */
.marquee {
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Form inputs ---------- */
.form-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.25s ease;
}
.form-input::placeholder { color: rgba(255,255,255,0.35); }
.form-input:focus {
  border-color: rgba(255, 45, 122, 0.6);
  box-shadow: 0 0 0 4px rgba(255, 45, 122, 0.15), 0 0 30px -10px rgba(255,45,122,0.6);
  background: rgba(255,255,255,0.06);
}
.form-input:hover { border-color: rgba(255,255,255,0.18); }

/* ---------- Benefit card glow ---------- */
.benefit-glow {
  background: linear-gradient(135deg, rgba(255,45,122,0.4), rgba(34,233,255,0.4));
  filter: blur(20px);
  z-index: -1;
}

/* ---------- Creator card growth bar ---------- */
.creator-card .growth-bar { width: 0%; transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
.creator-card.in-view .growth-bar { width: 92%; }

/* ---------- Category cards hover lift ---------- */
.category-card:hover { box-shadow: 0 25px 60px -25px rgba(255,45,122,0.5); }

/* ---------- Animated connector line ---------- */
.animate-line {
  animation: lineSlide 4s ease-in-out infinite;
  background-size: 200% 100%;
}
@keyframes lineSlide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- Floating UI animation ---------- */
[data-float] { animation: float 6s ease-in-out infinite; will-change: transform; }
[data-float="2"] { animation-duration: 7s; animation-delay: -1s; }
[data-float="3"] { animation-duration: 5.5s; animation-delay: -2s; }
[data-float="4"] { animation-duration: 6.8s; animation-delay: -3s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-0.4deg); }
}

/* ---------- Floating LIVE hearts ---------- */
.heart {
  position: absolute;
  bottom: 10%;
  font-size: 22px;
  color: #ff2d7a;
  opacity: 0;
  animation: heartUp 3.5s ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(255,45,122,0.8));
}
@keyframes heartUp {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-260px) scale(1.2) rotate(15deg); opacity: 0; }
}

/* ---------- Floating LIVE comments ---------- */
.comment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(10px);
  animation: commentIn 0.45s ease forwards;
  max-width: 100%;
}
.comment .avatar {
  width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items:center; justify-content:center;
  font-size: 9px; font-weight: 700;
  flex-shrink: 0;
}
.comment.leaving { animation: commentOut 0.4s ease forwards; }
@keyframes commentIn { to { opacity: 1; transform: translateY(0); } }
@keyframes commentOut { to { opacity: 0; transform: translateY(-10px); } }

/* ---------- Reveal animations ---------- */
[data-anim] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim].in-view { opacity: 1; transform: translateY(0); }
[data-anim="reveal-card"] { transform: translateY(40px) scale(0.97); }
[data-anim="reveal-card"].in-view { transform: translateY(0) scale(1); }
[data-anim="hero-title"] { transform: translateY(40px); }

/* ---------- Loader ---------- */
#loader { transition: opacity 0.6s ease, visibility 0.6s ease; }
#loader.done { opacity: 0; visibility: hidden; }

/* ---------- FAQ open ---------- */
.faq-item[open] { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
.faq-item summary::-webkit-details-marker { display: none; }

/* ---------- Selection accent ---------- */
::selection { background: rgba(255, 45, 122, 0.9); color: #fff; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Mawthooq radio + file drop ---------- */
.mawthooq-pill input:focus-visible + span {
  outline: 2px solid rgba(255, 45, 122, 0.5);
  outline-offset: 2px;
}
#mawthooqUploadWrap { animation: slideDown 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 200px; }
}
#mawthooqDrop.dragover {
  border-color: rgba(34, 233, 255, 0.7);
  background: rgba(34, 233, 255, 0.08);
}


/* Spinner for submit button */
.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Mobile fine-tune ---------- */
@media (max-width: 640px) {
  .glitch::before, .glitch::after { display: none; }
}

/* ============================================================
   RTL + Arabic typography
   The "Spotlight Studio" brand mark and Latin numbers stay in
   Latin script (font-display / font-sans). Arabic body text uses
   IBM Plex Sans Arabic; Arabic display/headings use Tajawal.
   ============================================================ */

/* When body has .lang-ar, swap the default sans + display stacks
   to Arabic-optimized fonts (Latin glyphs in these fonts still
   look fine, so this is a single global swap). */
body.lang-ar {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Space Grotesk', system-ui, sans-serif;
}
body.lang-ar .font-display,
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar h4 {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Bricolage Grotesque', 'Sora', system-ui, sans-serif;
  /* Arabic glyphs have tall ascenders (dots above ن، ت، ث، ق، ف، خ) AND
     descenders (tails on ج، ح، ي), so they need MORE vertical room than
     Latin, not less. Use a generous line-height to avoid clipping. */
  line-height: 1.5;
  /* Slight padding-block prevents the topmost dot row & the trailing
     period/descender from being chopped by the box edge — especially
     critical for gradient `bg-clip-text` headings. */
  padding-block: 0.12em;
}
body.lang-ar h3,
body.lang-ar h4 {
  line-height: 1.55;
}
body.lang-ar .font-sans {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Space Grotesk', system-ui, sans-serif;
}

/* Keep the SPOTLIGHT wordmark + handles + emails in Latin
   even in Arabic mode (these stay readable & on-brand). */
body.lang-ar .keep-latin,
body.lang-ar [data-keep-latin],
body.lang-ar input[type="email"],
body.lang-ar input[name="tiktok"],
body.lang-ar input[name="email"] {
  font-family: 'Space Grotesk', 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* Arabic numeric labels use Latin digits for clarity in metrics */
body.lang-ar [data-counter],
body.lang-ar .font-display {
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ---------- RTL layout tweaks ---------- */

/* Mirror directional arrows so "→" reads right in RTL */
[dir="rtl"] .dir-arrow {
  transform: scaleX(-1);
}
/* Cancel mirror when hover translate kicks in (arrow already inverted) */
[dir="rtl"] .group:hover .dir-arrow {
  transform: scaleX(-1) translateX(-4px);
}

/* Marquee in RTL should travel right-to-left visually — but since
   the text itself reads RTL, reverse the animation so visual flow
   matches Arabic reading direction. */
[dir="rtl"] .marquee {
  animation-direction: reverse;
}

/* Form select chevron sits on the trailing edge in RTL */
[dir="rtl"] .cat-chevron {
  right: auto;
  left: 1rem;
}

/* Native <select> dropdown arrow placement — appearance: none hides it,
   but we account for the right padding so the chevron we added fits.
   In RTL, the option text should align right. */
[dir="rtl"] select.form-input {
  padding-right: 16px;
  padding-left: 40px;
  background-position: left 14px center;
  text-align: right;
}

/* Inputs/textarea text alignment in RTL */
[dir="rtl"] .form-input { text-align: right; }
/* But latin-content fields (email, tiktok) stay LTR for legibility */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[name="tiktok"],
[dir="rtl"] input[name="whatsapp"],
[dir="rtl"] input[name="idNumber"],
[dir="rtl"] input[name="followers"],
[dir="rtl"] input[name="viewers"] {
  direction: ltr;
  text-align: right;
}

/* The "—" before "Spotlight Studio team" signature reads weird in RTL
   because LTR em-dash gets flipped contextually — keep it explicit. */
[dir="rtl"] blockquote {
  text-align: right;
}

/* Floating cards positioned with -left / -right utilities need flipping
   semantically. Tailwind's logical properties aren't applied since we use
   CDN config — do it manually for the hero floating cards. */
[dir="rtl"] [data-float="2"] {
  /* card was -left-2 sm:-left-6 → flip to right side */
  left: auto;
  right: -0.5rem;
}
@media (min-width: 640px) {
  [dir="rtl"] [data-float="2"] { right: -1.5rem; }
}
[dir="rtl"] [data-float="3"] {
  /* card was -right-2 sm:-right-4 → flip to left side */
  right: auto;
  left: -0.5rem;
}
@media (min-width: 640px) {
  [dir="rtl"] [data-float="3"] { left: -1rem; }
}
[dir="rtl"] [data-float="4"] {
  /* card was right-2 sm:right-6 → flip to left side */
  right: auto;
  left: 0.5rem;
}
@media (min-width: 640px) {
  [dir="rtl"] [data-float="4"] { left: 1.5rem; }
}

/* The "STEP 01" badge sits at -top-5 left-7 — flip to right-7 in RTL */
[dir="rtl"] .relative > .absolute.-top-5.left-7 {
  left: auto;
  right: 1.75rem;
}

/* Mawthooq upload icon and "Choose" text already in flex row — they
   handle direction naturally. But the file-upload "Choose" mr-1.5
   should become ml-1.5 in RTL — flip via CSS logical equivalent. */
[dir="rtl"] .mr-1\.5 { margin-right: 0; margin-left: 0.375rem; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }

/* Footer CTA strip arrow alignment + general flex utilities */
[dir="rtl"] .-space-x-2 > * + * { margin-left: 0; margin-right: -0.5rem; }

/* Adjust glitch effect offsets for RTL (they were fine-tuned for LTR
   but the X-axis flips visually with scaleX, so reverse direction). */
[dir="rtl"] .glitch::before { transform: translate(-2px, 0); }
[dir="rtl"] .glitch::after { transform: translate(2px, 0); }

/* Headings with .leading-[0.95]/[1.05] / .leading-tight feel WAY too tight
   in Arabic — Tajawal's dots above and tails below get clipped at the box.
   Force a comfortable line-height for any heading in RTL and zero out
   letter-spacing (Arabic doesn't use it). */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .font-display {
  letter-spacing: 0 !important;
}
[dir="rtl"] .leading-\[0\.95\],
[dir="rtl"] .leading-\[1\.05\],
[dir="rtl"] .leading-\[1\.1\],
[dir="rtl"] .leading-tight,
[dir="rtl"] .leading-none {
  line-height: 1.5 !important;
}

/* Gradient `bg-clip-text` headings: the gradient is painted only inside
   the glyph bounding box, so when leading is tight the dots on top of
   Arabic letters and the trailing "." get visually cropped. Add a hair
   of vertical padding so the gradient region fully contains the glyphs.
   Note: `display: inline-block` here can push a trailing period (text
   sibling after the span) onto a new line at narrow widths — that's an
   accepted trade-off vs. clipping the Arabic glyph dots/tails. */
[dir="rtl"] h1.bg-clip-text,
[dir="rtl"] h2.bg-clip-text,
[dir="rtl"] h3.bg-clip-text,
[dir="rtl"] h1 .bg-clip-text,
[dir="rtl"] h2 .bg-clip-text,
[dir="rtl"] h3 .bg-clip-text {
  padding-block: 0.15em;
  /* Allow the rendered glyphs to spill slightly outside the inline box
     without being clipped by parent containers. */
  display: inline-block;
  line-height: 1.5;
}

/* Belt-and-braces: direct heading wrappers should never clip the heading
   bounding box in Arabic. We can't apply this globally (the marquee and
   particle canvases need overflow: hidden), so target heading parents
   only. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  /* Ensure the heading itself doesn't inherit a clip. */
  overflow: visible;
}

/* Tracking-widest / tracking-tight look awkward in Arabic (Arabic script
   doesn't accept inter-letter spacing — it actually breaks ligatures).
   Reset all tracking utilities for RTL. */
[dir="rtl"] .tracking-widest,
[dir="rtl"] .tracking-tight,
[dir="rtl"] .tracking-tighter,
[dir="rtl"] .tracking-wide,
[dir="rtl"] .tracking-wider,
[dir="rtl"] .tracking-\[0\.25em\],
[dir="rtl"] .tracking-\[0\.3em\],
[dir="rtl"] .tracking-\[0\.4em\] {
  letter-spacing: 0 !important;
}

/* "uppercase" doesn't apply to Arabic, but it also hurts no one —
   just keep readability with normal case where it matters. */
[dir="rtl"] .uppercase { text-transform: none; }

/* Language toggle: tiny pulse when switched for nice feedback */
#langToggle:active { transform: scale(0.96); }

/* Fade-while-swap micro-transition: when the JS swaps a [data-i18n]
   element's text, briefly fade for polish. */
[data-i18n] { transition: opacity 0.18s ease; }
[data-i18n].i18n-swapping { opacity: 0; }