/* ============================================================
   The Grimoire Garden — styles
   Palette (§9): #0B0F10 ground, #0F3B3E teal, #3A4F3B moss,
   #3E2F26 bark, #D4A45C gold. Text is warm parchment, never #FFF.
   No cards, no chrome, no modals. Slow, long easing only.
   ============================================================ */
:root {
  --ground: #0B0F10;
  --teal:   #0F3B3E;
  --moss:   #3A4F3B;
  --bark:   #3E2F26;
  --gold:   #D4A45C;
  --ink:    #E6D9BC;           /* warm parchment text */
  --ink-dim:#B9AB8C;
  --serif:  "IM Fell English", Georgia, "Times New Roman", serif;
  --sc:     "IM Fell English SC", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--ground); }
html.locked, body.locked { overflow: hidden; height: 100%; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* ---- the scene ---- */
#vg-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  display: block; z-index: 0;
}

/* ---- scroll depth (8 gentle rooms' worth) ---- */
#vg-spacer { height: 820vh; pointer-events: none; }

/* ---- intro ---- */
#vg-intro-stage {
  position: fixed; inset: 0; z-index: 30;
  cursor: pointer;
  transition: opacity 2.4s ease;
}
#vg-intro-stage.gone { opacity: 0; pointer-events: none; }
#vg-hint {
  position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%);
  font-family: var(--sc); font-size: 15px; letter-spacing: 0.22em;
  color: var(--ink-dim);
  animation: hintbreathe 5s ease-in-out infinite;
  transition: opacity 1.2s ease;
  text-align: center; padding: 0 24px;
}
#vg-hint.gone { animation: none; opacity: 0; }
@keyframes hintbreathe { 0%,100% { opacity: .38; } 50% { opacity: .85; } }

/* ---- journey stages: fixed, centered, faded by scroll ---- */
#vg-journey { opacity: 0; transition: opacity 2s ease; }
#vg-journey.live { opacity: 1; }
.stage {
  position: fixed; z-index: 10;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 86vw);
  text-align: center;
  opacity: 0; pointer-events: none;
}
.stage.gone { opacity: 0 !important; pointer-events: none !important; }

.verse {
  font-style: italic;
  font-size: clamp(21px, 3.1vw, 30px);
  line-height: 1.6;
  color: var(--ink);
  text-shadow: 0 1px 22px rgba(11,15,16,.9), 0 0 46px rgba(11,15,16,.75);
}
.verse.small { font-size: clamp(16px, 2.1vw, 20px); line-height: 1.75; }
.note {
  margin-top: 14px;
  font-style: italic; font-size: 13px; letter-spacing: .04em;
  color: var(--ink-dim);
  opacity: 0; transition: opacity 3s ease;
}
#st-plant:hover .note, #st-plant:focus-within .note { opacity: .85; }

/* ---- the field, bare — no form chrome (§8) ---- */
input[type="text"], input[type="email"] {
  display: block; width: 100%;
  background: transparent; border: 0; outline: 0;
  border-bottom: 1px solid rgba(212,164,92,.34);
  padding: 12px 6px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2.6vw, 24px);
  color: var(--ink); text-align: center;
  caret-color: var(--gold);
  transition: border-color 1.6s ease;
  text-shadow: 0 1px 14px rgba(11,15,16,.9);
}
input:focus { border-bottom-color: rgba(212,164,92,.75); }
input::placeholder { color: rgba(185,171,140,.55); font-style: italic; }
#vg-detail { margin-top: 26px; font-size: clamp(15px, 2vw, 18px); }
input.nudge { border-bottom-color: rgba(212,164,92,.95); }

button {
  margin-top: 38px;
  background: transparent;
  border: 1px solid rgba(212,164,92,.45);
  color: var(--gold);
  font-family: var(--sc); font-size: 15px; letter-spacing: .2em;
  padding: 13px 34px;
  cursor: pointer;
  transition: border-color 1.8s ease, color 1.8s ease, opacity 1.8s ease;
}
button:hover, button:focus-visible { border-color: rgba(212,164,92,.9); color: #E8C990; outline: none; }

/* placing: the form dissolves as the light ignites */
#st-plant.placing form { opacity: 0; transition: opacity 2.2s ease; }

/* ---- wander ---- */
.wander-controls { display: none; }
#st-confirm-unused-a .x { display: none; }
#st-confirm-unused-b .x { opacity: 0; transition: opacity 1.6s ease; }
#st-confirm-unused-c .x { display: flex; gap: 18px; justify-content: center; }
.wander-controls button { margin-top: 20px; padding: 10px 22px; font-size: 13px; }
#vg-wander-msg { opacity: 0; transition: opacity 2.4s ease; margin-top: 22px; }
#vg-wander-msg.show { opacity: .9; }

/* ---- email moments ---- */
#vg-book-form input, #vg-wait-form input { margin-top: 30px; }
.thanks { display: none; margin-top: 30px; font-style: italic; color: var(--ink-dim); font-size: 16px; }
form.done input, form.done button { display: none; }
form.done .thanks { display: block; }

/* ---- footer ---- */
.wordmark {
  font-family: var(--sc); font-size: clamp(22px, 3vw, 30px);
  letter-spacing: .3em; color: var(--ink);
}
.legal { margin-top: 18px; font-size: 13px; color: var(--ink-dim); font-style: italic; }
.legal a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid rgba(185,171,140,.35); }
.legal a:hover { color: var(--ink); }

/* ---- the placed name ---- */
#vg-label {
  position: fixed; z-index: 12;
  transform: translate(-50%, 0);
  text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 2.6s ease;
}
#vg-label.show { opacity: 1; }
#vg-label .n {
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--ink);
  text-shadow: 0 1px 12px rgba(11,15,16,.95);
}
#vg-label .d {
  display: block; margin-top: 4px;
  font-size: 13px; font-style: italic; color: var(--ink-dim);
  max-width: 260px;
  text-shadow: 0 1px 10px rgba(11,15,16,.95);
}

/* ---- the whisper ---- */
#vg-whisper {
  position: fixed; z-index: 11;
  left: 50%; bottom: 9vh; transform: translateX(-50%);
  width: min(520px, 80vw); text-align: center;
  font-style: italic; font-size: 15px; color: var(--ink-dim);
  opacity: 0; transition: opacity 4s ease;
  pointer-events: none;
}
#vg-whisper.show { opacity: .8; }

/* ---- progress dots (himachal-style, the only wayfinding) ---- */
#vg-dots {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 15; display: flex; flex-direction: column; gap: 12px;
}
body.locked #vg-dots { opacity: 0; }
#vg-dots { transition: opacity 2s ease; }
#vg-dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(185,171,140,.30);
  transition: background 1.6s ease, box-shadow 1.6s ease;
}
#vg-dots i.on {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212,164,92,.7);
}

@media (max-width: 760px) {
  #vg-dots { right: 10px; gap: 10px; }
  .stage { width: 88vw; }
}

@media (prefers-reduced-motion: reduce) {
  #vg-hint { animation: none; opacity: .7; }
}

/* ---- vertical journey additions ---- */
#st-hint .verse { font-size: clamp(17px, 2.2vw, 21px); color: var(--ink-dim); }
#st-confirm.wandering .verse { opacity: 0; transition: opacity 1.6s ease; }
#st-confirm.wandering .wander-row { display: none; }
#st-confirm.wandering .wander-controls { display: flex; gap: 18px; justify-content: center; }


/* ---- book + membership, side by side ---- */
.stage.wide { width: min(980px, 92vw); }
.duo { display: flex; gap: 56px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.duo-col { flex: 1 1 320px; max-width: 430px; }
.duo-col .verse.small { font-size: clamp(14px, 1.7vw, 17px); line-height: 1.65; }


/* ---- the first spark of the gold thread, at the bottom edge ---- */
#vg-cue {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 14; pointer-events: none;
  opacity: 0; transition: opacity 2.2s ease;
  display: flex; flex-direction: column; align-items: center;
}
#vg-cue.show { opacity: 1; }
#vg-cue .spark {
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #F2D9A0 0%, #D4A45C 55%, rgba(212,164,92,0) 75%);
  box-shadow: 0 0 14px 4px rgba(212,164,92,.45);
  animation: cuebob 3.2s ease-in-out infinite;
}
#vg-cue .trail {
  width: 1.5px; height: 34px; margin-top: 4px;
  background: linear-gradient(to bottom, rgba(212,164,92,.55), rgba(212,164,92,0));
  animation: cuebob 3.2s ease-in-out infinite;
}
@keyframes cuebob { 0%,100% { transform: translateY(0); opacity:.7; } 50% { transform: translateY(9px); opacity:1; } }
@media (prefers-reduced-motion: reduce) { #vg-cue .spark, #vg-cue .trail { animation: none; } }

/* ---- the always-open door (glowing book → /the-book) ---- */
#vg-door {
  position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px;
  z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: #c9a86a; text-decoration: none;
  font-family: var(--sc); font-size: 11px; letter-spacing: 0.2em;
  padding: 9px 10px 7px; border-radius: 8px;
  text-shadow: 0 0 12px rgba(201,168,106,.55);
  animation: doorpulse 4.5s ease-in-out infinite;
  transition: color .4s ease;
}
#vg-door svg { filter: drop-shadow(0 0 7px rgba(201,168,106,.75)); }
#vg-door:hover, #vg-door:focus-visible { color: #e8cf9a; animation-play-state: paused; }
#vg-door:hover svg { filter: drop-shadow(0 0 12px rgba(232,207,154,.95)); }
@keyframes doorpulse {
  0%,100% { opacity: .78; }
  50%     { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #vg-door { animation: none; opacity: .95; } }
@media (max-width: 480px) { #vg-door { right: 10px; } }

/* ---- crawlable-but-invisible content ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}