/* ============================================================
   ShareDua — Shared design system ("Sacred Serene")
   Loaded AFTER each page's inline <style> so it elevates the
   shared component classes (nav, buttons, cards) site-wide.
   ============================================================ */

:root {
  --accent:       #14b8a6;
  --accent-light: #5eead4;
  --accent-dark:  #0d9488;
  --accent-glow:  rgba(20, 184, 166, 0.35);
  --gold:         #e5c07b;      /* warm "light of prayer" secondary, used sparingly */
  --ink:          #eaf2f5;
  --muted:        #93a4b8;
  --bg-0:         #040a14;      /* deepest */
  --bg-1:         #071120;
  --card:         rgba(20, 33, 54, 0.55);
  --card-border:  rgba(120, 160, 200, 0.12);
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;
}

/* Base dark background painted by CSS immediately (no JS, no white flash) */
html {
  scroll-behavior: smooth;
  background-color: #040a14;
  background-image:
    radial-gradient(60rem 60rem at 15% -10%, rgba(20,184,166,0.16), transparent 60%),
    radial-gradient(50rem 50rem at 100% 8%, rgba(56,120,180,0.13), transparent 60%),
    radial-gradient(55rem 55rem at 50% 118%, rgba(20,184,166,0.10), transparent 60%),
    linear-gradient(180deg, #040a14, #071120 55%, #040a14);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body {
  font-family: var(--font-sans);
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #04121a; }

/* Refined scrollbar — subtle, not neon */
* { scrollbar-width: thin; scrollbar-color: #24405c transparent; }
*::-webkit-scrollbar { width: 10px; }
*::-webkit-scrollbar-thumb {
  background: #24405c;
  border-radius: 8px; border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #2f577a; background-clip: content-box; }

/* ---------- Ambient enhancement layer (optional, JS-injected) ----------
   The base gradient already lives on <html> (painted instantly, no flash).
   This layer only adds a slow-drifting glow + fine grain on top of it. */
.aurora-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora-bg::before {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(26rem 26rem at 22% 32%, rgba(20,184,166,0.10), transparent 60%),
    radial-gradient(22rem 22rem at 80% 62%, rgba(94,234,212,0.07), transparent 60%);
  filter: blur(34px);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
/* Fine grain so the darks feel like velvet, not flat #000 */
.aurora-bg::after {
  content: ''; position: absolute; inset: 0; opacity: 0.28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
@keyframes auroraDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

/* Make the old opaque SECTION backgrounds translucent so the base shows through.
   Scoped to sections/body only — must NOT nuke buttons/cards that use bg-slate-900. */
body.bg-slate-900 { background-color: transparent !important; }
section.bg-slate-900, section.bg-slate-800\/50, section.bg-slate-800\/30 { background-color: transparent !important; }

/* ---------- Glass navigation ---------- */
nav.fixed {
  background: rgba(6, 14, 26, 0.55) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(120,160,200,0.10) !important;
}

/* Brand wordmark shine */
nav .gold-text, .brand-gradient {
  background: linear-gradient(100deg, var(--accent-light), var(--accent) 45%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.btn-gold {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 45%, var(--accent-dark) 100%);
  color: #04121a !important; font-weight: 700;
  box-shadow: 0 6px 24px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.btn-gold::after { /* light sweep */
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-gold:hover::after { left: 130%; }
.btn-gold:active { transform: translateY(0) scale(.98); }

.btn-outline {
  border: 1px solid rgba(94,234,212,0.35) !important;
  color: var(--accent-light) !important; background: rgba(20,184,166,0.04);
  backdrop-filter: blur(4px); transition: all .25s ease;
}
.btn-outline:hover { background: rgba(20,184,166,0.12); border-color: var(--accent-light) !important; transform: translateY(-2px); }

/* ---------- Cards / glass surfaces ---------- */
.glass, .app-card, .dua-card {
  background: var(--card) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Elevated card hover for interactive tiles */
.tilt {
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.tilt:hover {
  transform: translateY(-6px);
  border-color: rgba(20,184,166,0.35) !important;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(20,184,166,0.15), 0 0 40px -10px var(--accent-glow);
}

/* Section eyebrow label with flanking rule */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--accent-light); font-size: .72rem; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
}
.eyebrow::before, .eyebrow.center::after {
  content: ''; height: 1px; width: 2.2rem;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.eyebrow.center::before { background: linear-gradient(90deg, var(--accent), transparent); }

/* Refined serif display */
.display {
  font-family: var(--font-serif); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.05;
}

/* Decorative mihrab arch (pure CSS) for the hero — fixed radii so it always renders */
.mihrab {
  position: relative;
  border-radius: 180px 180px 24px 24px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9);
}
.mihrab::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 5;
  border: 1px solid rgba(94,234,212,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
}

/* Solid, always-readable floating stat card (used over hero image) */
.stat-float {
  background: rgba(7, 15, 28, 0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(20,184,166,0.4);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,0.85), 0 0 34px -14px var(--accent-glow);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.stat-float:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.9), 0 0 44px -12px var(--accent-glow); }
.stat-float .num { color: #fff; font-weight: 800; letter-spacing: -0.02em; }

/* Thin gradient hairline divider */
.hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(20,184,166,0.4), transparent); border: 0; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .aurora-bg::before { animation: none; }
  html { scroll-behavior: auto; }
}
