/* ============================================================
   Origin — v4 hero styles (combined threshold) + sound toggle
   Loads after landing.css and v3.css; only new classes and
   scoped overrides of v3 oracle classes inside .oracle-stage.
   ============================================================ */

/* ---------- hero shell ---------- */
.hero-v4 {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* ---------- stage A: the invitation ---------- */
.stage-a {
  padding: var(--space-24) 8vw;
  transition: transform 600ms var(--ease), opacity 600ms var(--ease);
}
.stage-a .stage-a-symbol {
  display: block;
  width: 64px; height: auto;
  color: var(--ink);
  margin-bottom: var(--space-8);
  animation: breathe 9s var(--ease) infinite;
}
.stage-a h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.8vw, 58px);
  line-height: 1.16;
  letter-spacing: 0.005em;
  margin: 0 0 var(--space-10);
  max-width: 14ch;
  text-wrap: balance;
}
.stage-a.exit {
  transform: translateX(-56px);
  opacity: 0;
  pointer-events: none;
}
body.oracle-mode .stage-a { display: none; }

.btn-ask {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 13px 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--bg-card) 28%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--accent-deep);
  font-family: var(--sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease),
              border-color var(--dur-normal) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-ask:hover { background: var(--accent); border-color: var(--accent); color: #FAF7F0; }
.btn-ask:active { transform: scale(0.98); }

/* ---------- stage B: the oracle, centred ---------- */
.oracle-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) clamp(16px, 6vw, 64px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease) 150ms;
}
body.oracle-mode .oracle-stage { opacity: 1; pointer-events: auto; cursor: text; }
.oracle-stage form { display: contents; }
.oracle-stage .oracle-input { top: 50%; left: 50%; }

/* the caret flashes at the centre even before a word exists */
.oracle-stage .oracle-display {
  opacity: 1;
  filter: none;
  transform: none;
  min-height: 1.3em;
}
.oracle-stage .oracle-display.s2 { font-size: clamp(32px, 5.4vw, 64px); max-width: 22ch; }
.oracle-stage .oracle-display.s3 { font-size: clamp(28px, 4.4vw, 48px); max-width: 26ch; }
.oracle-stage .oracle-display.s4 { font-size: clamp(24px, 4vw, 42px); max-width: 30ch; }

/* invitation sits directly beneath the caret */
.oracle-stage .oracle-hint {
  position: static;
  transform: none;
  left: auto; bottom: auto;
  margin-top: var(--space-8);
}

/* the sender rests beneath the words */
.oracle-stage .oracle-submit {
  position: static;
  margin-top: var(--space-8);
  transform: translateY(10px);
}
.oracle-stage .oracle-submit.show { transform: none; }

@media (max-width: 700px) {
  .stage-a { padding-left: var(--space-5); padding-right: var(--space-5); text-align: center; width: 100%; }
  .stage-a .stage-a-symbol { margin-left: auto; margin-right: auto; }
  .stage-a h1 { margin-left: auto; margin-right: auto; }
  .oracle-stage .oracle-display { font-size: clamp(30px, 9.5vw, 44px); max-width: 100%; }
  .oracle-stage .oracle-display.s2 { font-size: clamp(26px, 8vw, 38px); }
  .oracle-stage .oracle-display.s3 { font-size: clamp(23px, 7vw, 34px); }
  .oracle-stage .oracle-display.s4 { font-size: clamp(20px, 6vw, 30px); }
}

/* ---------- sound toggle (sits with the realm toggle) ---------- */
.sound-toggle .glyph path { stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .wave { opacity: 0.25; transition: opacity var(--dur-normal) var(--ease); }
.sound-toggle.on .wave { opacity: 1; }
.sound-toggle.on { border-color: var(--accent-soft); color: var(--ink); }
@media (max-width: 640px) {
  .sound-toggle .label { display: none; }
}