/* 2030B Ecosystem — Custom styles layered on top of Tailwind
 * Theme: Five/Ten dimensions of a complete human.
 * Brand palette tuned for clarity, light/dark dual, gentle gradients.
 */
@import url("./enhancements.css");

:root {
  /* Ecosystem master gradient (mind → heart → body → imagination → spirit) */
  --b30-grad-1: #6366f1; /* indigo - mind / Smarter */
  --b30-grad-2: #06b6d4; /* cyan   - trust / Honester */
  --b30-grad-3: #10b981; /* emerald- body  / Healthier */
  --b30-grad-4: #f59e0b; /* amber  - imagination / Creater */
  --b30-grad-5: #ec4899; /* pink   - spirit / Kinder */
  --b30-grad-6: #ef4444; /* red    - will / Braver */
  --b30-grad-7: #8b5cf6; /* violet - wisdom / Wiser */
  --b30-grad-8: #0ea5e9; /* sky    - justice / Fairer */
  --b30-grad-9: #14b8a6; /* teal   - freedom / Freer */
  --b30-grad-10:#eab308; /* yellow - gratitude / Grateful */

  /* Legacy aliases used by some shared blocks */
  --w5d-grad-1: var(--b30-grad-1);
  --w5d-grad-2: var(--b30-grad-7);
  --w5d-grad-3: var(--b30-grad-2);
  --w5d-grad-4: var(--b30-grad-5);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

.font-arabic { font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif; }

/* ---------- Gradient text (master 2030B) ---------- */
.gradient-text {
  background: linear-gradient(135deg, var(--b30-grad-1) 0%, var(--b30-grad-2) 25%, var(--b30-grad-3) 50%, var(--b30-grad-4) 75%, var(--b30-grad-5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Per-project gradient texts */
.gt-smarter   { background: linear-gradient(135deg,#6366f1,#3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-honester  { background: linear-gradient(135deg,#06b6d4,#0891b2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-healthier { background: linear-gradient(135deg,#10b981,#059669); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-creater   { background: linear-gradient(135deg,#f59e0b,#f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-kinder    { background: linear-gradient(135deg,#ec4899,#db2777); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-braver    { background: linear-gradient(135deg,#ef4444,#dc2626); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-wiser     { background: linear-gradient(135deg,#8b5cf6,#7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-fairer    { background: linear-gradient(135deg,#0ea5e9,#0284c7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-freer     { background: linear-gradient(135deg,#14b8a6,#0d9488); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-grateful  { background: linear-gradient(135deg,#eab308,#ca8a04); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Animated gradient orbs ---------- */
.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  animation: orbFloat 14s ease-in-out infinite;
}
.dark .orb { opacity: 0.45; }
.orb-1 { background: radial-gradient(circle, var(--b30-grad-1), transparent 70%); }
.orb-2 { background: radial-gradient(circle, var(--b30-grad-2), transparent 70%); animation-delay: -4s; }
.orb-3 { background: radial-gradient(circle, var(--b30-grad-5), transparent 70%); animation-delay: -8s; }
.orb-4 { background: radial-gradient(circle, var(--b30-grad-3), transparent 70%); animation-delay: -2s; }
.orb-5 { background: radial-gradient(circle, var(--b30-grad-4), transparent 70%); animation-delay: -6s; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.1); }
  66% { transform: translate(-30px,40px) scale(0.95); }
}

/* ---------- Grid backdrop ---------- */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.dark .grid-bg {
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.12) 1px, transparent 1px);
}

/* ---------- Glass cards ---------- */
.glass {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15,23,42,0.06);
}
.dark .glass {
  background: rgba(15,23,42,0.5);
  border: 1px solid rgba(148,163,184,0.12);
}

/* ---------- Gradient borders ---------- */
.grad-border {
  position: relative;
  background-clip: padding-box;
  border: 1px solid transparent;
}
.grad-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--b30-grad-1), var(--b30-grad-2), var(--b30-grad-5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 30px -10px rgba(99,102,241,0.55);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }

.btn-ghost {
  border: 1px solid rgba(148,163,184,0.3);
  transition: all .2s ease;
}
.btn-ghost:hover { border-color: rgba(99,102,241,0.6); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 4rem; animation: marqueeScroll 30s linear infinite; width: max-content; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.headline-marquee {
  display: flex; gap: 3rem;
  animation: marqueeScroll 40s linear infinite;
  width: max-content; white-space: nowrap;
}

/* ---------- Animated underline link ---------- */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--b30-grad-1), var(--b30-grad-2));
  transition: width .25s ease;
}
.link-underline:hover::after { width: 100%; }

/* ---------- Typing dots ---------- */
.typing-dot { animation: typing 1.4s infinite both; }
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,80%,100%{opacity:.2; transform:translateY(0);} 40%{opacity:1; transform:translateY(-3px);} }

/* ---------- Pulse ring ---------- */
.pulse-ring::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(99,102,241,0.5);
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(.95); opacity: .9; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---------- Floating ---------- */
.float-y { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

/* ---------- Reveal (legacy) ---------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Safety net: if the IntersectionObserver fails or the element is never reached
   for any reason (JS error, very tall page, no-JS), still show the content. */
html.no-js [data-reveal],
html.no-js [data-rv] { opacity: 1 !important; transform: none !important; }
[data-reveal].force-visible,
[data-rv].force-visible { opacity: 1 !important; transform: none !important; }

.stat-num { font-variant-numeric: tabular-nums; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Mega-menu polish ---------- */
.mega-panel-enter { animation: megaIn .22s ease-out both; transform-origin: top center; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }

/* Mega-menu panels: nearly solid (0.95) instead of transparent glass so the
   text behind the page is no longer bleeding through and confusing readers. */
[data-mega-panel] .glass {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.dark [data-mega-panel] .glass {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.16);
}
/* The nav bar itself stays glassy (translucent), but the mega-menu panel that
   drops down is now solid. */

/* Focus rings (a11y) */
:where(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Hero & section animation library ---------- */
.aurora { position: absolute; inset: -20%; pointer-events: none; filter: blur(60px); opacity: .55; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 20% 30%, rgba(99,102,241,.55), transparent 60%),
    radial-gradient(45% 60% at 80% 20%, rgba(6,182,212,.45), transparent 60%),
    radial-gradient(50% 60% at 60% 80%, rgba(236,72,153,.45), transparent 60%);
  animation: auroraShift 18s ease-in-out infinite alternate;
}
.aurora::after { animation-duration: 26s; animation-direction: alternate-reverse; mix-blend-mode: screen; }
@keyframes auroraShift {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(2%,-3%,0) rotate(8deg); }
  100% { transform: translate3d(-2%,3%,0) rotate(-6deg); }
}

.conic-spin {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, #6366f1, #06b6d4, #10b981, #f59e0b, #ec4899, #6366f1);
  filter: blur(80px); opacity: .35; pointer-events: none;
  animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stars::before, .stars::after {
  content: ""; position: absolute; inset: -50%;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, #fff, transparent),
    radial-gradient(1px 1px at 85% 15%, #fff, transparent),
    radial-gradient(1px 1px at 10% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 45%, #fff, transparent);
  background-size: 300px 300px;
  opacity: .4;
  animation: drift 60s linear infinite;
}
.stars::after { background-size: 500px 500px; opacity: .25; animation-duration: 110s; animation-direction: reverse; }
@keyframes drift { to { transform: translate3d(-300px,-300px,0); } }

.noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.mesh-bg {
  background:
    radial-gradient(at 20% 0%, rgba(99,102,241,.35), transparent 50%),
    radial-gradient(at 80% 0%, rgba(6,182,212,.25), transparent 50%),
    radial-gradient(at 50% 100%, rgba(236,72,153,.30), transparent 50%);
  animation: meshBreath 12s ease-in-out infinite;
}
@keyframes meshBreath { 0%,100%{filter:hue-rotate(0deg);} 50%{filter:hue-rotate(20deg);} }

.beam { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.beam::before {
  content: ""; position: absolute; top: 0; left: -30%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(99,102,241,.25), rgba(6,182,212,.18), transparent 70%);
  filter: blur(20px);
  animation: beamMove 6s linear infinite;
}
@keyframes beamMove { to { left: 130%; } }

.tilt { transition: transform .35s ease; transform-style: preserve-3d; }
.tilt:hover { transform: perspective(800px) rotateX(4deg) rotateY(-4deg) translateY(-4px); }

.stack-3d > * { transition: transform .4s ease, box-shadow .4s ease; }
.stack-3d:hover > *:nth-child(1) { transform: translate(-12px,-6px) rotate(-4deg); }
.stack-3d:hover > *:nth-child(3) { transform: translate(12px,-6px) rotate(4deg); }

.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
}
.shine:hover::after { animation: shineSweep .9s ease; }
@keyframes shineSweep { to { left: 130%; } }

.gradient-shift {
  background: linear-gradient(90deg, #6366f1, #06b6d4, #10b981, #f59e0b, #ec4899, #6366f1);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 10s linear infinite;
}
@keyframes gradShift { to { background-position: 300% 0; } }

[data-rv] { opacity: 0; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
[data-rv="up"]    { transform: translateY(28px); }
[data-rv="down"]  { transform: translateY(-28px); }
[data-rv="left"]  { transform: translateX(28px); }
[data-rv="right"] { transform: translateX(-28px); }
[data-rv="zoom"]  { transform: scale(.95); }
[data-rv="rotate"]{ transform: rotate(-3deg) translateY(20px); }
[data-rv].rv-in { opacity: 1; transform: none; }
/* Safety net: if the page is loaded with the print stylesheet, with reduced
   motion, or the observer fails to attach within ~3s, the auto-reveal in
   js/main.js will add `.rv-ready` on <html> which forces everything visible. */
html.rv-ready [data-rv]:not(.rv-in) { opacity: 1 !important; transform: none !important; }

.stagger > *:nth-child(1){transition-delay:.05s}
.stagger > *:nth-child(2){transition-delay:.12s}
.stagger > *:nth-child(3){transition-delay:.19s}
.stagger > *:nth-child(4){transition-delay:.26s}
.stagger > *:nth-child(5){transition-delay:.33s}
.stagger > *:nth-child(6){transition-delay:.40s}
.stagger > *:nth-child(7){transition-delay:.47s}
.stagger > *:nth-child(8){transition-delay:.54s}
.stagger > *:nth-child(9){transition-delay:.61s}
.stagger > *:nth-child(10){transition-delay:.68s}

.marquee-y { overflow: hidden; mask-image: linear-gradient(0deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-y-track { display: flex; flex-direction: column; gap: 1rem; animation: scrollY 22s linear infinite; }
@keyframes scrollY { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.bounce-y { animation: bounceY 2.2s ease-in-out infinite; }
@keyframes bounceY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }

.wave-text { background-image: linear-gradient(90deg, #6366f1, #06b6d4); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 4px; }

.spotlight {
  background: radial-gradient(800px circle at var(--mx,50%) var(--my,50%), rgba(99,102,241,.18), transparent 40%);
  transition: background-position .2s ease;
}

.breath { animation: breath 4s ease-in-out infinite; }
@keyframes breath { 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} }

.code-block { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }
.code-block .tok-k { color: #c084fc; }
.code-block .tok-s { color: #34d399; }
.code-block .tok-c { color: #94a3b8; font-style: italic; }
.code-block .tok-n { color: #f472b6; }
.code-block .tok-a { color: #38bdf8; }

/* Project chip helpers */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.chip-smarter   { background: rgba(99,102,241,.12); color: #6366f1; }
.chip-honester  { background: rgba(6,182,212,.12); color: #06b6d4; }
.chip-healthier { background: rgba(16,185,129,.12); color: #10b981; }
.chip-creater   { background: rgba(245,158,11,.14); color: #d97706; }
.chip-kinder    { background: rgba(236,72,153,.12); color: #ec4899; }
.chip-braver    { background: rgba(239,68,68,.12); color: #ef4444; }
.chip-wiser     { background: rgba(139,92,246,.12); color: #8b5cf6; }
.chip-fairer    { background: rgba(14,165,233,.12); color: #0ea5e9; }
.chip-freer     { background: rgba(20,184,166,.12); color: #14b8a6; }
.chip-grateful  { background: rgba(234,179,8,.16); color: #ca8a04; }

/* Quranic verse style */
.verse {
  font-family: 'Amiri', serif;
  font-size: 1.25rem;
  line-height: 2;
  text-align: center;
  direction: rtl;
}
.verse-en { font-style: italic; opacity: .8; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .orb, .aurora::before, .aurora::after, .conic-spin, .stars::before, .stars::after,
  .marquee-track, .headline-marquee, .marquee-y-track, .float-y, .breath, .bounce-y,
  .gradient-shift, .pulse-ring::before, .typing-dot, .beam::before, .mesh-bg {
    animation: none !important;
  }
}