/* ─────────────────────────────────────────────────────
   Ajraan — Landing Page (minimal coming-soon)
   Manuscript palette + Outfit typography
   ───────────────────────────────────────────────────── */

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --cream:  #F8F2E4;
  --sand:   #D9C9A4;
  --gold:   #AC8D6A;
  --brass:  #C9A766;
  --walnut: #7A6743;
  --ink:    #122128;
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}
body { margin: 0; height: 100%; }
h1, p { margin: 0; }
svg { display: block; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Stage — full viewport, single view ─────────────── */
body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  color: var(--sand);
  background-color: #08141A; /* fallback while image loads / if it fails */
  /* Layer order (top → bottom): gradient tint over Kaaba photo */
  background-image:
    linear-gradient(180deg,
      rgba(8, 20, 26, 0.97)   0%,
      rgba(18, 33, 40, 0.95)  50%,
      rgba(27, 44, 52, 0.93)  100%),
    url("../assets/kaaba-hero.jpg");
  background-size: cover, cover;
  background-position: center, left center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* Serve the smaller image on smaller viewports (mobile / low-DPI) */
@media (max-width: 900px) {
  body {
    background-image:
      linear-gradient(180deg,
        rgba(8, 20, 26, 0.97)   0%,
        rgba(18, 33, 40, 0.95)  50%,
        rgba(27, 44, 52, 0.93)  100%),
      url("../assets/kaaba-hero-mobile.jpg");
  }
}

.stage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 40px 24px 20px;
  position: relative;
}

.ornament {
  position: absolute;
  top: 24px;
  right: 32px;
  color: var(--brass);
  letter-spacing: 6px;
  font-size: 14px;
}

/* ── Mark — centered stack ─────────────────────────── */
.mark {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.glyph {
  width: 52px;
  height: 38px;
  margin: 0 auto 28px;
  color: var(--brass);
}

.wordmark {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 12vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 12px;
}

.arabic {
  font-family: 'Zain', 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 40px);
  color: var(--brass);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 6px;
}

/* ── Multi-element divider ─────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 32px auto;
}
.divider-line {
  flex: 0 0 60px;
  height: 1px;
  background: var(--brass);
  opacity: 0.55;
}
.divider-pip {
  width: 6px; height: 6px;
  background: var(--brass);
  border-radius: 50%;
}

/* ── Tagline ───────────────────────────────────────── */
.tagline {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.4;
  color: var(--sand);
  margin-bottom: 40px;
  letter-spacing: 0.005em;
}
.tagline em {
  color: var(--brass);
  font-style: italic;
  font-weight: 500;
}

/* ── Waitlist form ─────────────────────────────────── */
.waitlist {
  margin: 0 auto;
  max-width: 460px;
}
.waitlist-row {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(248, 242, 228, 0.05);
  border: 1px solid rgba(201, 167, 102, 0.4);
  border-radius: 99px;
  transition: border-color 160ms ease;
}
.waitlist-row:focus-within { border-color: var(--brass); }
.waitlist-input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  color: var(--cream);
  font-size: 15px;
  outline: none;
}
.waitlist-input::placeholder { color: rgba(217, 201, 164, 0.5); }
.waitlist-btn {
  background: var(--brass);
  color: var(--ink);
  padding: 10px 20px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 160ms ease, transform 100ms ease;
}
.waitlist-btn:hover { background: var(--cream); }
.waitlist-btn:active { transform: scale(0.98); }
.waitlist-msg {
  margin-top: 12px;
  min-height: 20px;
  font-size: 13px;
  color: var(--sand);
  opacity: 0.7;
}
.waitlist-msg.is-error { color: #E4B8A0; opacity: 1; }
.waitlist-msg.is-success { color: var(--brass); opacity: 1; }

/* ── Micro-footer ─────────────────────────────────── */
.micro-footer {
  position: relative;
  align-self: end;
  justify-self: center;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0.02em;
}
.micro-footer a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(201, 167, 102, 0.6); /* brass underline */
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.micro-footer a:hover {
  color: var(--brass);
  text-decoration-color: var(--brass);
}

/* Soft brass glow radiating from behind the footer */
.micro-footer::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40px; /* anchor the glow's centre slightly below the text */
  transform: translateX(-50%);
  width: 480px;
  height: 200px;
  background: radial-gradient(
    ellipse 50% 50% at 50% 100%,
    rgba(201, 167, 102, 0.14) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 520px) {
  .stage { padding: 32px 20px 16px; }
  .ornament { top: 18px; right: 22px; font-size: 12px; letter-spacing: 4px; }
  .waitlist-row {
    flex-direction: column;
    border-radius: 14px;
    padding: 8px;
  }
  .waitlist-input { padding: 12px 12px; }
  .waitlist-btn { width: 100%; padding: 12px; }
  .divider { margin: 24px auto; }
  .tagline { margin-bottom: 32px; }
  .micro-footer { text-align: center; }
}

/* ── Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}