/* ============================================================
   Sutumatic Loyalty & Promotions — Shared theme styles
   Bootstrap + Tailwind build (converted from the React app)
   ============================================================ */

:root {
  --bg-primary: #0F0718;
  --bg-secondary: #140A1F;
  --bg-card: #1A0B2E;
  --bg-input: #1A0B2E;
  --text-primary: #FAF8FF;
  --text-secondary: #C4B5D4;
  --text-muted: rgba(196, 181, 212, 0.5);
  --border-color: rgba(139, 92, 246, 0.2);
  --border-hover: rgba(139, 92, 246, 0.4);
  --accent-purple: #6B21A8;
  --accent-vivid: #8B5CF6;
  --accent-cyan: #06B6D4;
}

html.light {
  --bg-primary: #FAFAFA;
  --bg-secondary: #F3F0F8;
  --bg-card: #FFFFFF;
  --bg-input: #FFFFFF;
  --text-primary: #1E1B2E;
  --text-secondary: #6B6180;
  --text-muted: rgba(107, 97, 128, 0.5);
  --border-color: rgba(107, 33, 168, 0.12);
  --border-hover: rgba(107, 33, 168, 0.25);
  --accent-purple: #6B21A8;
  --accent-vivid: #7C3AED;
  --accent-cyan: #0891B2;
}

html {
  scroll-behavior: smooth;
  background-color: #0F0718;
}
html.light { background-color: #FAFAFA; }

body {
  font-family: 'Inter', 'IBM Plex Sans Arabic', sans-serif;
  background-color: var(--bg-primary, #0F0718);
  color: var(--text-primary, #FAF8FF);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background-color .3s ease, color .3s ease;
}

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

/* Bootstrap reboot overrides so themes win */
a { text-decoration: none; }
*:focus { outline: none; }

/* ── Gradient helpers ── */
.gradient-text {
  background: linear-gradient(135deg, #6B21A8, #C026D3, #EC4899, #C026D3, #6B21A8);
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s linear infinite;
}
@keyframes gradientShift { to { background-position: 220% center; } }

.gradient-hero {
  background: linear-gradient(135deg, #6B21A8 0%, #C026D3 50%, #EC4899 100%);
  background-size: 180% 180%;
  background-position: 0% 0%;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, background-position .6s ease;
}
.gradient-hero:hover {
  transform: translateY(-2px);
  background-position: 100% 100%;
  box-shadow: 0 12px 32px rgba(192, 38, 211, .38);
}
.gradient-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
  pointer-events: none;
}
.gradient-hero:hover::after { left: 160%; }

.gradient-border { position: relative; }
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #6B21A8, #C026D3, #EC4899);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Reveal animations (scroll entrance) ──
   Keyframe-based with `backwards` fill so staggered delays stay hidden,
   and so transforms are released after the entrance (hover lift still works). */
.reveal { opacity: 1; }
.reveal.reveal-hidden { opacity: 0; }
.reveal.reveal-visible { animation: revealUp .7s cubic-bezier(.22, 1, .36, 1) backwards; }
.reveal-scale.reveal-visible { animation-name: revealScale; }
.reveal-left.reveal-visible { animation-name: revealLeft; }
.reveal-right.reveal-visible { animation-name: revealRight; }

@keyframes revealUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes revealScale { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes revealLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes revealRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* ── Layout container ── */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}
@media (min-width: 1024px) {
  .page-container { padding-left: 48px; padding-right: 48px; }
}
@media (min-width: 1280px) {
  .page-container { padding-left: 80px; padding-right: 80px; }
}

/* ── Themed helpers ── */
.bg-themed { background-color: var(--bg-primary, #0F0718); }
.bg-themed-secondary { background-color: var(--bg-secondary, #140A1F); }
.bg-themed-card { background-color: var(--bg-card, #1A0B2E); }
.text-themed { color: var(--text-primary, #FAF8FF); }
.text-themed-secondary { color: var(--text-secondary, #C4B5D4); }
.text-themed-muted { color: var(--text-muted); }
.border-themed { border-color: var(--border-color, rgba(139, 92, 246, 0.2)); }

.text-balance { text-wrap: balance; }

.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-arabic { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* form fields use LTR for numbers/emails */
.ltr { direction: ltr; }
[dir="rtl"] .ltr { text-align: right; }

/* native select arrow color tweak */
select { appearance: none; -webkit-appearance: none; background-image: none; }

/* ── Legal Pages Typography ── */
.prose-legal { color: var(--text-primary); font-size: 13px; line-height: 1.85; }
.prose-legal h2 {
  font-size: 16px; font-weight: 700; margin-top: 32px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-color);
  color: var(--text-primary); scroll-margin-top: 90px;
}
.prose-legal h3 {
  font-size: 14px; font-weight: 700; margin-top: 20px; margin-bottom: 8px;
  color: var(--accent-vivid); scroll-margin-top: 90px;
}
.prose-legal p { margin-bottom: 12px; color: var(--text-secondary); }
.prose-legal ul { margin-bottom: 12px; padding-inline-start: 20px; list-style-type: disc; }
.prose-legal ul li { margin-bottom: 4px; color: var(--text-secondary); }
.prose-legal strong { color: var(--text-primary); font-weight: 600; }
.prose-legal a { color: var(--accent-vivid); text-decoration: underline; text-underline-offset: 2px; }
.prose-legal blockquote {
  border-inline-start: 3px solid var(--accent-vivid);
  padding-inline-start: 14px; margin: 16px 0; font-style: italic; color: var(--text-muted);
}
.prose-legal hr { border: none; border-top: 1px solid var(--border-color); margin: 24px 0; }

/* hover transitions */
.hover-lift { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease; }
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(139, 92, 246, .2);
  border-color: var(--border-hover) !important;
}

.shadow-glow { box-shadow: 0 0 40px rgba(139, 92, 246, 0.25); }

/* mobile menu lock */
body.menu-open { overflow: hidden; }

/* ── Floating hero blobs ── */
.anim-blob { animation: floatBlob 16s ease-in-out infinite; }
.anim-blob.blob-2 { animation-duration: 21s; animation-delay: -5s; }
@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(34px, -28px) scale(1.1); }
  66% { transform: translate(-24px, 22px) scale(.94); }
}

/* ── Animated nav-link underline ── */
.nav-link-anim { position: relative; }
.nav-link-anim::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #C026D3, #EC4899);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.nav-link-anim:hover::after { transform: scaleX(1); }

/* ── Theme toggle micro-interaction ── */
#navbar [aria-label="Toggle theme"] { transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .3s ease, border-color .3s ease; }
#navbar [aria-label="Toggle theme"]:hover { transform: rotate(40deg) scale(1.08); border-color: var(--border-hover); }

/* ── Page transition on route change ── */
#page.page-enter { animation: pageEnter .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes pageEnter { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Soft pulse for hero badge ── */
.pulse-soft { animation: pulseSoft 3.5s ease-in-out infinite; }
@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .0); }
  50% { box-shadow: 0 0 0 6px rgba(139, 92, 246, .08); }
}

/* ── Respect reduced-motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal.reveal-hidden { opacity: 1 !important; }
}