/* ============================================================
   ORIVAYN — coming soon
   Shared design system: black · white · metallic gold · whitespace
   ============================================================ */

/* ---- Design tokens -------------------------------------------------- */
:root {
  /* Dark is the primary experience */
  --bg:        #0a0a0a;
  --bg-glow:   rgba(201, 162, 39, 0.06);
  --fg:        #f2f0eb;
  --muted:     rgba(242, 240, 235, 0.52);
  --faint:     rgba(242, 240, 235, 0.34);
  --line:      rgba(255, 255, 255, 0.12);
  --field:     rgba(255, 255, 255, 0.04);
  --field-brd: rgba(255, 255, 255, 0.16);

  --gold:      #c9a227;
  --gold-soft: #b8862b;
  --gold-lite: #e8c874;

  --maxw:      680px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light lockup (same system, inverted — mirrors the white brand board) */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f7f5f0;
    --bg-glow:   rgba(160, 125, 28, 0.05);
    --fg:        #14130f;
    --muted:     rgba(20, 19, 15, 0.55);
    --faint:     rgba(20, 19, 15, 0.40);
    --line:      rgba(20, 19, 15, 0.14);
    --field:     rgba(20, 19, 15, 0.03);
    --field-brd: rgba(20, 19, 15, 0.18);
    --gold:      #9a781b;
    --gold-soft: #8a6a18;
    --gold-lite: #b9932f;
  }
}

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* soft radial depth behind the mark */
  background-image: radial-gradient(120% 80% at 50% 34%, var(--bg-glow), transparent 60%);
  overflow-x: hidden;
}

/* ---- Hero layout ---------------------------------------------------- */
.hero {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem) 1.5rem;
}

.stage {
  width: 100%;
  max-width: var(--maxw);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Mark ----------------------------------------------------------- */
.astrolabe {
  width: clamp(120px, 30vw, 190px);
  margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
  will-change: transform;
  transition: transform 0.6s var(--ease);
}
.mark { display: block; width: 100%; height: auto; overflow: visible; }

.rings { transform-origin: 120px 120px; animation: spin 140s linear infinite; }

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

/* ---- Wordmark ------------------------------------------------------- */
/* Mobile-first: modest tracking so nothing overruns narrow screens.
   Tracking widens at the breakpoints below. */
.wordmark {
  font-weight: 200;
  font-size: clamp(2rem, 9vw, 5rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em; /* optical centring against trailing letter-spacing */
  line-height: 1;
  max-width: 100%;
  color: var(--fg);
}

.ethos {
  margin-top: clamp(0.9rem, 2.5vw, 1.3rem);
  font-size: clamp(0.55rem, 2.1vw, 0.75rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 300;
  max-width: 100%;
}

@media (min-width: 600px) {
  .wordmark { letter-spacing: 0.28em; text-indent: 0.28em; }
  .ethos    { letter-spacing: 0.34em; text-indent: 0.34em; }
}
@media (min-width: 900px) {
  .wordmark { letter-spacing: 0.34em; text-indent: 0.34em; }
  .ethos    { letter-spacing: 0.42em; text-indent: 0.42em; }
}

/* ---- Divider -------------------------------------------------------- */
.rule {
  width: clamp(40px, 12vw, 64px);
  height: 1px;
  margin: clamp(2rem, 6vw, 3rem) 0 clamp(1.75rem, 5vw, 2.5rem);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}

/* ---- Headline ------------------------------------------------------- */
.headline {
  max-width: 20ch;
  font-weight: 300;
  font-size: clamp(1.15rem, 4.4vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--fg);
  text-wrap: balance;
}

/* ---- Status --------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(2rem, 6vw, 3rem);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.5);
  animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(201, 162, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}

/* ---- Signup --------------------------------------------------------- */
.signup { margin-top: clamp(1.6rem, 4vw, 2.2rem); width: 100%; max-width: 380px; }

.field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--field-brd);
  background: var(--field);
  border-radius: 100px;
  padding: 0.35rem 0.35rem 0.35rem 1.25rem;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.field:focus-within { border-color: var(--gold); background: transparent; }

.field input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.55rem 0;
}
.field input::placeholder { color: var(--faint); }

.field button {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #0a0a0a;
  background: linear-gradient(135deg, var(--gold-lite), var(--gold-soft));
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.field button:hover { transform: translateX(2px); filter: brightness(1.08); }
.field button:active { transform: translateX(0) scale(0.96); }

.form-msg {
  min-height: 1.2em;
  margin-top: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.form-msg.show { opacity: 1; }
.form-msg.error { color: #d98a6a; }

/* ---- Footer --------------------------------------------------------- */
.site-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6em;
  padding: 1.75rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom));
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.site-footer .sep { opacity: 0.5; }

/* ---- Focus visibility ---------------------------------------------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---- Screen-reader only -------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Entrance reveal ------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(14px); }
body.loaded .reveal {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ---- Motion & data preferences ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rings { animation: none; }
  .status .dot { animation: none; }
  .astrolabe { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}