/* ============================================================
   Origin — v6: the four movements
   Loads after landing.css / v3 / v4 / v5 css.
   ============================================================ */

/* ---------- shared movement layout: text left, field right ---------- */
.movement {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.movement-inner {
  width: 100%;
  padding: var(--space-16) 8vw;
}
.movement-text { max-width: 620px; }

.mv-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.16;
  margin: 0 0 var(--space-5);
  color: var(--ink);
  text-wrap: balance;
}
.mv-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 var(--space-8);
}
.mv-lede em { font-style: italic; color: var(--accent-deep); }

/* ---------- movement one: the three instruments ---------- */
.feats { display: grid; gap: var(--space-5); margin-top: var(--space-6); max-width: 460px; }
.feat {
  border-left: 2px solid var(--rule);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  cursor: default;
  transition: border-color var(--dur-normal) var(--ease), transform var(--dur-slow) var(--ease);
}
.feat:hover, .feat:focus-visible {
  border-color: var(--accent);
  transform: translateX(4px);
  outline: none;
}
.feat h3 {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--space-1);
}
.feat p { margin: 0; color: var(--ink-soft); font-size: var(--text-base); line-height: 1.6; }

/* ---------- movement two: the nine faiths ---------- */
.faith-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-8);
  max-width: 460px;
}
.faith {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--sans);
  width: 88px;
}
.faith-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  transition: border-color var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease),
              box-shadow 500ms var(--ease), transform var(--dur-slow) var(--ease);
}
.faith-ring svg { width: 26px; height: 26px; display: block; }
.faith-ring svg * { stroke-width: 1.3; }
.faith-ring .glyph-text { font-size: 20px; fill: currentColor; stroke: none; font-family: var(--serif); }
.faith-name {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur-normal) var(--ease);
}
.faith:hover .faith-ring, .faith:focus-visible .faith-ring {
  border-color: var(--gold);
  color: var(--accent-deep);
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 42%, transparent),
              inset 0 0 12px color-mix(in srgb, var(--gold) 18%, transparent);
  transform: scale(1.05);
}
.faith:hover .faith-name { color: var(--ink); }
.faith:focus-visible { outline: none; }

.faith.lit .faith-ring {
  border-color: var(--gold);
  color: var(--accent-deep);
  animation: faith-shimmer 2.6s var(--ease) infinite;
}
@keyframes faith-shimmer {
  0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 34%, transparent), inset 0 0 10px color-mix(in srgb, var(--gold) 14%, transparent); }
  50% { box-shadow: 0 0 34px color-mix(in srgb, var(--gold) 62%, transparent), inset 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent); }
}

/* ---------- movement three: the typed question ---------- */
.typed-q {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-top: var(--space-6);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0 2px 10px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--accent-deep);
  text-align: left;
  min-height: 2.2em;
  max-width: 30ch;
  transition: border-color var(--dur-normal) var(--ease);
}
.typed-q:hover { border-color: var(--accent); }
.typed-q .oracle-caret { height: 0.8em; width: 2px; }
#typed-q-text { transition: opacity 600ms var(--ease), filter 600ms var(--ease); }
#typed-q-text.fading { opacity: 0; filter: blur(6px); }
.typed-hint {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- movement four: the forms, one screen ---------- */
.origins-v6 { position: relative; min-height: 100svh; display: flex; align-items: center; cursor: pointer; }
.origins-v6 .origins-inner { padding: var(--space-16) 8vw; }
.origins-v6 .chapter-label { margin-bottom: var(--space-4); }
.origins-v6 h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.beat-hint {
  margin-top: var(--space-8);
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 700px) {
  .movement { align-items: flex-end; }
  .movement-inner { padding: var(--space-12) var(--space-5) 12svh; }
  .faith { width: 76px; }
  .faith-ring { width: 54px; height: 54px; }
  .origins-v6 { align-items: flex-end; }
  .origins-v6 .origins-inner { padding-bottom: 12svh; }
}