@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Outfit:wght@300;400;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg-void: #05030F;
  --bg-surface: #0a0816;
  --bg-surface-high: rgba(255, 255, 255, 0.03);
  --bg-zone-1: #0f0620;
  --bg-zone-2: #1a0f2e;
  --bg-zone-3: #140a24;
  --bg-zone-4: #0a1628;
  --bg-zone-5: #1f0a1e;

  --fg-primary: #E8B923;
  --fg-secondary: #5D3FD3;
  --fg-tertiary: #FF6B9D;
  --fg-accent: #3FC1C9;
  --fg-muted: #8A7DAB;
  --fg-white: #e3e2e8;

  --font-arabic: 'Amiri', serif;
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --glow-primary: 0 0 15px rgba(232, 185, 35, 0.5);
  --glow-secondary: 0 0 30px rgba(93, 63, 211, 0.4);
  --glow-tertiary: 0 0 25px rgba(255, 107, 157, 0.3);
  --glow-accent: 0 0 25px rgba(63, 193, 201, 0.4);

  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

body {
  /* Body bg stays dark (the void) so the page never flashes light. The
     galaxy iframe sits behind everything as a fixed background once the
     animation completes; sections layer over it with their own translucent
     gradients tuned to keep text legible. */
  background-color: var(--bg-void);
  color: var(--fg-white);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ PRELOADER ============ */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--bg-void);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-brand {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--fg-primary);
  letter-spacing: 0.3em;
  margin-right: -0.3em; /* Offset letter-spacing for perfect centering */
  text-align: center;
  text-shadow: var(--glow-primary);
  animation: glow-pulse 2s ease-in-out infinite;
}

.preloader-arabic {
  font-family: var(--font-arabic);
  font-size: 3.5rem;
  color: var(--fg-primary);
  text-align: center;
  text-shadow: var(--glow-primary);
  opacity: 0.9;
}

.preloader-bar {
  width: 280px;
  height: 2px;
  background: rgba(232, 185, 35, 0.15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.preloader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--fg-primary), transparent);
  animation: preload-shimmer 1.6s infinite;
}

@keyframes preload-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* (The CSS starfield canvas was retired in favour of the live galaxy iframe
    sitting behind every section as the page's true background.) */

/* ============ SCROLL PROGRESS BAR ============ */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fg-primary), var(--fg-tertiary), var(--fg-secondary));
  z-index: 9999;
  width: 0%;
  box-shadow: 0 0 12px rgba(232, 185, 35, 0.6);
}

/* ============ KEYFRAMES ============ */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes glow-pulse {

  0%,
  100% {
    text-shadow: var(--glow-primary);
  }

  50% {
    text-shadow: var(--glow-primary), 0 0 40px rgba(232, 185, 35, 0.8);
  }
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(80px) rotate(-360deg);
  }
}

@keyframes shimmer-line {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes wave-flow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ============ TYPOGRAPHY ============ */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--fg-white);
  letter-spacing: -0.01em;
}

.subheading {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}

.subheading.text-gold {
  color: var(--fg-primary);
}

.text-gold {
  color: var(--fg-primary);
}

.text-secondary {
  color: var(--fg-secondary);
}

.text-tertiary {
  color: var(--fg-tertiary);
}

.text-accent {
  color: var(--fg-accent);
}

.text-white {
  color: var(--fg-white);
}

.text-muted {
  color: var(--fg-muted);
}

.italic {
  font-style: italic;
}

.serif {
  font-family: var(--font-serif);
}

.mono {
  font-family: var(--font-mono);
}

.normal-case {
  text-transform: none;
}

.uppercase {
  text-transform: uppercase;
}

.fw-300 {
  font-weight: 300;
}

.fw-600 {
  font-weight: 600;
}

.fw-800 {
  font-weight: 800;
}

.text-sm {
  font-size: 0.85rem;
}

.text-md {
  font-size: 1.1rem;
}

.text-lg {
  font-size: 1.35rem;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.display-xl {
  font-size: 7rem;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.display-lg {
  font-size: 5.5rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.display-md {
  font-size: 4.5rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.display-sm {
  font-size: 3.2rem;
  line-height: 1.1;
  font-weight: 700;
}

.title-lg {
  font-size: 2.8rem;
  line-height: 1.3;
  font-weight: 700;
}

.line-height-1 {
  line-height: 1;
}

.line-height-13 {
  line-height: 1.3;
}

.line-height-16 {
  line-height: 1.6;
}

.text-decoration-none {
  text-decoration: none;
}

/* Arabic Typography */
.arabic-xl {
  font-family: var(--font-arabic);
  font-size: 5.5rem;
  color: var(--fg-primary);
  text-shadow: var(--glow-primary);
  line-height: 1.85;
  font-weight: 700;
}

.arabic-lg {
  font-family: var(--font-arabic);
  font-size: 4rem;
  color: var(--fg-primary);
  text-shadow: var(--glow-primary), 0 0 40px rgba(232, 185, 35, 0.25);
  line-height: 1.85;
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.arabic-md {
  font-family: var(--font-arabic);
  font-size: 2.75rem;
  color: var(--fg-primary);
  text-shadow: var(--glow-primary);
  font-weight: 700;
  line-height: 1.8;
}

/* Split text reveal */
.split-word {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.1em;
}

.split-word>span {
  display: inline-block;
  will-change: transform, opacity;
}

/* ============ LAYOUT UTILITIES ============ */
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-row-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.flex-center-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.relative {
  position: relative;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.w-full {
  width: 100%;
}

.max-w-800 {
  max-width: 800px;
  margin: 0 auto;
}

.max-w-1000 {
  max-width: 1000px;
  margin: 0 auto;
}

.w-40 {
  width: 40px;
}

.w-50 {
  width: 50px;
}

.m-zero {
  margin: 0;
}

.p-zero {
  padding: 0;
  margin: 0;
}

.p-md {
  padding: 2rem;
}

.p-xl {
  padding: 5rem 4rem;
}

.mt-md {
  margin-top: 2rem;
}

.mt-lg {
  margin-top: 4rem;
}

.mb-sm {
  margin-bottom: 0.5rem;
}

.mb-md {
  margin-bottom: 1rem;
}

.mb-lg {
  margin-bottom: 2rem;
}

.mb-xl {
  margin-bottom: 3rem;
}

.pt-xl {
  padding-top: 4rem;
}

.gap-sm {
  gap: 0.5rem;
}

.gap-md {
  gap: 1rem;
}

.gap-lg {
  gap: 2rem;
}

.negative-mt {
  margin-top: -2rem;
}

.negative-mt-lg {
  margin-top: -4rem;
}

/* ============ HERO SYSTEM — Inlined Galaxy app (permanent backdrop) ============ */
/* The galaxy React/Three.js app mounts directly into #galaxy-root and stays
   there as a fixed, viewport-filling backdrop for the entire page. It is
   never moved between foreground/background z-index modes — the canvas
   doesn't care about pointer-events because it intercepts wheel/touch on
   the window itself.
   #galaxy-stage is a 100vh anchor section so the sidebar's "Galaxy" stop
   has something with real layout to scroll-to. #galaxy-root is the actual
   fixed-positioned canvas container. Z-index `-1` keeps it behind every
   content section; pointer-events `none` lets clicks fall through. */

#galaxy-stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  background: transparent;
}

#galaxy-root {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
  background: #000;
  z-index: -1;
  pointer-events: none;
  /* The opacity transition fires when body.galaxy-foreground is removed
     (after the visitor scrolls past the earth scene): the galaxy fades
     from full strength to a quieter backdrop so the content sections
     read clearly on top of it. Keeping the canvas at >0 means scrolling
     back to the top still reveals the live animation. */
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  opacity: 0.35;
}

/* Full strength while the galaxy is the foreground (pre-handoff). */
body.galaxy-foreground #galaxy-root {
  opacity: 1;
}

/* ============ #expansion — Cosmic Expansion ============ */
/* This section sits directly on top of the live galaxy iframe (now the
   page background), so the visual itself doesn't need a separate CSS
   simulation — the actual Milky Way is glowing behind every word. We just
   provide a quiet narrative scaffold: verse hero → three pillars
   (linguistic / discovery / continuation) → a 14-century timeline strip. */

#expansion {
  position: relative;
}

/* Subtle dark vignette so text reads cleanly over the bright galaxy. */
#expansion::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(5, 3, 15, 0.55) 0%, rgba(5, 3, 15, 0.78) 70%, rgba(5, 3, 15, 0.92) 100%);
  z-index: -1;
  pointer-events: none;
}

.expansion-hero {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 4.5rem;
  padding: 0 1rem;
}

.expansion-hero .arabic-xl {
  margin-bottom: 1.5rem;
  text-shadow: 0 0 36px rgba(232, 185, 35, 0.28), 0 0 80px rgba(120, 150, 220, 0.22);
}

.expansion-hero .expansion-translation {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 auto 2rem;
  max-width: 740px;
}

.expansion-hero .expansion-ref {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

/* Three-pillar timeline-row. Reads left → right as a chronology. */
.expansion-timeline-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto 5rem;
  position: relative;
}

.expansion-pillar {
  position: relative;
  border: 1px solid rgba(232, 185, 35, 0.12);
  background: linear-gradient(180deg, rgba(10, 6, 32, 0.72) 0%, rgba(5, 3, 15, 0.55) 100%);
  border-radius: 8px;
  padding: 2.25rem 1.6rem 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform 320ms ease, border-color 320ms ease;
}

.expansion-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 185, 35, 0.32);
}

.expansion-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(232, 185, 35, 0.85), transparent);
}

.expansion-pillar .pillar-num {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: rgba(232, 185, 35, 0.85);
  margin-bottom: 1.1rem;
  display: block;
}

.expansion-pillar .pillar-arabic {
  font-family: var(--font-arabic);
  font-size: 1.85rem;
  color: #fff;
  margin-bottom: 0.45rem;
  direction: rtl;
  line-height: 1.4;
}

.expansion-pillar .pillar-title {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--fg-primary);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.expansion-pillar p {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 0.85rem;
}

.expansion-pillar p:last-child {
  margin-bottom: 0;
}

.expansion-pillar p.muted {
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
}

/* 14-century timeline strip — single horizontal line, four nodes. */
.expansion-strip {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 0 0;
}

.expansion-strip-caption {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  color: rgba(255, 255, 255, 0.84);
  margin: 0 auto 2.25rem;
  max-width: 680px;
}

.expansion-strip-rail {
  position: relative;
  height: 2px;
  background: linear-gradient(to right,
      transparent 0%,
      rgba(232, 185, 35, 0.65) 8%,
      rgba(232, 185, 35, 0.65) 92%,
      transparent 100%);
  margin: 0 1rem 1.25rem;
  box-shadow: 0 0 12px rgba(232, 185, 35, 0.25);
}

.expansion-strip-nodes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin-top: -8px;
}

.expansion-strip-node {
  text-align: center;
  position: relative;
}

.expansion-strip-node::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fg-primary);
  box-shadow: 0 0 16px rgba(232, 185, 35, 0.7);
  margin: 0 auto 0.95rem;
}

.expansion-strip-node .node-year {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: #fff;
  display: block;
  margin-bottom: 0.3rem;
}

.expansion-strip-node .node-label {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  display: block;
}

@media (max-width: 768px) {
  .expansion-timeline-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
  }

  .expansion-strip-nodes {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  .expansion-strip-rail {
    display: none;
  }
}

/* ============ #embryo — Sequence + linguistic deep-dive ============ */
/* Mirrors the expansion section's pattern: a hero verse, a timeline panel
   (the 5-stage 23:14 sequence), a 3-pillar deep dive on ʿalaqah, and a
   closing context strip. Reuses .expansion-pillar / .expansion-timeline-row
   for the pillars block so the visual language stays consistent. */

.embryo-sequence {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 5rem;
  padding: 2.25rem 1rem 2rem;
}

.embryo-sequence-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.embryo-sequence-translation {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 760px;
  margin: 0 auto;
}

.embryo-stages-rail {
  position: absolute;
  left: 6%;
  right: 6%;
  /* sit roughly through the middle of the stage cards */
  top: calc(2.25rem + 4.6rem + 110px);
  height: 2px;
  background: linear-gradient(to right,
      transparent 0%,
      rgba(232, 185, 35, 0.55) 8%,
      rgba(232, 185, 35, 0.55) 92%,
      transparent 100%);
  box-shadow: 0 0 12px rgba(232, 185, 35, 0.22);
  pointer-events: none;
  z-index: 0;
}

.embryo-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.embryo-stage {
  position: relative;
  padding: 1.5rem 1rem 1.4rem;
  text-align: center;
  border: 1px solid rgba(232, 185, 35, 0.10);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(10, 6, 32, 0.78) 0%, rgba(5, 3, 15, 0.6) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.embryo-stage:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 185, 35, 0.32);
}

.embryo-stage.stage-key {
  border-color: rgba(232, 185, 35, 0.4);
  box-shadow: 0 0 22px rgba(232, 185, 35, 0.18);
}

.embryo-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fg-primary);
  box-shadow: 0 0 16px rgba(232, 185, 35, 0.7);
  transform: translateX(-50%);
  z-index: 2;
}

.embryo-stage .stage-num {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: rgba(232, 185, 35, 0.85);
  display: block;
  margin-bottom: 0.85rem;
}

.embryo-stage .stage-arabic {
  font-family: var(--font-arabic);
  font-size: 1.85rem;
  color: #fff;
  line-height: 1.4;
  direction: rtl;
  margin-bottom: 0.45rem;
  text-shadow: 0 0 18px rgba(232, 185, 35, 0.18);
}

.embryo-stage .stage-name {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--fg-primary);
  margin-bottom: 0.5rem;
}

.embryo-stage .stage-meaning {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 0.55rem;
}

.embryo-stage .stage-modern {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.embryo-pillars-block {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 4rem;
}

.embryo-pillars-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 660px;
  margin: 0 auto;
}

.embryo-context {
  width: 100%;
  max-width: 720px;
  margin: 1rem auto 0;
  text-align: center;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.embryo-context-row {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.embryo-context-year {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: var(--fg-primary);
}

.embryo-context-arrow {
  color: rgba(232, 185, 35, 0.55);
  font-size: 0.9rem;
}

.embryo-context-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 1024px) {
  .embryo-stages {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
  }

  .embryo-stages-rail {
    display: none;
  }
}

@media (max-width: 640px) {
  .embryo-stages {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .embryo-stage {
    padding: 1.1rem 0.85rem 1rem;
  }

  .embryo-stage .stage-arabic {
    font-size: 1.55rem;
  }

  .embryo-context-row {
    flex-wrap: wrap;
    gap: 0.65rem;
  }
}

/* ============ Galaxy-verse expansion sections (#seven-heavens, #suns-course, #orbits) ============ */
/* Compact dual-column verse-on-left, science-on-right blocks. They sit
   between the iframe stage and the rest of the miracles, expanding each
   verse from the iframe in matching order. */

.gv-section {
  position: relative;
}

.gv-section .gv-verse-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.2) 100%);
  padding: 2rem 1.75rem;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.gv-section .gv-verse-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(232, 185, 35, 0.85), transparent);
}

.gv-section .gv-verse-card .arabic-md {
  margin-bottom: 1rem;
}

.gv-section .gv-verse-card .gv-translation {
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.gv-section .gv-verse-card .gv-ref {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--fg-gold, #e8b923);
  text-transform: uppercase;
}

/* (The .heavens-visual block was retired along with the #seven-heavens
    section — the verse Al-Mulk 67:3 is now showcased directly inside the
    galaxy iframe and didn't need a separate redundant treatment.) */

/* Sun-apex visual for #suns-course — a sun with a tracer arrow */
.sun-course-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-width: 480px;
  margin: 0 auto;
}

.sun-course-visual .sun-body {
  position: absolute;
  top: 50%;
  left: 22%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, #f8c66a 35%, rgba(232, 185, 35, 0.6) 70%, transparent 100%);
  box-shadow: 0 0 60px rgba(232, 185, 35, 0.55), 0 0 120px rgba(248, 198, 106, 0.35);
}

.sun-course-visual .sun-trail {
  position: absolute;
  top: 50%;
  left: 22%;
  width: 65%;
  height: 2px;
  background: linear-gradient(to right, rgba(232, 185, 35, 0.7), transparent);
  transform: translateY(-50%);
}

.sun-course-visual .sun-apex {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translate(0, -50%);
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.sun-course-visual .sun-apex::before {
  content: "→";
  display: block;
  font-size: 1.4rem;
  color: var(--fg-gold, #e8b923);
  margin-bottom: 0.3rem;
  letter-spacing: 0;
}

/* Orbital lattice for #orbits — overlapping ellipses */
.orbits-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 380px;
  margin: 0 auto;
}

.orbits-visual .orbit-ellipse {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(232, 185, 35, 0.42);
  border-radius: 50%;
}

.orbits-visual .orbit-ellipse:nth-child(1) {
  inset: 5%;
  transform: rotate(0deg) scaleY(0.55);
}

.orbits-visual .orbit-ellipse:nth-child(2) {
  inset: 10%;
  transform: rotate(35deg) scaleY(0.55);
}

.orbits-visual .orbit-ellipse:nth-child(3) {
  inset: 15%;
  transform: rotate(70deg) scaleY(0.55);
}

.orbits-visual .orbit-ellipse:nth-child(4) {
  inset: 20%;
  transform: rotate(105deg) scaleY(0.55);
}

.orbits-visual .orbit-ellipse:nth-child(5) {
  inset: 25%;
  transform: rotate(140deg) scaleY(0.55);
}

.orbits-visual .orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(232, 185, 35, 0.7) 60%, transparent 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(232, 185, 35, 0.7);
}

/* Footer credits line */
.footer-credits {
  margin-top: 0.75rem;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.38);
  text-transform: uppercase;
}

.footer-credits a {
  color: rgba(232, 185, 35, 0.75);
  text-decoration: none;
  border-bottom: 1px dotted rgba(232, 185, 35, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-credits a:hover {
  color: var(--fg-gold, #e8b923);
  border-color: var(--fg-gold, #e8b923);
}

/* ============ HEADER ============ */
/* Solid (no translucent gradient) — sits over the live galaxy iframe once it
   becomes background, and we don't want it to shimmer the iframe through it.
   While the iframe is in foreground (body has .galaxy-foreground) the header
   is hidden entirely so the journey gets a clean viewport. */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 4rem;
  z-index: 1000;
  background: rgba(5, 3, 15, 0.96);
  border-bottom: 1px solid rgba(232, 185, 35, 0.08);
  /* No backdrop blur — the bg is opaque so blur would do nothing useful. */
  transition: opacity 600ms ease, transform 600ms ease, padding 0.3s ease;
}

header.scrolled {
  padding: 1rem 4rem;
  background: rgba(5, 3, 15, 0.98);
  border-bottom: 1px solid rgba(232, 185, 35, 0.12);
}

/* While the galaxy iframe is the foreground overlay (pre-animation-complete),
   pull the header off-screen so it never sits on top of the iframe. */
body.galaxy-foreground header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

/* Lock body scroll during the galaxy phase. Without this, smooth-scroll
   engines (Lenis) and momentum scrolling can nudge scrollY upward despite
   the galaxy app's preventDefault on wheel events — the visitor would end
   up on page content while the galaxy is still mid-journey. The galaxy
   app emits a `galaxy-yield` event when the visitor reaches earth and
   wants to scroll forward; the host then drops this class, restoring
   normal page scroll. */
body.galaxy-foreground {
  overflow: hidden;
  height: 100dvh;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  /* Mobile gesture handoff: tell the browser that this surface owns all
     touch input. Without these two, the first swipe on narrow viewports
     gets eaten by the browser's URL-bar auto-hide / pull-to-refresh and
     the visitor has to swipe up first before the page responds to a
     swipe down. With touch-action: none + overscroll-behavior: none,
     navigation.js's preventDefault() reliably wins on the first try. */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none;
}

.logo {
  font-family: var(--font-serif);
  color: var(--fg-primary);
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  font-weight: 700;
  position: relative;
}

.logo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40%;
  height: 1px;
  background: var(--fg-primary);
  box-shadow: 0 0 10px var(--fg-primary);
}

/* ============ BUTTONS ============ */
.btn-outline {
  border: 1.5px solid rgba(232, 185, 35, 0.4);
  padding: 0.85rem 1.75rem;
  color: var(--fg-primary);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.35s var(--ease-smooth);
  position: relative;
  overflow: hidden;
  font-weight: 600;
  display: inline-block;
  background: transparent;
}

.btn-outline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(232, 185, 35, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  z-index: -1;
}

.btn-outline:hover::before {
  width: 400px;
  height: 400px;
}

.btn-outline:hover {
  border-color: var(--fg-primary);
  box-shadow: var(--glow-primary);
  color: var(--fg-primary);
}

.btn-outline.border-dim {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--fg-white);
}

.btn-outline.border-dim::before {
  background: rgba(255, 255, 255, 0.08);
}

.btn-outline.border-dim:hover {
  border-color: var(--fg-white);
  color: var(--fg-white);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

/* ============ SIDEBAR ============ */
.sidebar {
  position: fixed;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.02);
  padding: 1.25rem 0.85rem;
  border-radius: 40px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transition: opacity 600ms ease, transform 600ms ease;
}

/* Hidden during the journey (iframe foreground). Slides in from the left
   the moment the iframe is promoted to background. */
body.galaxy-foreground .sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translate(-120%, -50%);
}

/* Verse overlay: visible only while at the top of the page (galaxy is the
   dominant view). Once the visitor scrolls into content the verse fades
   out so it doesn't sit pinned at the viewport top across sections.
   `!important` overrides the inline `opacity` style the React component
   sets for its scene-to-scene crossfades. */
#galaxy-scene-text {
  transition: opacity 480ms ease !important;
}

body:not(.galaxy-foreground) #galaxy-scene-text {
  opacity: 0 !important;
  pointer-events: none !important;
}

.sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.sidebar-item:hover {
  background: rgba(232, 185, 35, 0.1);
}

.sidebar-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--fg-muted);
  transition: all 0.3s ease;
}

.sidebar-item.active svg,
.sidebar-item:hover svg {
  stroke: var(--fg-primary);
  filter: drop-shadow(0 0 6px rgba(232, 185, 35, 0.8));
}

.sidebar-item .tooltip {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  background: var(--bg-surface);
  color: var(--fg-primary);
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(232, 185, 35, 0.2);
  font-weight: 600;
}

.sidebar-item:hover .tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ============ SECTIONS ============ */
.miracle-section {
  min-height: 100dvh;
  width: 100%;
  padding: 10rem 12rem;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.miracle-section.col-flow {
  flex-direction: column;
  justify-content: center;
}

/* Hidden initial state for GSAP-controlled reveal */
.reveal {
  opacity: 0;
  will-change: opacity, transform;
}

/* Color Zones — translucent gradients tuned to layer over the live galaxy
   iframe behind every section. Each section keeps its signature accent
   colour but lets the Milky Way glint through the dark base. */
#suns-course {
  background: linear-gradient(135deg, rgba(15, 6, 32, 0.78) 0%, rgba(5, 3, 15, 0.88) 100%);
}

#suns-course::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(232, 185, 35, 0.10), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(93, 63, 211, 0.10), transparent 40%);
  pointer-events: none;
}

#orbits {
  background: linear-gradient(135deg, rgba(26, 15, 46, 0.78) 0%, rgba(5, 3, 15, 0.88) 100%);
}

#orbits::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(93, 63, 211, 0.14), transparent 60%);
  pointer-events: none;
}

#two-lights {
  background: linear-gradient(135deg, rgba(20, 10, 36, 0.78) 0%, rgba(5, 3, 15, 0.88) 100%);
}

#two-lights::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(255, 107, 157, 0.10), transparent 50%);
  pointer-events: none;
}

#embryo {
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.78) 0%, rgba(5, 3, 15, 0.9) 100%);
}

#embryo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 50%, rgba(63, 193, 201, 0.12), transparent 50%);
  pointer-events: none;
}

#deep {
  background: linear-gradient(135deg, rgba(10, 20, 32, 0.84) 0%, rgba(5, 3, 15, 0.92) 100%);
}

#deep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(63, 193, 201, 0.10), transparent 60%);
  pointer-events: none;
}

#iron {
  background: linear-gradient(135deg, rgba(26, 10, 10, 0.82) 0%, rgba(5, 3, 15, 0.92) 100%);
}

#iron::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(200, 100, 50, 0.10), transparent 50%);
  pointer-events: none;
}

#mountains {
  background: linear-gradient(135deg, rgba(31, 10, 30, 0.78) 0%, rgba(5, 3, 15, 0.9) 100%);
}

#mountains::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 30%, rgba(255, 107, 157, 0.10), transparent 50%);
  pointer-events: none;
}

#two-seas {
  background: linear-gradient(135deg, rgba(10, 20, 32, 0.78) 0%, rgba(5, 3, 15, 0.9) 100%);
}

#two-seas::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(63, 193, 201, 0.10), transparent 60%);
  pointer-events: none;
}

#fingertips {
  background: linear-gradient(135deg, rgba(26, 15, 46, 0.78) 0%, rgba(5, 3, 15, 0.9) 100%);
}

#fingertips::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 75%, rgba(232, 185, 35, 0.12), transparent 50%);
  pointer-events: none;
}

#epilogue {
  padding: 10rem 4rem;
  background: linear-gradient(180deg, rgba(26, 15, 46, 0.82) 0%, rgba(5, 3, 15, 0.94) 100%);
}

#epilogue::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(93, 63, 211, 0.14), transparent 70%);
  pointer-events: none;
}

.miracle-section>* {
  position: relative;
  z-index: 2;
}

/* Miracle index number */
.miracle-index {
  position: absolute;
  top: 4rem;
  right: 4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--fg-muted);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.miracle-index::before {
  content: '';
  width: 50px;
  height: 1px;
  background: var(--fg-primary);
  box-shadow: 0 0 8px var(--fg-primary);
}

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  width: 100%;
  position: relative;
  z-index: 2;
  align-items: center;
}

.grid-2-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}

/* ============ CARDS ============ */
.glass-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 2.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-smooth);
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(232, 185, 35, 0.04) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.glass-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(232, 185, 35, 0.4), rgba(93, 63, 211, 0.4));
  border-radius: 18px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(8px);
}

.glass-card:hover {
  border-color: rgba(232, 185, 35, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(-6px);
}

.glass-card:hover::before {
  opacity: 1;
}

.glass-card:hover::after {
  opacity: 0.3;
}

.glass-card.glow-card {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.glass-card.bg-none {
  background: none;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.glass-card.bg-none::before,
.glass-card.bg-none::after {
  display: none;
}

.glass-card.bg-none:hover {
  transform: none;
  box-shadow: none;
  border: none;
}

.glass-card.bg-dark-layer {
  background: rgba(5, 3, 15, 0.7);
  border: 1px solid rgba(93, 63, 211, 0.2);
}

.card-icon {
  margin-bottom: 1.5rem;
  color: var(--fg-primary);
  display: inline-block;
  transition: transform 0.4s var(--ease-bounce);
}

.glass-card:hover .card-icon {
  transform: scale(1.15) rotate(-8deg);
  filter: drop-shadow(0 0 10px rgba(232, 185, 35, 0.7));
}

.card-title {
  font-size: 1.35rem;
  margin-bottom: 1rem;
  color: var(--fg-white);
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}

.card-text {
  color: var(--fg-muted);
  font-size: 0.95rem;
  line-height: 1.75;
  transition: color 0.3s ease;
}

.glass-card:hover .card-text {
  color: rgba(227, 226, 232, 0.9);
}

/* ============ DIVIDERS ============ */
.divider-vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(232, 185, 35, 0.4), transparent);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.divider-vertical.center-line {
  position: relative;
  left: 0;
  transform: none;
  margin: 0 auto;
}

.h-100 {
  height: 100px;
}

.h-150 {
  height: 150px;
}

.divider-horizontal {
  height: 1px;
  background: linear-gradient(to right, rgba(232, 185, 35, 0.5), transparent);
  margin: 2rem 0;
}

.divider-horizontal.reverse-grad {
  background: linear-gradient(to left, rgba(232, 185, 35, 0.5), transparent);
}

.diamond-icon {
  width: 36px;
  height: 36px;
  border: 2px solid var(--fg-primary);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -18px auto 3rem auto;
  background: var(--bg-void);
  box-shadow: var(--glow-primary);
}

.diamond-inner {
  width: 12px;
  height: 12px;
  background: var(--fg-primary);
  box-shadow: 0 0 10px var(--fg-primary);
}

/* ============ MARQUEE ============ */
.marquee-section {
  padding: 5rem 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-void) 0%, var(--bg-surface) 50%, var(--bg-void) 100%);
  position: relative;
  border-top: 1px solid rgba(232, 185, 35, 0.1);
  border-bottom: 1px solid rgba(232, 185, 35, 0.1);
}

.marquee-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  will-change: transform;
}

.marquee-item {
  font-family: var(--font-serif);
  font-size: 6rem;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(232, 185, 35, 0.7);
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-shrink: 0;
}

.marquee-item.filled {
  color: var(--fg-primary);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 30px rgba(232, 185, 35, 0.4);
}

.marquee-star {
  font-size: 3rem;
  color: var(--fg-primary);
  display: inline-block;
  animation: rotate-slow 10s linear infinite;
}

/* ============ STATS SECTION ============ */
.stats-section {
  padding: 6rem 4rem;
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-void) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.stat-item {
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 25%;
  width: 1px;
  height: 50%;
  background: linear-gradient(to bottom, transparent, rgba(232, 185, 35, 0.3), transparent);
}

.stat-number {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 900;
  color: var(--fg-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: var(--glow-primary);
  display: block;
}

.stat-suffix {
  font-size: 2.5rem;
  color: var(--fg-primary);
  margin-left: 0.25rem;
}

.stat-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--fg-muted);
  text-transform: uppercase;
  margin-top: 1rem;
  font-weight: 600;
}

/* ============ TIMELINE DOT ============ */
.timeline-dot {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.timeline-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(232, 185, 35, 0.2);
  border: 1px solid rgba(232, 185, 35, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}

.timeline-point.active {
  background: var(--fg-primary);
  box-shadow: 0 0 12px var(--fg-primary);
  transform: scale(1.4);
}

/* ============ ORBIT VISUAL ============ */
.orbit-container {
  position: relative;
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-core {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fg-primary) 0%, #b8881a 70%, transparent 100%);
  box-shadow: 0 0 60px rgba(232, 185, 35, 0.8), 0 0 120px rgba(232, 185, 35, 0.4);
  position: absolute;
  animation: glow-pulse 3s ease-in-out infinite;
  z-index: 5;
}

.orbit-ring {
  position: absolute;
  border: 1px dashed rgba(232, 185, 35, 0.2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit-ring-1 {
  width: 200px;
  height: 200px;
  animation: rotate-slow 15s linear infinite;
}

.orbit-ring-2 {
  width: 300px;
  height: 300px;
  animation: rotate-slow 22s linear infinite reverse;
}

.orbit-ring-3 {
  width: 400px;
  height: 400px;
  animation: rotate-slow 30s linear infinite;
}

.orbit-planet {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  top: -7px;
  left: calc(50% - 7px);
}

.orbit-planet.p1 {
  background: var(--fg-secondary);
  box-shadow: 0 0 15px var(--fg-secondary);
}

.orbit-planet.p2 {
  background: var(--fg-tertiary);
  box-shadow: 0 0 15px var(--fg-tertiary);
  width: 20px;
  height: 20px;
  top: -10px;
  left: calc(50% - 10px);
}

.orbit-planet.p3 {
  background: var(--fg-accent);
  box-shadow: 0 0 15px var(--fg-accent);
  width: 12px;
  height: 12px;
  top: -6px;
  left: calc(50% - 6px);
}

/* ============ WAVE VISUAL ============ */
.wave-visual {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #0a1a2e 0%, #040812 100%);
  border: 1px solid rgba(63, 193, 201, 0.15);
}

.wave-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(63, 193, 201, 0.12) 50%, transparent 65%, transparent 100%);
  background-size: 200% 100%;
  animation: wave-flow 8s ease-in-out infinite;
}

.wave-layer.layer-2 {
  animation: wave-flow 12s ease-in-out infinite reverse;
  background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(232, 185, 35, 0.08) 70%, transparent 85%, transparent 100%);
}

.wave-layer.layer-3 {
  animation: wave-flow 15s ease-in-out infinite;
  background: linear-gradient(180deg, transparent 0%, transparent 75%, rgba(93, 63, 211, 0.1) 88%, transparent 100%);
}

.wave-label {
  position: absolute;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(227, 226, 232, 0.5);
  letter-spacing: 0.15em;
}

.wave-label.l1 {
  top: 15%;
}

.wave-label.l2 {
  top: 45%;
}

.wave-label.l3 {
  top: 75%;
  color: rgba(63, 193, 201, 0.6);
}

/* ============ IRON VISUAL ============ */
.iron-visual {
  position: relative;
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iron-star {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffcc00 20%, #ff6a00 50%, #3d0f00 100%);
  box-shadow: 0 0 80px rgba(255, 150, 50, 0.6),
    0 0 160px rgba(255, 80, 20, 0.3);
  position: relative;
  animation: float 4s ease-in-out infinite;
}

.iron-trail {
  position: absolute;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--fg-primary), transparent);
  animation: iron-fall 3s linear infinite;
  opacity: 0.6;
}

@keyframes iron-fall {
  0% {
    transform: translateY(-50px);
    height: 0;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(150px);
    height: 80px;
    opacity: 0;
  }
}

/* ============ MOUNTAIN VISUAL ============ */
.mountain-visual {
  position: relative;
  width: 100%;
  height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mountain {
  position: absolute;
  bottom: 45%;
  width: 0;
  height: 0;
  border-left: 140px solid transparent;
  border-right: 140px solid transparent;
  border-bottom: 180px solid #3a2a1f;
  filter: drop-shadow(0 0 20px rgba(232, 185, 35, 0.2));
}

.mountain-root {
  position: absolute;
  top: 55%;
  width: 120px;
  height: 50%;
  background: linear-gradient(180deg, #2a1a0f 0%, #1a0a05 80%, transparent 100%);
  clip-path: polygon(40% 0%, 60% 0%, 80% 100%, 20% 100%);
  opacity: 0.7;
}

.mountain-ground {
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fg-primary), transparent);
  opacity: 0.4;
}

.mountain-label-top,
.mountain-label-bottom {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mountain-label-top {
  top: 10%;
  right: 1rem;
  color: var(--fg-primary);
}

.mountain-label-bottom {
  bottom: 10%;
  right: 1rem;
  color: var(--fg-accent);
}

/* ============ TWO SEAS VISUAL ============ */
.two-seas-visual {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  border: 1px solid rgba(63, 193, 201, 0.15);
}

.sea-half {
  flex: 1;
  position: relative;
  background-size: 300% 100%;
  animation: wave-flow 10s ease-in-out infinite;
}

.sea-half.fresh {
  background: linear-gradient(135deg, #1a3a5e 0%, #2a5a8e 50%, #1a3a5e 100%);
}

.sea-half.salty {
  background: linear-gradient(135deg, #0a2a4a 0%, #1a4a6e 50%, #0a2a4a 100%);
  animation-direction: reverse;
  animation-duration: 14s;
}

.sea-barrier {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--fg-primary), transparent);
  box-shadow: 0 0 30px var(--fg-primary);
  transform: translateX(-50%);
  z-index: 2;
}

.sea-label {
  position: absolute;
  top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sea-label.left {
  left: 1.5rem;
}

.sea-label.right {
  right: 1.5rem;
}

/* ============ FINGERPRINT VISUAL ============ */
.fingerprint-visual {
  position: relative;
  width: 100%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fingerprint {
  width: 180px;
  height: 220px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fingerprint svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 15px rgba(255, 107, 157, 0.4));
}

.fingerprint svg path {
  fill: none;
  stroke: var(--fg-tertiary);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.fingerprint::before {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(255, 107, 157, 0.2);
  border-radius: 50%;
  animation: rotate-slow 30s linear infinite;
}

.fingerprint::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border: 1px dashed rgba(255, 107, 157, 0.15);
  border-radius: 50%;
  animation: rotate-slow 45s linear infinite reverse;
}

/* ============ FOOTER ============ */
footer {
  text-align: center;
  padding: 6rem 2rem 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fg-primary), transparent);
  transform: translateX(-50%);
  box-shadow: 0 0 12px var(--fg-primary);
}

footer h3 {
  font-family: var(--font-serif);
  color: var(--fg-primary);
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 700;
  margin-bottom: 2rem;
  text-shadow: var(--glow-primary);
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

.footer-links a {
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--fg-muted);
  text-transform: uppercase;
  font-weight: 600;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--fg-primary);
}

.footer-copy {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============ QUOTE BLOCK (Epilogue) ============ */
.quote-block {
  text-align: center;
  padding: 5rem 4rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(232, 185, 35, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.quote-block::before,
.quote-block::after {
  content: '"';
  position: absolute;
  font-family: var(--font-serif);
  font-size: 12rem;
  color: rgba(232, 185, 35, 0.12);
  line-height: 1;
  font-style: italic;
}

.quote-block::before {
  top: -1rem;
  left: 1rem;
}

.quote-block::after {
  content: '"';
  bottom: -5rem;
  right: 2rem;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
  .miracle-section {
    padding: 8rem 4rem 8rem 8rem;
  }

  .miracle-index {
    top: 2rem;
    right: 2rem;
  }
}

@media (max-width: 1024px) {
  .grid-2 {
    gap: 2rem;
  }

  .grid-2-inner {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .display-xl {
    font-size: 4.5rem;
  }

  .display-lg {
    font-size: 3.8rem;
  }

  .display-md {
    font-size: 3rem;
  }

  .arabic-lg {
    font-size: 2.8rem;
  }

  .arabic-md {
    font-size: 2rem;
  }

  .arabic-xl {
    font-size: 3.5rem;
  }

  .title-lg {
    font-size: 2rem;
  }

  .marquee-item {
    font-size: 4rem;
  }

  .stat-number {
    font-size: 3rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem;
  }

  .stat-item:not(:last-child)::after {
    display: none;
  }

  .sidebar {
    left: 1rem;
    padding: 1rem 0.6rem;
  }

  .timeline-dot {
    display: none;
  }
}

@media (max-width: 768px) {
  header {
    padding: 1rem 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .sidebar {
    display: none;
  }

  .miracle-section {
    padding: 5rem 1.5rem;
    height: auto;
    min-height: auto;
  }

  .miracle-index {
    top: 1.5rem;
    right: 1.5rem;
  }

  .miracle-index::before {
    width: 20px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .order-first {
    order: -1;
  }

  .order-last {
    order: 1;
  }

  .divider-vertical {
    display: none;
  }

  .mt-zero {
    margin-top: 0;
  }

  .sm-mt-md {
    margin-top: 2rem;
  }

  .sm-p-md {
    padding: 1.5rem;
  }

  .sm-text-center {
    text-align: center;
  }

  .sm-justify-center {
    justify-content: center;
  }

  .wrap-sm {
    flex-wrap: wrap;
  }

  .p-xl {
    padding: 3rem 1.5rem;
  }

  #miracle-1 .center-content {
    position: relative;
    top: 0;
    padding-top: 2rem;
  }

  .display-xl {
    font-size: 3rem;
  }

  .display-lg {
    font-size: 2.5rem;
  }

  .display-md {
    font-size: 2.2rem;
  }

  .display-sm {
    font-size: 2rem;
  }

  .arabic-lg {
    font-size: 2.2rem;
    line-height: 1.6;
  }

  .arabic-md {
    font-size: 1.75rem;
  }

  .arabic-xl {
    font-size: 2.5rem;
  }

  .marquee-item {
    font-size: 3rem;
  }

  .marquee-star {
    font-size: 2rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .stat-number {
    font-size: 3.5rem;
  }

  .quote-block {
    padding: 3rem 1.5rem;
  }

  .quote-block::before,
  .quote-block::after {
    font-size: 6rem;
  }

  .iron-visual,
  .mountain-visual,
  .orbit-container,
  .wave-visual,
  .fingerprint-visual,
  .two-seas-visual {
    height: 260px;
  }

  .orbit-ring-3 {
    width: 250px;
    height: 250px;
  }

  .orbit-ring-2 {
    width: 180px;
    height: 180px;
  }

  .orbit-ring-1 {
    width: 120px;
    height: 120px;
  }
}

/* ==========================================================================
   COSMIC JOURNEY — Pinned horizontal scrub with 3D scenes
.cosmic-journey {
  position: relative;
  width: 100%;
  height: 300vh; /* scroll length that drives 2 scenes + buffer */
background: linear-gradient(180deg, #05030f 0%, #0a0620 40%, #1a0f2e 80%, #05030f 100%);
z-index: 2;
isolation: isolate;
}

.cosmic-journey::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(93, 63, 211, 0.18), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(232, 185, 35, 0.12), transparent 55%);
  pointer-events: none;
}

.journey-viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #05030f 0%, #0a0620 40%, #1a0f2e 80%, #05030f 100%);
}

.journey-track {
  position: relative;
  width: max-content;
  height: 100%;
  display: flex;
  will-change: transform;
}

.journey-scene {
  position: relative;
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 4rem;
  padding: 0 clamp(3rem, 8vw, 9rem);
  perspective: 1400px;
}

.scene-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.scene-caption {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.scene-caption .arabic-md {
  color: var(--fg-white);
  opacity: 0.92;
  line-height: 1.8;
}

.journey-chrome {
  position: absolute;
  top: 2.5rem;
  left: 0;
  right: 0;
  padding: 0 clamp(2rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  z-index: 5;
  pointer-events: none;
  font-family: var(--font-mono, "Space Mono", monospace);
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: var(--fg-muted);
  text-transform: uppercase;
}

.journey-eyebrow {
  color: var(--fg-primary);
  font-weight: 600;
}

.journey-progress {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}

.journey-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--fg-primary), var(--fg-secondary));
  box-shadow: 0 0 12px rgba(232, 185, 35, 0.5);
}

.journey-stage-index {
  color: var(--fg-white);
  opacity: 0.85;
}

.journey-stage-index .sep {
  color: var(--fg-muted);
  margin: 0 0.4em;
}

.journey-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--fg-muted);
  text-transform: uppercase;
  z-index: 5;
}

.journey-hint .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-primary);
  box-shadow: 0 0 10px var(--fg-primary);
  animation: journey-pulse 1.8s ease-in-out infinite;
}

@keyframes journey-pulse {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

/* Scene 1 — Big Bang */
.bigbang {
  position: relative;
  width: min(560px, 60vh);
  height: min(560px, 60vh);
  transform-style: preserve-3d;
}

.bigbang-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--fg-primary) 35%, transparent 70%);
  box-shadow:
    0 0 40px rgba(232, 185, 35, 0.8),
    0 0 90px rgba(232, 185, 35, 0.4),
    0 0 160px rgba(232, 185, 35, 0.2);
  animation: bigbang-pulse 3.2s ease-in-out infinite;
}

@keyframes bigbang-pulse {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.15);
    filter: brightness(1.3);
  }
}

.bigbang-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(232, 185, 35, 0.35);
  transform: translate(-50%, -50%) rotateX(70deg);
  box-shadow: 0 0 20px rgba(232, 185, 35, 0.2) inset;
}

.bigbang-ring.r1 {
  width: 40%;
  height: 40%;
  animation: ring-spin 10s linear infinite;
}

.bigbang-ring.r2 {
  width: 60%;
  height: 60%;
  border-color: rgba(93, 63, 211, 0.4);
  animation: ring-spin 16s linear infinite reverse;
}

.bigbang-ring.r3 {
  width: 80%;
  height: 80%;
  border-color: rgba(255, 107, 157, 0.3);
  animation: ring-spin 22s linear infinite;
}

.bigbang-ring.r4 {
  width: 100%;
  height: 100%;
  border-color: rgba(63, 193, 201, 0.25);
  animation: ring-spin 30s linear infinite reverse;
}

@keyframes ring-spin {
  to {
    transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg);
  }
}

.bigbang-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
  transform-origin: top center;
  transform: translate(-50%, 0) rotate(var(--a));
  background: linear-gradient(180deg, rgba(232, 185, 35, 0.8), transparent);
  opacity: 0.7;
  filter: blur(0.5px);
  animation: spark-flicker 2.4s ease-in-out infinite;
}

.bigbang-spark:nth-child(even) {
  animation-delay: 1.2s;
}

@keyframes spark-flicker {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.9;
  }
}

/* three.js scene host — fills the scene-stage with a WebGL canvas */
.three-host {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: min(560px, 62vh);
  border-radius: 18px;
  overflow: hidden;
}

.three-host canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
}

/* ==========================================================================
   INFINITE 3D NAMES TICKER
   ========================================================================== */
.names-ticker-section {
  position: relative;
  padding: 6rem 0 7rem;
  overflow: hidden;
  perspective: 1200px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(93, 63, 211, 0.12), transparent 60%),
    var(--bg-void);
}

.names-ticker-section::before,
.names-ticker-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  z-index: 3;
  pointer-events: none;
}

.names-ticker-section::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-void) 0%, transparent 100%);
}

.names-ticker-section::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg-void) 0%, transparent 100%);
}

.ticker-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--fg-muted);
  margin-bottom: 3rem;
  text-transform: uppercase;
}

.ticker-eyebrow .line {
  flex: 0 0 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fg-primary), transparent);
}

.names-ticker {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.names-track {
  display: flex;
  gap: 1.8rem;
  width: max-content;
  transform-style: preserve-3d;
  will-change: transform;
}

.name-chip {
  flex: 0 0 auto;
  padding: 1.5rem 2.2rem;
  min-width: 280px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(232, 185, 35, 0.06), rgba(93, 63, 211, 0.05)),
    rgba(10, 8, 22, 0.85);
  border: 1px solid rgba(232, 185, 35, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s, box-shadow 0.5s;
  position: relative;
  overflow: hidden;
}

.name-chip::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(232, 185, 35, 0.6), transparent 40%, transparent 60%, rgba(93, 63, 211, 0.5));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.name-chip:hover::before {
  opacity: 1;
}

.name-chip:hover {
  border-color: rgba(232, 185, 35, 0.6);
  box-shadow: 0 20px 60px -20px rgba(232, 185, 35, 0.4);
}

.name-chip em {
  font-family: "Amiri", serif;
  font-style: normal;
  font-size: 2.8rem;
  color: var(--fg-white);
  line-height: 1;
  background: linear-gradient(180deg, #fff, var(--fg-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.name-chip span {
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

.name-chip.alt {
  background:
    linear-gradient(180deg, rgba(93, 63, 211, 0.08), rgba(63, 193, 201, 0.05)),
    rgba(10, 8, 22, 0.85);
  border-color: rgba(93, 63, 211, 0.3);
}

.name-chip.alt em {
  background: linear-gradient(180deg, #fff, var(--fg-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Responsive — stack the journey scenes on small screens */
@media (max-width: 1024px) {
  .cosmic-journey {
    height: 400vh;
  }

  .journey-scene {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 2rem;
    padding: 5rem 2rem 3rem;
  }

  .scene-stage {
    max-height: 45vh;
  }

  .scene-caption {
    max-width: 100%;
    text-align: center;
  }

  .scene-caption .arabic-md {
    text-align: center;
  }

  .name-chip {
    min-width: 220px;
    padding: 1.2rem 1.6rem;
  }

  .name-chip em {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .cosmic-journey {
    display: none;
  }

  /* hide the heavy 3D pinned section on phones */
}

/* ==========================================================================
   PULSAR VISUAL
   ========================================================================== */
.pulsar-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulsar-core {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #fff, #8a5dff, #1a0f2e);
  border-radius: 50%;
  box-shadow: 0 0 40px #8a5dff;
  animation: pulsar-pulse 0.8s infinite alternate;
  z-index: 2;
}

.pulsar-beam {
  position: absolute;
  width: 20px;
  height: 200px;
  background: linear-gradient(to top, transparent, #8a5dff, #fff);
  opacity: 0.8;
  filter: blur(4px);
  transform-origin: bottom center;
  animation: pulsar-beam-spin 2s linear infinite;
}

.pulsar-beam.top {
  bottom: 50%;
}

.pulsar-beam.bottom {
  top: 50%;
  transform-origin: top center;
  background: linear-gradient(to bottom, transparent, #8a5dff, #fff);
  animation: pulsar-beam-spin-bottom 2s linear infinite;
}

@keyframes pulsar-pulse {
  from {
    transform: scale(0.9);
    box-shadow: 0 0 20px #8a5dff;
  }

  to {
    transform: scale(1.1);
    box-shadow: 0 0 60px #8a5dff, 0 0 100px #fff;
  }
}

@keyframes pulsar-beam-spin {
  0% {
    transform: rotate(0deg) translateY(-20px);
  }

  100% {
    transform: rotate(360deg) translateY(-20px);
  }
}

@keyframes pulsar-beam-spin-bottom {
  0% {
    transform: rotate(0deg) translateY(20px);
  }

  100% {
    transform: rotate(360deg) translateY(20px);
  }
}

/* ==========================================================================
   WATER ORIGIN VISUAL
   ========================================================================== */
.water-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.water-drop {
  position: relative;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 30% 30%, #fff, #3fc1c9, #0a0620);
  border-radius: 50% 50% 50% 5%;
  transform: rotate(-45deg);
  box-shadow: inset 10px 10px 20px rgba(255, 255, 255, 0.4), 0 20px 40px rgba(63, 193, 201, 0.4);
  animation: water-drop-bounce 3s infinite ease-in-out;
  z-index: 2;
}

.water-ripple {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(63, 193, 201, 0.6);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5) rotateX(60deg);
  animation: water-ripple-expand 3s infinite ease-out;
  top: calc(50% + 40px);
}

.water-ripple.r2 {
  animation-delay: 0.5s;
}

@keyframes water-drop-bounce {

  0%,
  100% {
    transform: translateY(-20px) rotate(-45deg);
  }

  50% {
    transform: translateY(10px) rotate(-45deg) scaleY(0.9);
  }
}

@keyframes water-ripple-expand {
  0% {
    transform: scale(0.5) rotateX(60deg);
    opacity: 0;
  }

  20% {
    opacity: 0.8;
  }

  100% {
    transform: scale(3) rotateX(60deg);
    opacity: 0;
  }
}