/* ============================================================
   Sigrid's Call — a transmission from the other side of the deck.
   Cryptic-void aesthetic. Heavy negative space. No nav, no chrome.
   Two surfaces: the portal (/) and the veil (/veil).
   ============================================================ */

:root {
  --bg:          #0a0518;
  --bg-deeper:   #050210;
  --bg-deepest:  #02010a;

  --ink:         #e8dfc7;
  --ink-soft:    #9c8da8;
  --ink-mute:    #564a6b;
  --ink-faint:   #3a3050;

  --gold:        #b08854;
  --gold-bright: #d4af6d;
  --gold-deep:   #6f5230;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-deeper); }

body {
  font-family: var(--display);
  font-size: clamp(16px, 0.9vw + 13px, 18px);
  line-height: 1.75;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(176, 136, 84, 0.07), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(108, 78, 168, 0.06), transparent 55%),
    linear-gradient(180deg, var(--bg-deeper) 0%, var(--bg) 50%, var(--bg-deeper) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Drifting starfield — slow, faint, almost subliminal */
body::before {
  content: "";
  position: fixed;
  inset: -10% -10% -10% -10%;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(232, 223, 199, 0.55), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, rgba(232, 223, 199, 0.30), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 30%, rgba(212, 175, 109, 0.45), transparent 60%),
    radial-gradient(1px 1px at 62% 78%, rgba(232, 223, 199, 0.25), transparent 60%),
    radial-gradient(1.5px 1.5px at 81% 22%, rgba(232, 223, 199, 0.5), transparent 60%),
    radial-gradient(1px 1px at 92% 58%, rgba(212, 175, 109, 0.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 88%, rgba(232, 223, 199, 0.3), transparent 60%);
  background-size: 720px 820px;
  background-repeat: repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
  animation: drift 320s linear infinite;
  will-change: transform;
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -820px, 0); }
}

/* Visually-hidden — kept for accessibility-pattern reuse if we ever
   need a screen-reader carrier again. Not currently used. */
.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;
}

/* ===================== PORTAL (/) ===================== */

main {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(5rem, 14vh, 10rem) var(--gutter) clamp(5rem, 12vh, 9rem);
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 14vh, 10rem);
  text-align: center;
}

/* — opening sigil + oblique murmur — */
.sigil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 0;
}

.glyph {
  font-size: 1.75rem;
  color: var(--gold);
  margin: 0;
  line-height: 1;
  animation: flicker 9s ease-in-out infinite;
}

@keyframes flicker {
  0%, 38%, 52%, 100% { opacity: 1; }
  44%                { opacity: 0.92; }
  46%                { opacity: 0.42; }
  48%                { opacity: 0.88; }
  70%                { opacity: 0.7; }
  72%                { opacity: 1; }
}

.murmur {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
}

/* — Stage 1: the transmission (visible cipher) — */
.transmission {
  position: relative;
  margin: 0;
  padding: 3rem 1.5rem 2.75rem;
  border-top: 1px solid rgba(176, 136, 84, 0.22);
  border-bottom: 1px solid rgba(176, 136, 84, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(176, 136, 84, 0.04), transparent 70%);
}

.transmission::before,
.transmission::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  background: var(--bg);
  padding: 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

.transmission::before { content: "·  ·  ·"; top: -0.7rem; }
.transmission::after  { content: "·  ·  ·"; bottom: -0.7rem; }

.transmission .hint {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

.cipher {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(1.2rem, 3.2vw, 1.7rem);
  letter-spacing: 0.22em;
  word-spacing: 0.5em;
  color: var(--ink);
  text-align: center;
  background: none;
  padding: 0;
  white-space: normal;
  word-break: break-word;
  user-select: all;
}

/* — atmospheric Sigrid verse (mood only) — */
.invocation {
  font-style: italic;
  color: var(--ink);
  line-height: 1.95;
  font-size: clamp(1.02rem, 1.4vw + 0.5rem, 1.2rem);
  opacity: 0.88;
  margin: 0;
}

.invocation p { margin: 0; }

.invocation .sign {
  display: block;
  margin-top: 1.75rem;
  color: var(--gold);
  letter-spacing: 0.45em;
  font-style: normal;
  font-size: 0.8rem;
  text-indent: 0.45em;
}

/* — Stage 4: the sealed block (locked-looking, meaningless without the key) — */
.sealed {
  position: relative;
  margin: 0;
  padding: 3.25rem 1.5rem 2.75rem;
  border: 1px solid rgba(176, 136, 84, 0.28);
  background:
    linear-gradient(180deg, rgba(176, 136, 84, 0.04) 0%, rgba(5, 2, 16, 0.55) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  border-radius: 2px;
}

.sealed::before {
  content: "✦";
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  background: var(--bg);
  padding: 0 0.7rem;
  font-size: 1rem;
}

.sealed::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(176, 136, 84, 0.08);
  border-radius: 2px;
  pointer-events: none;
}

.sealed .caption {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  max-width: 28rem;
  opacity: 0.85;
}

.cipher--sealed {
  color: var(--ink-mute);
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  letter-spacing: 0.2em;
  word-spacing: 0.35em;
  position: relative;
  word-break: break-word;
}

/* Stage-3 half-spoken question on /veil: most of the sentence is
   readable plaintext, with one word presented as an encrypted token.
   The encrypted token sits in monospace + gold so it visually reads
   as "this is the thing to decrypt." */
.half-question {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--ink);
  line-height: 1.6;
  max-width: 30rem;
}

/* The blank slot in the half-question — gold underscores so it reads
   as "drop the word in here". The underscore width is chosen so that
   it visually echoes the length of the missing word (10 chars) without
   being noisy. */
.blank {
  display: inline-block;
  font-family: var(--mono);
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  margin: 0 0.15em;
  user-select: none;
  opacity: 0.85;
}

/* On /veil the sealed block follows the poem, so it wants a little
   extra top margin to read as its own moment. */
body.veil-page .sealed {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  width: 100%;
  max-width: 32rem;
}

/* ===================== /veil — what she saw, written down ===================== */

body.veil-page {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(195, 154, 217, 0.08), transparent 55%),
    radial-gradient(ellipse at 50% 95%, rgba(176, 136, 84, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-deepest) 0%, var(--bg-deeper) 50%, var(--bg-deepest) 100%);
}

body.veil-page main {
  min-height: 100vh;
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
  justify-content: center;
  align-items: center;
  gap: clamp(2.5rem, 6vh, 4rem);
  max-width: 38rem;
}

body.veil-page .veil-hint {
  margin: 0;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  opacity: 0.78;
  text-align: center;
}

.poem {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 2.05;
  color: var(--ink);
  text-align: left;
  opacity: 0.93;
  max-width: 34rem;
}

.poem .line { display: block; }

.poem .lift {
  /* A slight, almost-imperceptible gold tint on the lifted letters.
     Subtle enough that a casual reader doesn't notice it, but visible
     once they start looking. Removing the colour drops it to pure
     "just a capital letter in lowercase prose." */
  color: var(--gold-bright);
}

body.veil-page .sign {
  display: block;
  margin: 0;
  color: var(--gold);
  letter-spacing: 0.45em;
  font-style: normal;
  font-size: 0.8rem;
  text-indent: 0.45em;
  text-align: center;
}

body.veil-page .footnote {
  margin: 0;
  color: var(--ink-mute);
  font-size: 0.75rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  opacity: 0.55;
  text-align: center;
}

/* ===================== motion respect ===================== */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .glyph {
    animation: none !important;
  }
}