/* ═══════════════════════════════════════════════════════
   css/04-hero.css
   HERO SECTION — mandala, bismillah, name, pills, scroll cue
   To change hero sizing, font sizes or animation speed,
   edit this file only.
═══════════════════════════════════════════════════════ */

.hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6rem 2rem 5rem;
  text-align: center;
  position: relative;
}

/* ── Mandala wrapper ── */
.mandala-wrap {
  width: 268px; height: 268px;
  margin: 0 auto 2.8rem;
  animation: orbit 80s linear infinite;   /* speed: change 80s */
  will-change: transform;
}
.mandala-wrap svg { width: 100%; height: 100%; }

/* ── Bismillah ── */
.bismillah {
  font-family: var(--font-arabic);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--gold);
  direction: rtl;
  margin-bottom: 0.4rem;
  text-shadow: 0 0 60px rgba(201,168,76,0.22);
  animation: riseUp 1.4s ease both;
  transition: color var(--ease);
}
body.light .bismillah {
  text-shadow: 0 2px 18px rgba(110,72,16,0.15);
}

.bismillah-tr {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  margin-bottom: 2.8rem;
  animation: riseUp 1.7s ease both;
  transition: color var(--ease);
}

/* ── Hero name ── */
.hero-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--text-primary);
  animation: riseUp 2s ease both;
  transition: color var(--ease);
}
.hero-name em {
  color: var(--gold);
  font-style: normal;
  transition: color var(--ease);
}

/* ── Epithet ── */
.hero-title {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.92rem, 2vw, 1.22rem);
  color: var(--text-mute);
  margin-top: 1rem; letter-spacing: 0.06em;
  animation: riseUp 2.3s ease both;
  transition: color var(--ease);
}

/* ── Role pills ── */
.hero-pills {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem; margin-top: 1.8rem;
  animation: riseUp 2.6s ease both;
}
.pill {
  padding: 0.3rem 1rem;
  border: 1px solid var(--gold-border);
  font-family: var(--font-display);
  font-size: 0.58rem; letter-spacing: 0.14em;
  color: var(--gold-pale);
  text-transform: uppercase;
  background: var(--gold-glow);
  transition: all var(--ease);
}
body.light .pill { color: var(--gold); }
.pill:hover {
  background: var(--bg-card-hover);
  border-color: var(--gold-border2);
  color: var(--gold);
}

/* ── Scroll cue ── */
.scroll-hint {
  position: absolute; bottom: 2.2rem;
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 0.4rem;
  animation: breathe 2.5s ease-in-out infinite;
}
.scroll-hint p {
  font-family: var(--font-display);
  font-size: 0.54rem; letter-spacing: 0.22em;
  color: var(--text-muted); text-transform: uppercase;
  transition: color var(--ease);
}
.scroll-hint .bar {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, var(--gold), transparent);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .hero-name { letter-spacing: 0.08em; }
  .mandala-wrap { width: 210px; height: 210px; }
  .bismillah { font-size: 1.6rem; }
}