/* ===== QURAN STORIES FOR KIDS ===== */
/* ===== NARRATOR + SOUNDS + ANIMATED SCENES ===== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --green: #2ecc71;
  --dark-green: #27ae60;
  --gold: #f1c40f;
  --dark-gold: #d4ac0d;
  --blue: #3498db;
  --dark-blue: #2980b9;
  --purple: #9b59b6;
  --orange: #e67e22;
  --red: #e74c3c;
  --teal: #1abc9c;
  --sky: #87ceeb;
  --sand: #d9a441;
  --rose: #d96a8a;
  --lilac: #b28dff;
  --bg: #fef9f0;
  --card-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --radius: 24px;
}

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

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: #333;
  overflow-x: hidden;
}

/* ===== STARS BACKGROUND ===== */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23f1c40f' opacity='0.3'/%3E%3Ccircle cx='80' cy='60' r='1' fill='%23f1c40f' opacity='0.2'/%3E%3Ccircle cx='150' cy='30' r='1.5' fill='%23f1c40f' opacity='0.3'/%3E%3Ccircle cx='60' cy='140' r='1' fill='%23f1c40f' opacity='0.2'/%3E%3Ccircle cx='170' cy='120' r='1.5' fill='%23f1c40f' opacity='0.3'/%3E%3Ccircle cx='100' cy='180' r='1' fill='%23f1c40f' opacity='0.2'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ===== HEADER ===== */
.site-header {
  background: linear-gradient(135deg, #1a3a2a 0%, #2d6a4f 50%, #1a3a2a 100%);
  color: white;
  text-align: center;
  padding: 40px 20px 60px;
  position: relative;
  overflow: hidden;
}

.site-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 5 L35 20 L50 20 L38 29 L43 44 L30 35 L17 44 L22 29 L10 20 L25 20 Z' fill='none' stroke='%23f1c40f' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E");
  pointer-events: none;
}

.site-header-home {
  padding: 22px 20px 72px;
}

.top-brand-bar {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  padding: 5px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.top-site-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff5cc;
  text-decoration: none;
  font-weight: 700;
}

.hero-shell {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.8fr);
  gap: 28px;
  align-items: center;
}

.hero-copy {
  text-align: left;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(241,196,15,0.14);
  color: #f7dd6d;
  font-weight: 800;
  margin-bottom: 18px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: white;
  text-decoration: none;
  font-weight: 800;
}

.hero-btn.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #123020;
}

.hero-panel {
  display: grid;
  gap: 14px;
}

.hero-stat-card {
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
  text-align: left;
}

.hero-stat-card strong {
  display: block;
  color: #fff2b6;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.hero-stat-card span {
  color: #d7ecd8;
  line-height: 1.55;
  font-weight: 600;
}

.header-moon {
  font-size: 64px;
  display: block;
  margin-bottom: 10px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.site-header h1 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--gold);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  margin-bottom: 8px;
}

.site-header .subtitle {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: #a8d8b9;
  font-weight: 600;
}

.arabic-bismillah {
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--gold);
  margin-top: 15px;
  font-family: serif;
  letter-spacing: 2px;
}

/* ===== WAVE DIVIDER ===== */
.wave {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: -2px;
}

.wave svg {
  display: block;
  width: 100%;
}

/* ===== MAIN CONTENT ===== */
main {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

/* ===== INTRO BANNER ===== */
.intro-banner {
  background: linear-gradient(135deg, #fff9e6, #fff);
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
  margin-bottom: 50px;
  box-shadow: var(--card-shadow);
}

.intro-banner h2 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: #2d6a4f;
  margin-bottom: 10px;
}

.intro-banner p {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: #555;
  line-height: 1.7;
}

.feature-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: -10px 0 40px;
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: white;
  color: #214730;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

/* ===== SECTION TITLE ===== */
.section-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: #2d6a4f;
  text-align: center;
  margin-bottom: 35px;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin: 10px auto 0;
}

/* ===== STORY GRID ===== */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

/* ===== STORY CARD ===== */
.story-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  border: 3px solid transparent;
}

.story-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}

.card-banner {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  position: relative;
  overflow: hidden;
}

.card-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.08);
}

/* Card color themes */
.theme-green { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.theme-blue  { background: linear-gradient(135deg, #2980b9, #3498db); }
.theme-purple { background: linear-gradient(135deg, #8e44ad, #9b59b6); }
.theme-orange { background: linear-gradient(135deg, #d35400, #e67e22); }
.theme-teal  { background: linear-gradient(135deg, #16a085, #1abc9c); }
.theme-red   { background: linear-gradient(135deg, #c0392b, #e74c3c); }
.theme-gold  { background: linear-gradient(135deg, #d4ac0d, #f1c40f); }
.theme-navy  { background: linear-gradient(135deg, #1a3a5c, #2980b9); }
.theme-sand  { background: linear-gradient(135deg, #b88b2d, #e0b75b); }
.theme-rose  { background: linear-gradient(135deg, #b24468, #e68eaa); }
.theme-sky   { background: linear-gradient(135deg, #4ca6d8, #91d4f4); }
.theme-lilac { background: linear-gradient(135deg, #8b6ada, #c3abff); }

.card-body {
  padding: 22px;
}

.card-number {
  display: inline-block;
  background: var(--gold);
  color: #2d6a4f;
  font-family: 'Fredoka One', cursive;
  font-size: 0.85rem;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  font-weight: 700;
}

.card-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.35rem;
  color: #1a3a2a;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
}

.card-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  background: #2d6a4f;
  color: white;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  transition: background 0.2s;
}

.story-card:hover .card-read-btn {
  background: var(--dark-green);
}

/* ===== FOOTER ===== */
.site-footer {
  background: #1a3a2a;
  color: #a8d8b9;
  text-align: center;
  padding: 30px 20px;
  font-size: 0.95rem;
}

.site-footer .footer-moon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}

.site-footer-brand {
  display: grid;
  gap: 16px;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.footer-muted {
  margin-top: 6px;
  opacity: 0.8;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-links a {
  color: #fff2b6;
  text-decoration: none;
  font-weight: 700;
}

/* ===== STORY PAGE ===== */
.story-page body {
  background: var(--bg);
}

.story-header {
  color: white;
  text-align: center;
  padding: 50px 20px 80px;
  position: relative;
  overflow: hidden;
}

.story-header h1 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 10px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

.story-header .prophet-emoji {
  font-size: 80px;
  display: block;
  margin-bottom: 15px;
  animation: float 3s ease-in-out infinite;
}

.story-header .tagline {
  font-size: clamp(1rem, 2vw, 1.2rem);
  opacity: 0.9;
  font-weight: 600;
}

/* ===== STORY CONTENT ===== */
.story-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  position: relative;
  z-index: 1;
}

.story-shell {
  position: relative;
}

.story-brand-ribbon {
  max-width: 800px;
  margin: 24px auto 0;
  padding: 0 20px;
}

.story-brand-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 22px;
  background: white;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: #214730;
}

.story-brand-card span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
}

.story-brand-card img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.story-brand-card small {
  color: #55725f;
  font-weight: 700;
}

.story-box {
  background: white;
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--card-shadow);
  margin-bottom: 30px;
}

.story-box h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  color: #2d6a4f;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.story-box p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #444;
  margin-bottom: 16px;
}

.story-box p:last-child {
  margin-bottom: 0;
}

/* ===== QURAN VERSE BOX ===== */
.quran-verse {
  background: linear-gradient(135deg, #fff9e6, #fffbf0);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  padding: 20px 25px;
  margin: 25px 0;
}

.quran-verse .verse-arabic {
  font-size: 1.4rem;
  color: #2d6a4f;
  text-align: right;
  font-family: serif;
  margin-bottom: 10px;
  line-height: 2;
}

.quran-verse .verse-text {
  font-style: italic;
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 8px;
}

.quran-verse .verse-ref {
  font-size: 0.85rem;
  color: #888;
  font-weight: 700;
}

/* ===== LESSON BOX ===== */
.lesson-box {
  background: linear-gradient(135deg, #e8f8f0, #f0fff8);
  border: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 30px;
  margin-bottom: 30px;
}

.lesson-box h3 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  color: #2d6a4f;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lesson-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.lesson-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.lesson-item p {
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
  margin: 0;
}

/* ===== BACK / NAV BUTTONS ===== */
.nav-bar {
  background: #1a3a2a;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: opacity 0.2s;
}

.back-btn:hover { opacity: 0.8; }

.nav-title {
  color: #a8d8b9;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ===== STORY NAVIGATION ===== */
.story-nav {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

.story-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 3px solid #2d6a4f;
  color: #2d6a4f;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
}

.story-nav-btn:hover, .story-nav-btn.primary {
  background: #2d6a4f;
  color: white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .story-box {
    padding: 24px 20px;
  }
  .stories-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   NARRATOR BAR
   ============================================================ */
.narrator-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(135deg, #0f2a1a, #1a3a2a);
  border-bottom: 3px solid var(--gold);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.nar-left  { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nar-center{ flex: 1; min-width: 80px; }
.nar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nar-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nar-avatar {
  font-size: 2rem;
  background: var(--gold);
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px #2d6a4f;
}

@keyframes narPulse {
  from { transform: scale(1);    box-shadow: 0 0 0 3px #2d6a4f; }
  to   { transform: scale(1.12); box-shadow: 0 0 0 6px #f1c40f55; }
}

.nar-info  { display: flex; flex-direction: column; gap: 2px; }
.nar-title { font-family: 'Fredoka One', cursive; color: var(--gold); font-size: 0.95rem; }
.nar-status{ color: #a8d8b9; font-size: 0.8rem; font-weight: 600; }

.nar-substatus {
  color: #d5f7df;
  font-size: 0.74rem;
  font-weight: 700;
}

.nar-progress {
  height: 8px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  overflow: hidden;
}
.nar-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #2ecc71);
  border-radius: 4px;
  width: 0%;
  transition: width 0.5s ease;
}

/* Narrator buttons */
.nar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 24px;
  border: 2px solid transparent;
  font-family: 'Fredoka One', cursive;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  background: rgba(255,255,255,0.12);
  color: #d9f5e5;
  border-color: rgba(255,255,255,0.2);
}
.nar-btn.primary {
  background: var(--gold);
  color: #1a3a2a;
  border-color: var(--gold);
  font-size: 1rem;
}
.nar-btn:hover        { transform: translateY(-2px); filter: brightness(1.1); }
.nar-btn:active       { transform: scale(0.96); }
.nar-btn.nar-active   { background: #2ecc71; color: white; border-color: #2ecc71; }
.nar-btn.stop         { background: rgba(231,76,60,0.3); border-color: #e74c3c; color: #ff9999; }
.nar-btn.stop:hover   { background: #e74c3c; color: white; }
.btn-icon             { font-size: 1.1em; }

.nar-select {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.1);
  color: #f8fff8;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

.nar-select option {
  color: #123020;
}

/* Reading highlight */
.reading-now {
  background: linear-gradient(120deg, #fffde7 0%, #fff9c4 100%) !important;
  border-left: 5px solid var(--gold) !important;
  border-radius: 8px;
  padding-left: 14px !important;
  box-shadow: 0 2px 12px rgba(241,196,15,0.25);
  transition: background 0.4s, border 0.3s;
}

/* ============================================================
   PANEL REVEAL ANIMATION
   ============================================================ */
.panel-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.panel-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ============================================================
   SPEECH BUBBLES on em tags
   ============================================================ */
.speech-em {
  display: block;
  background: #fff;
  border: 2.5px solid #2d6a4f;
  border-radius: 18px 18px 18px 4px;
  padding: 10px 16px 10px 20px;
  margin: 12px 0;
  color: #1a4a2e;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  position: relative;
  box-shadow: 3px 3px 0 #2d6a4f44;
}
.speech-em::before {
  content: '❝';
  position: absolute;
  top: -8px; left: 10px;
  font-size: 1.5rem;
  color: var(--gold);
  font-style: normal;
  line-height: 1;
}

/* ============================================================
   ANIMATED SCENE HEADERS  (pure CSS + emoji, no images)
   ============================================================ */
.scene-header {
  width: 100%;
  height: 190px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.scene-header span {
  position: absolute;
  line-height: 1;
  user-select: none;
}

/* FIX: All animations — no transform conflicts, viewport-based movement */
@keyframes float     { 0%,100%{transform:translateY(0)}          50%{transform:translateY(-14px)} }
@keyframes sway      { 0%,100%{transform-origin:bottom center; transform:rotate(-6deg)}  50%{transform-origin:bottom center; transform:rotate(6deg)} }
@keyframes pulse     { 0%,100%{transform:scale(1)}               50%{transform:scale(1.22)} }
@keyframes flicker   { 0%,100%{transform:scaleY(1)   scaleX(0.95); opacity:1}  50%{transform:scaleY(1.15) scaleX(1.05); opacity:.85} }
@keyframes bob       { 0%,100%{transform:translateY(0)   rotate(-3deg)} 50%{transform:translateY(-16px) rotate(3deg)} }
@keyframes rise      { 0%  {transform:translateY(0);   opacity:.9} 100%{transform:translateY(-160px); opacity:0} }
@keyframes rain      { 0%  {transform:translateY(-10px); opacity:0} 15%{opacity:1} 85%{opacity:.8} 100%{transform:translateY(210px); opacity:0} }
@keyframes twinkle   { 0%,100%{opacity:1; transform:scale(1)}    50%{opacity:.2; transform:scale(0.6)} }
@keyframes glow      { 0%,100%{filter:drop-shadow(0 0 5px #f1c40f)}  50%{filter:drop-shadow(0 0 18px #f1c40f) brightness(1.3)} }
/* flyAcross: elements with left:5% fly across to right — no transform conflict */
@keyframes flyAcross { 0%{transform:translateX(-120px); opacity:0} 6%{opacity:1} 92%{opacity:1} 100%{transform:translateX(102vw); opacity:0} }
/* whaleCross: whale swims full width both directions */
@keyframes whaleCross {
  0%   { transform:translateX(-120px) scaleX(1); }
  48%  { transform:translateX(96vw)   scaleX(1); opacity:1; }
  49%  { transform:translateX(96vw)   scaleX(1); opacity:0; }
  50%  { transform:translateX(96vw)   scaleX(-1); opacity:0; }
  51%  { transform:translateX(96vw)   scaleX(-1); opacity:1; }
  99%  { transform:translateX(-120px) scaleX(-1); opacity:1; }
  100% { transform:translateX(-120px) scaleX(1); opacity:0; }
}
/* staffPulse: pulse that preserves the rotation */
@keyframes staffPulse { 0%,100%{transform:rotate(-15deg) scale(1)} 50%{transform:rotate(-15deg) scale(1.2)} }

/* ── Adam — Garden of Eden ── */
.scene-adam { background: linear-gradient(180deg, #87ceeb 0%, #b5e8b0 70%, #5a9e4a 100%); }
.scene-adam .s-sun      { font-size:3.8rem; top:10px;  left:44%;   animation: pulse 4s ease-in-out infinite; }
.scene-adam .s-tree1    { font-size:5rem;   bottom:0;  left:6%;    animation: sway 4s ease-in-out infinite; }
.scene-adam .s-tree2    { font-size:3.8rem; bottom:0;  left:24%;   animation: sway 5s ease-in-out infinite 0.5s; }
.scene-adam .s-tree3    { font-size:4.5rem; bottom:0;  right:6%;   animation: sway 3.5s ease-in-out infinite 1s; }
.scene-adam .s-flower   { font-size:2.2rem; bottom:8px; left:46%;  animation: bob 3s ease-in-out infinite; }
.scene-adam .s-butterfly{ font-size:2.2rem; top:50px;  left:5%;    animation: flyAcross 9s linear infinite 1s; }
.scene-adam .s-bird     { font-size:1.8rem; top:28px;  left:5%;    animation: flyAcross 13s linear infinite 5s; }

/* ── Nuh — The Flood ── */
.scene-nuh { background: linear-gradient(180deg, #1c2f4a 0%, #2980b9 60%, #1a5276 100%); }
.scene-nuh .s-ark    { font-size:4.5rem; bottom:18px; left:42%;   animation: bob 2.5s ease-in-out infinite; }
.scene-nuh .s-cloud1 { font-size:3.2rem; top:8px;    left:8%;    animation: float 5s ease-in-out infinite; }
.scene-nuh .s-cloud2 { font-size:2.5rem; top:12px;   right:10%;  animation: float 6s ease-in-out infinite 1.5s; }
.scene-nuh .s-dove   { font-size:2.2rem; top:45px;   left:5%;    animation: flyAcross 13s linear infinite 4s; }
.scene-nuh .s-rain1  { font-size:1.6rem; top:0; left:14%;        animation: rain 1.8s linear infinite; }
.scene-nuh .s-rain2  { font-size:1.3rem; top:0; left:43%;        animation: rain 2.2s linear infinite 0.5s; }
.scene-nuh .s-rain3  { font-size:1.6rem; top:0; right:16%;       animation: rain 1.6s linear infinite 1s; }
.scene-nuh .s-wave   { font-size:3.5rem; bottom:0;   left:42%;   animation: bob 2s ease-in-out infinite 0.3s; }

/* ── Ibrahim — Fire ── */
.scene-ibrahim { background: linear-gradient(180deg, #0d0000 0%, #3d0a00 50%, #7d2600 100%); }
.scene-ibrahim .s-flame1 { font-size:6.5rem; bottom:0; left:34%;   animation: flicker 0.45s ease-in-out infinite; }
.scene-ibrahim .s-flame2 { font-size:5rem;   bottom:0; left:20%;   animation: flicker 0.65s ease-in-out infinite 0.1s; }
.scene-ibrahim .s-flame3 { font-size:5rem;   bottom:0; left:52%;   animation: flicker 0.55s ease-in-out infinite 0.2s; }
.scene-ibrahim .s-spark1 { font-size:1.6rem; bottom:95px;  left:30%;  animation: rise 1.5s linear infinite; }
.scene-ibrahim .s-spark2 { font-size:1.3rem; bottom:82px;  left:50%;  animation: rise 1.8s linear infinite 0.4s; }
.scene-ibrahim .s-spark3 { font-size:1.3rem; bottom:110px; left:40%;  animation: rise 1.3s linear infinite 0.8s; }
.scene-ibrahim .s-moon   { font-size:3rem;   top:8px;  right:16%;  animation: glow 3s ease-in-out infinite; }
.scene-ibrahim .s-star1  { font-size:1.5rem; top:12px; left:10%;   animation: twinkle 2s ease-in-out infinite; }
.scene-ibrahim .s-star2  { font-size:1.2rem; top:28px; left:56%;   animation: twinkle 2.5s ease-in-out infinite 0.5s; }
.scene-ibrahim .s-figure { font-size:3.2rem; bottom:8px; left:41%; z-index:2; filter:brightness(0.7); }

/* ── Yusuf — Stars & Night ── */
.scene-yusuf { background: linear-gradient(180deg, #040218 0%, #0d0628 50%, #1a0b40 100%); }
.scene-yusuf .s-moon    { font-size:3.8rem; top:8px;  left:44%;   animation: glow 4s ease-in-out infinite; }
.scene-yusuf .s-star1   { font-size:1.8rem; top:8px;  left:9%;    animation: twinkle 1.8s ease-in-out infinite; }
.scene-yusuf .s-star2   { font-size:1.3rem; top:5px;  left:27%;   animation: twinkle 2.2s ease-in-out infinite 0.3s; }
.scene-yusuf .s-star3   { font-size:1.5rem; top:16px; right:7%;   animation: twinkle 1.5s ease-in-out infinite 0.6s; }
.scene-yusuf .s-star4   { font-size:1.2rem; top:34px; right:26%;  animation: twinkle 2.8s ease-in-out infinite 0.9s; }
.scene-yusuf .s-star5   { font-size:1.4rem; top:6px;  right:14%;  animation: twinkle 2s ease-in-out infinite 0.2s; }
.scene-yusuf .s-star6   { font-size:1.1rem; top:42px; left:40%;   animation: twinkle 1.9s ease-in-out infinite 1.1s; }
.scene-yusuf .s-well    { font-size:4rem;   bottom:0; left:43%;   animation: float 3s ease-in-out infinite; }
.scene-yusuf .s-shooting{ font-size:2rem;   top:18px; left:5%;    animation: flyAcross 6s linear infinite 2s; }

/* ── Musa — Sea Parting ── */
.scene-musa { background: linear-gradient(180deg, #1a6b8a 0%, #1abc9c 60%, #0e7a5e 100%); }
.scene-musa .s-wave-l  { font-size:5rem; bottom:12px; left:6%;    animation: bob 2s ease-in-out infinite; }
.scene-musa .s-wave-r  { font-size:5rem; bottom:12px; right:6%;   animation: bob 2s ease-in-out infinite 0.5s; }
.scene-musa .s-staff   { font-size:3.2rem; bottom:8px; left:44%;  animation: staffPulse 2s ease-in-out infinite; }
.scene-musa .s-fish1   { font-size:2rem;   bottom:48px; left:5%;  animation: flyAcross 8s linear infinite; }
.scene-musa .s-fish2   { font-size:1.6rem; bottom:75px; left:5%;  animation: flyAcross 11s linear infinite 3.5s; }
.scene-musa .s-sun     { font-size:3.2rem; top:6px;  right:10%;   animation: glow 4s ease-in-out infinite; }
.scene-musa .s-cloud   { font-size:2.5rem; top:8px;  left:8%;     animation: float 5s ease-in-out infinite; }

/* ── Sulaiman — Palace & Birds ── */
.scene-sulaiman { background: linear-gradient(180deg, #1a3a5c 0%, #d4ac0d 80%, #e8c520 100%); }
.scene-sulaiman .s-palace { font-size:6rem;   bottom:0;    left:40%; }
.scene-sulaiman .s-crown  { font-size:3.2rem; bottom:88px; left:43%;  animation: float 3s ease-in-out infinite; }
.scene-sulaiman .s-bird1  { font-size:2.8rem; top:14px; left:5%;     animation: flyAcross 7s linear infinite; }
.scene-sulaiman .s-bird2  { font-size:2.2rem; top:36px; left:5%;     animation: flyAcross 9s linear infinite 2.5s; }
.scene-sulaiman .s-bird3  { font-size:1.8rem; top:8px;  left:5%;     animation: flyAcross 11s linear infinite 5s; }
.scene-sulaiman .s-cloud1 { font-size:2.8rem; top:6px;  right:6%;    animation: float 6s ease-in-out infinite; }
.scene-sulaiman .s-sun    { font-size:3.2rem; top:4px;  left:10%;    animation: glow 4s ease-in-out infinite; }

/* ── Yunus — Deep Ocean ── */
.scene-yunus { background: linear-gradient(180deg, #020920 0%, #0b2545 60%, #0e3a6e 100%); }
.scene-yunus .s-whale   { font-size:6.5rem; bottom:22px; left:5%;   animation: whaleCross 18s linear infinite; }
.scene-yunus .s-fish1   { font-size:2rem;   bottom:95px; left:5%;   animation: flyAcross 9s linear infinite; }
.scene-yunus .s-fish2   { font-size:1.6rem; bottom:60px; left:5%;   animation: flyAcross 7s linear infinite 3.5s; }
.scene-yunus .s-bubble1 { font-size:1.6rem; bottom:22px; left:28%;  animation: rise 3s linear infinite; }
.scene-yunus .s-bubble2 { font-size:1.3rem; bottom:22px; left:55%;  animation: rise 4s linear infinite 1.2s; }
.scene-yunus .s-bubble3 { font-size:1.1rem; bottom:22px; right:26%; animation: rise 2.5s linear infinite 2s; }
.scene-yunus .s-glow    { font-size:2.8rem; bottom:50px; left:44%;  animation: twinkle 2s ease-in-out infinite; }

/* ── Kahf — The Cave ── */
.scene-kahf { background: linear-gradient(180deg, #0a0000 0%, #1a0000 50%, #3d0000 100%); }
.scene-kahf .s-arch       { position:absolute; bottom:0; left:calc(50% - 70px); width:140px; height:110px; border-radius:50% 50% 0 0; background:#0f0000; border:4px solid #3d1010; }
.scene-kahf .s-glow-inside{ position:absolute; bottom:0; left:calc(50% - 42px); width:84px; height:72px; background:radial-gradient(ellipse, rgba(255,200,60,0.35) 0%, transparent 70%); border-radius:0 0 50% 50%; animation: pulse 3s ease-in-out infinite; }
.scene-kahf .s-candle   { font-size:3rem;   bottom:10px; left:52%;  animation: flicker 0.7s ease-in-out infinite; }
.scene-kahf .s-dog      { font-size:3rem;   bottom:4px;  left:26%; }
.scene-kahf .s-moon     { font-size:3rem;   top:8px;  right:16%;    animation: glow 5s ease-in-out infinite; }
.scene-kahf .s-star1    { font-size:1.5rem; top:10px; left:10%;     animation: twinkle 2s ease-in-out infinite; }
.scene-kahf .s-star2    { font-size:1.2rem; top:26px; left:40%;     animation: twinkle 2.8s ease-in-out infinite 0.6s; }
.scene-kahf .s-zzz      { font-size:1.5rem; bottom:52px; left:60%;  animation: rise 4s linear infinite; }

/* ── Ismail — Desert & Zamzam ── */
.scene-ismail { background: linear-gradient(180deg, #88cdf6 0%, #f3d183 58%, #d59d47 100%); }
.scene-ismail .s-sun     { font-size: 3.7rem; top: 10px; right: 12%; animation: glow 4s ease-in-out infinite; }
.scene-ismail .s-tent    { font-size: 4.8rem; bottom: 6px; left: 10%; }
.scene-ismail .s-well    { font-size: 4rem; bottom: 8px; left: 44%; animation: bob 2.5s ease-in-out infinite; }
.scene-ismail .s-palm1   { font-size: 4.6rem; bottom: 0; right: 6%; animation: sway 4s ease-in-out infinite; }
.scene-ismail .s-palm2   { font-size: 3.7rem; bottom: 0; right: 25%; animation: sway 5s ease-in-out infinite .6s; }
.scene-ismail .s-bird    { font-size: 1.8rem; top: 28px; left: 5%; animation: flyAcross 12s linear infinite 2s; }

/* ── Ayub — Patience ── */
.scene-ayub { background: linear-gradient(180deg, #8cb7da 0%, #dfeaf3 45%, #8ab56d 100%); }
.scene-ayub .s-cloud1  { font-size: 3rem; top: 12px; left: 8%; animation: float 4s ease-in-out infinite; }
.scene-ayub .s-cloud2  { font-size: 2.4rem; top: 24px; right: 10%; animation: float 5.5s ease-in-out infinite .8s; }
.scene-ayub .s-house   { font-size: 4.6rem; bottom: 8px; left: 14%; }
.scene-ayub .s-tree    { font-size: 4.4rem; bottom: 2px; right: 12%; animation: sway 4s ease-in-out infinite; }
.scene-ayub .s-heart   { font-size: 2.4rem; top: 22px; left: 45%; animation: pulse 2.5s ease-in-out infinite; }
.scene-ayub .s-water   { font-size: 2.8rem; bottom: 12px; left: 46%; animation: bob 2s ease-in-out infinite; }

/* ── Isa — Light & Mercy ── */
.scene-isa { background: linear-gradient(180deg, #97d9f6 0%, #d9f1ff 52%, #a9d58a 100%); }
.scene-isa .s-sun      { font-size: 3.6rem; top: 10px; left: 10%; animation: glow 3.5s ease-in-out infinite; }
.scene-isa .s-dove1    { font-size: 2.5rem; top: 36px; left: 5%; animation: flyAcross 10s linear infinite; }
.scene-isa .s-dove2    { font-size: 2rem; top: 18px; left: 5%; animation: flyAcross 13s linear infinite 3s; }
.scene-isa .s-palm     { font-size: 4.6rem; bottom: 0; left: 14%; animation: sway 4.5s ease-in-out infinite; }
.scene-isa .s-lamp     { font-size: 3.6rem; bottom: 18px; left: 47%; animation: pulse 2.2s ease-in-out infinite; }
.scene-isa .s-flower   { font-size: 2.2rem; bottom: 10px; right: 14%; animation: bob 3s ease-in-out infinite; }

/* ── Maryam — Worship & Miracle ── */
.scene-maryam { background: linear-gradient(180deg, #7a7ad7 0%, #c8bcff 48%, #f8e7c4 100%); }
.scene-maryam .s-star1  { font-size: 1.5rem; top: 16px; left: 18%; animation: twinkle 2s ease-in-out infinite; }
.scene-maryam .s-star2  { font-size: 1.2rem; top: 12px; right: 20%; animation: twinkle 2.8s ease-in-out infinite .5s; }
.scene-maryam .s-arch   { font-size: 4.6rem; bottom: 0; left: 16%; }
.scene-maryam .s-date   { font-size: 4.4rem; bottom: 0; right: 12%; animation: sway 4.2s ease-in-out infinite; }
.scene-maryam .s-flower { font-size: 2.4rem; bottom: 16px; left: 46%; animation: pulse 2.4s ease-in-out infinite; }
.scene-maryam .s-bird   { font-size: 1.7rem; top: 30px; left: 5%; animation: flyAcross 11s linear infinite 1s; }

.home-cta {
  margin-top: 54px;
  padding: 26px;
  border-radius: 28px;
  background: linear-gradient(135deg, #183824, #295b3f);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.home-cta h2 {
  font-family: 'Fredoka One', cursive;
  color: #fff2b6;
  margin-bottom: 8px;
}

.home-cta p {
  color: #d6efde;
  line-height: 1.7;
}

/* ============================================================
   RESPONSIVE tweaks for scenes
   ============================================================ */
@media (max-width: 600px) {
  .scene-header { height: 140px; }
  .scene-header span { font-size: 72% !important; }
  .scene-kahf .s-arch { width: 100px; height: 80px; left: calc(50% - 50px); }
  .scene-kahf .s-glow-inside { width: 60px; left: calc(50% - 30px); }
  .narrator-bar { padding: 10px 12px; }
  .nar-btn { padding: 7px 12px; font-size: 0.82rem; }
  .nar-avatar { width: 40px; height: 40px; font-size: 1.6rem; }
  .top-brand-bar,
  .hero-shell,
  .home-cta,
  .story-brand-card {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-copy,
  .hero-panel {
    text-align: center;
  }
  .hero-actions {
    justify-content: center;
  }
  .story-brand-card small {
    display: block;
    margin-top: 4px;
  }
  .nar-right,
  .nar-tools {
    width: 100%;
  }
  .nar-btn,
  .nar-select {
    width: 100%;
    justify-content: center;
  }
}