/* =============================================================================
   orahoa — landing page styles
   Built entirely on brand/tokens/tokens.css (loaded before this file).
   Depth language: page ground = --surface-mid · cards = --surface-near ·
   footer = --surface-far. Nearer = lighter, in both modes.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-mid);
  color: var(--ink-body);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { color: var(--ink-strong); margin: 0; }

a { color: var(--link); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

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

/* ===== shared shell ======================================================= */

.site-header, main > section, .footer-inner {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-24);
}

/* ===== header ============================================================= */

.site-header {
  display: flex;
  align-items: center;
  padding-top: var(--space-24);
  padding-bottom: var(--space-8);
}

.wordmark {
  display: inline-flex;
  color: var(--ink-strong);
  border-radius: var(--radius-sm);
}

.wordmark .core, .footer-mark .core { fill: var(--brand-core); }

/* ===== hero =============================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-40);
  padding-top: var(--space-64);
  padding-bottom: var(--space-96);
}

.eyebrow {
  margin: 0 0 var(--space-16);
  font-size: var(--text-aside);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  color: var(--accent-deep);
}

.hero h1 {
  font-family: var(--font-voice);
  font-weight: var(--weight-regular);
  font-size: clamp(2.75rem, 6.5vw, 4.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-title);
  max-width: 14ch;
}

.hero .lede {
  margin: var(--space-24) 0 var(--space-40);
  max-width: 46ch;
}

/* ===== buttons ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-primary);
  padding: 0 var(--space-40);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--action-primary);
  color: var(--ink-on-accent);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-standard);
}
.button:hover  { background: var(--action-primary-hover); }
.button:active { background: var(--action-primary-active); }
.button[disabled] { opacity: .6; cursor: default; }

/* ===== hero rings — the signature ========================================
   The wordmark's "o", opened up: kin depth drawn as nested rings.
   Depth reads by luminance + stroke thickness (near = strongest), so it
   survives both themes and greyscale. Draws outward from "you" on load. */

.hero-rings svg {
  display: block;
  width: min(100%, 480px);
  margin-inline: auto;
  overflow: visible;
}

.ring {
  fill: none;
  transform: rotate(-90deg);
  transform-origin: 280px 280px;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.ring-far  { stroke: var(--ink-quiet);  stroke-width: 3;  }
.ring-mid  { stroke: var(--ink-body);   stroke-width: 7;  }
.ring-near { stroke: var(--ink-strong); stroke-width: 13; }

.core-dot { fill: var(--brand-core); transform-origin: 280px 280px; }

.label {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: var(--weight-semibold);
  text-anchor: middle;
  dominant-baseline: middle;
  /* paper halo lifts each label off the line it sits on */
  paint-order: stroke;
  stroke: var(--surface-mid);
  stroke-width: 12px;
  stroke-linejoin: round;
}
.label-far  { fill: var(--ink-quiet); }
.label-mid  { fill: var(--ink-body); }
.label-near { fill: var(--ink-strong); }
.label-you  { fill: var(--ink-on-accent); stroke: none; }

/* label sets cross-fade as the diagram cycles through communities' own words */
.tier-labels, .caption-text {
  transition: opacity var(--dur-depth) var(--ease-standard);
}
.hero-rings.is-swapping .tier-labels,
.hero-rings.is-swapping .caption-text { opacity: 0; }

.rings-caption {
  margin: var(--space-16) 0 0;
  text-align: center;
  font-size: var(--text-aside);
  color: var(--ink-quiet);
}

@media (prefers-reduced-motion: no-preference) {
  .ring {
    stroke-dashoffset: 1;
    animation: draw 800ms var(--ease-standard) forwards;
  }
  .ring-near { animation-delay: 180ms; }
  .ring-mid  { animation-delay: 380ms; }
  .ring-far  { animation-delay: 580ms; }

  .core-dot {
    opacity: 0;
    transform: scale(.55);
    animation: settle 480ms var(--ease-enter) forwards;
  }

  .ring-labels .label, .rings-caption {
    opacity: 0;
    animation: appear 420ms var(--ease-enter) forwards;
    animation-delay: 1250ms;
  }
  .label-you { animation-delay: 520ms; }
}

@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes settle { to { opacity: 1; transform: scale(1); } }
@keyframes appear { to { opacity: 1; } }

/* ===== sections =========================================================== */

main > section { padding-bottom: var(--space-96); }

h2 {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-24);
}

.section-lede {
  margin: 0 0 var(--space-40);
  max-width: var(--measure-body);
}

/* why we exist */

.why-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-40);
  max-width: 60rem;
}
.why-body p { margin: 0; max-width: var(--measure-body); }

.voice {
  margin: var(--space-64) 0 0;
  font-family: var(--font-voice);
  font-size: var(--text-voice);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--ink-strong);
  display: flex;
  align-items: center;
  gap: var(--space-24);
  max-width: var(--measure-voice);
}

.voice-dot {
  flex: none;
  width: 14px; height: 14px;
  border-radius: var(--radius-pill);
  background: var(--brand-core);
}

/* what we're building */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}

.card {
  background: var(--surface-near);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-rest);
  padding: var(--space-40) var(--space-24);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--accent-deep);
  margin-bottom: var(--space-24);
}

.card h3 {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-16);
}

.card p { margin: 0; font-size: var(--text-body); }

/* ===== email capture ====================================================== */

.updates-panel {
  background: var(--surface-near);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-near);
  padding: var(--space-64) var(--space-40);
  text-align: center;
}

.updates-panel h2 { margin-bottom: var(--space-16); }

.updates-panel > p {
  margin: 0 auto var(--space-40);
  max-width: 44ch;
}

#subscribe-form { max-width: 34rem; margin-inline: auto; }

.field-row {
  display: flex;
  gap: var(--space-16);
}

.field-row input {
  flex: 1;
  min-width: 0;
  min-height: var(--target-primary);
  padding: 0 var(--space-24);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-size: var(--text-label);
}
.field-row input::placeholder { color: var(--ink-quiet); }
.field-row input:focus-visible { outline-offset: 0; border-radius: var(--radius-pill); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note {
  min-height: 1.5em;
  margin: var(--space-16) 0 0;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
}
.form-note.is-success { color: var(--success); }
.form-note.is-error   { color: var(--danger); }

/* ===== footer ============================================================= */

.site-footer {
  background: var(--surface-far);
  border-top: 1px solid var(--border);
  padding-block: var(--space-64);
  text-align: center;
}

.footer-mark { color: var(--ink-strong); margin-bottom: var(--space-24); }

.boilerplate {
  margin: 0 auto var(--space-24);
  max-width: var(--measure-body);
  font-size: var(--text-aside);
  line-height: var(--leading-body);
  color: var(--ink-quiet);
}

.fineprint { margin: 0; font-size: var(--text-aside); color: var(--ink-quiet); }

/* ===== scroll reveal (subtle, honours reduced motion) ===================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 420ms var(--ease-enter), transform 420ms var(--ease-enter);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ===== responsive ========================================================= */

@media (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: var(--space-40);
    padding-bottom: var(--space-64);
    gap: var(--space-64);
  }
  .hero-rings svg { width: min(100%, 400px); }
  .cards { grid-template-columns: 1fr; }
  .why-body { grid-template-columns: 1fr; gap: var(--space-24); }
  main > section { padding-bottom: var(--space-64); }
}

@media (max-width: 599px) {
  .hero h1 { font-size: clamp(2.4rem, 11vw, 2.75rem); }
  .voice { font-size: 1.75rem; }
  .field-row { flex-direction: column; }
  .field-row .button { width: 100%; }
  .updates-panel { padding: var(--space-40) var(--space-24); }
}