/* OQADAH • styles.css • v0.9.10 • 2025-09-10
   Change log:
   - Single source of truth for layout & hero layering
   - Starfield back (z:0), Solar stage middle (z:1), Text front (z:3)
   - Clean nav, cards, poster, footer
*/

/* ===== Base / Reset ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 50% 20%, #0e1624 0%, #0a0f17 60%);
  color: #e8eefc;
  overflow-x: hidden;
}
a { color: #f6c453; text-decoration: none; }
a:hover { opacity: .92; }

/* ===== Layout ===== */
.container { width: min(1100px, 92vw); margin-inline: auto; padding: 1rem; }
main section { padding: 64px 0; }
.grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .grid { grid-template-columns: 1.2fr 1fr; } }

/* ===== Header / Nav ===== */
header {
  position: fixed; top: 0; left: 0; right: 0; height: 72px;
  display: flex; align-items: center; z-index: 1000;
  background: linear-gradient(180deg, rgba(10,15,23,.9), rgba(10,15,23,.6) 60%, transparent);
  backdrop-filter: saturate(130%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
header .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: .75rem; font-weight: 800; letter-spacing: .12em; color: #fff; }
.brand-link { color: #e8eefc; }
.glyph {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffefc5 0%, #f6c453 40%, #bf7f2e 100%);
  box-shadow: 0 0 20px rgba(246,196,83,.45);
}
nav a { margin-left: 1.1rem; font-weight: 600; color: #d6e0ff; }
.btn {
  display: inline-block;
  padding: .55rem .9rem;
  border: 1px solid rgba(246,196,83,.35);
  border-radius: 999px;
  color: #f6c453;
  background: transparent;
}

/* ===== Hero stacking contract ===== */
.hero { position: relative; min-height: 62svh; display: grid; place-items: center; }
.hero .container { position: relative; z-index: 3; text-align: center; padding-top: 88px; }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.stage { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }

h1 { font-size: clamp(36px, 6vw, 80px); line-height: 1.04; margin: .75rem 0 0; }
.subtitle { max-width: 70ch; margin: 1rem auto 1.5rem; color: #8892a6; }
.cta { margin-top: .5rem; }

/* ===== Hero (stacked layers) ===== */
.hero {
  position: relative;
  min-height: clamp(520px, 70vh, 740px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

/* back: starfield */
#stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* middle: animated solar stage */
.stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.sun {
  position: absolute;
  top: 44%;
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4d1 0%, #ffd05a 30%, #ffb73e 60%, rgba(255,146,30,.2) 100%);
  box-shadow:
    0 0 60px 30px rgba(255,184,72,.25),
    0 0 140px 60px rgba(255,184,72,.15);
  mix-blend-mode: screen;
}

.planet {
  position: absolute;
  bottom: 14%;
  right: 16%;
  width: clamp(180px, 26vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 80% 80%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 30% 30%, #2a3d49 0%, #3b6a81 60%, #0f2a3e 100%);
  box-shadow:
    inset -24px -24px 40px rgba(0,0,0,.35),
    0 12px 50px rgba(22,42,65,.35);
  filter: saturate(1.05) contrast(1.05);
}

.orbit {
  position: absolute;
  width: min(76vmin, 760px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  opacity: .25;
}

.orbit__inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  animation: orbit 28s linear infinite;
}

@keyframes orbit {
  to { transform: rotate(360deg); }
}

/* front: content */
.hero .container {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: clamp(36px, 6vw, 82px);
  line-height: 1.05;
  margin: .25rem 0 .75rem;
}

.hero .subtitle {
  max-width: 720px;
  margin-inline: auto;
  color: #98a6c2;
}

.hero .btn {
  display: inline-block;
  margin-top: .9rem;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(170, 170, 170, .35);
  text-decoration: none;
}

/* ===== Cards / Poster ===== */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 24px;
}
.muted { color: #8892a6; }
.poster {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  margin-top: .75rem;
}

/* ===== Footer ===== */
footer { padding: 72px 0 56px; color: #98a6c2; text-align: center; }
.tiny { font-size: 12px; opacity: .8; }