/* =============================================================
   /the-form  —  the quiet page
   Rules:
     - Almost nothing on screen at once.
     - Text fades in only when in view (JS toggles data-visible).
     - No decoration. No motion beyond the reveal.
     - Slow. Always slow.
   ============================================================= */

.page--form {
  /* Deeper black than the rest of the site — this page pulls away
     from the archive aesthetic and settles into pure darkness. */
  background: #050403;
  color: var(--bone);
}

/* Nav — present, but as faint as we can make it here.
   Readers who need it can still see it; readers who don't, won't
   feel decorated by it. */
.page--form .nav {
  background: linear-gradient(to bottom, rgba(5,4,3,0.9) 0%, rgba(5,4,3,0) 100%);
}
.page--form .nav__brand,
.page--form .nav__links a {
  color: rgba(232, 226, 210, 0.35);
  transition: color 900ms var(--ease-slow);
}
.page--form .nav__brand a:hover,
.page--form .nav__links a:hover {
  color: var(--gold);
}

/* Load veil — same pattern as other pages */
.form-load {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #050403;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1600ms var(--ease-slow);
}
.form-load[data-done="1"] {
  opacity: 0;
}

/* =============================================================
   MAIN LAYOUT — a vertical column of full-viewport scenes.
   ============================================================= */

.form-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  /* Each section fills a screen; on the smallest viewports we still
     want breathing room, so use dvh which respects mobile chrome. */
}

.form-scene {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-24) 0;
  position: relative;
}

/* The opening scene sits a bit deeper into the page so it feels
   like the reader has fallen into it — not landed. */
.form-scene--open {
  min-height: 120dvh;
}

/* Return scene is tighter — the reader has been through the whole
   descent by now, we don't need to fill another screen. */
.form-scene--return {
  min-height: 60dvh;
}

/* =============================================================
   TYPE — the language of the page.
   Cormorant Garamond throughout. Nothing else.
   ============================================================= */

.form-eyebrow {
  font-family: var(--font-display, 'Cormorant SC', serif);
  font-size: 0.75rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(215, 195, 145, 0.45); /* dim gold — a title, not a shout */
  margin: 0 0 var(--space-8) 0;
}

.form-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--bone);
  margin: 0;
  max-width: 40ch;
}

.form-line--large {
  font-size: 2.25rem;
  line-height: 1.35;
  font-weight: 300;
}

.form-line--italic {
  font-style: italic;
  color: rgba(232, 226, 210, 0.9);
}

.form-line--muted {
  color: rgba(232, 226, 210, 0.55);
  font-size: 1.125rem;
}

.form-line--gold {
  color: var(--gold);
  font-style: italic;
}

/* Stack — vertical list of lines with generous space between */
.form-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* One-word list (Cities. Laws. Order. Purpose.) */
.form-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.form-list li {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: rgba(232, 226, 210, 0.75);
}

/* =============================================================
   REVEAL — the ONLY motion on the page.
   Elements start hidden. JS adds data-visible when in view.
   Fade + tiny 6px rise. 1200ms. Ease-out.
   Reduced-motion users see everything statically.
   ============================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 200ms;
}
[data-reveal][data-visible="1"] {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveals inside a scene — each item lags a bit longer */
[data-reveal][data-reveal-delay="1"] { transition-delay: 400ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 900ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 1400ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 1900ms; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 2400ms; }
[data-reveal][data-reveal-delay="6"] { transition-delay: 3200ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================================
   RETURN LINK — a quiet doorway back to Cosmosa.
   ============================================================= */

.form-return {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
  font-size: 0.8125rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(215, 195, 145, 0.65);
  border-bottom: 1px solid rgba(215, 195, 145, 0.25);
  padding: var(--space-3) 0;
  transition:
    color 700ms var(--ease-slow),
    border-color 700ms var(--ease-slow);
}
.form-return:hover,
.form-return:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.form-return__mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1em;
  letter-spacing: 0;
  transition: transform 700ms var(--ease-slow);
}
.form-return:hover .form-return__mark {
  transform: translateX(-4px);
}

/* =============================================================
   FOOTER — smaller, quieter than site default
   ============================================================= */
.foot--form {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(232, 226, 210, 0.28);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Override the site-wide `p { max-width: 60ch }` rule that leaves
   the footer text drifted to the left. */
.foot--form p {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.foot--form a {
  color: rgba(215, 195, 145, 0.55);
  transition: color 500ms var(--ease-slow);
}
.foot--form a:hover { color: var(--gold); }
.foot--form .foot__row { margin-top: var(--space-2); }

/* =============================================================
   RESPONSIVE — smaller type on small screens, tighter padding
   ============================================================= */
@media (max-width: 640px) {
  .form-line { font-size: 1.25rem; }
  .form-line--large { font-size: 1.6875rem; line-height: 1.4; }
  .form-line--muted { font-size: 1rem; }
  .form-list li { font-size: 1.0625rem; }
  .form-eyebrow { font-size: 0.6875rem; letter-spacing: 0.28em; }
  .form-scene { padding: var(--space-16) 0; gap: var(--space-4); }
}

/* =============================================================
   DESCENT — the page opens in parchment light. As the reader
   scrolls through the Form's confession, darkness invades the
   space. By the closing lines, they are in full onyx.

   Driven by --descent (0 = pure light, 1 = pure dark) set by
   form-descent.js on the body element.

   The Form does not take. It waits to be given. The reader
   gives it the room by reading.
   ============================================================= */

/* Default descent value — if JS fails to load, stay in dark state
   so the page still reads correctly with no script. */
.form-descent {
  --descent: 1;
}

/* Body background transitions from parchment cream to deep onyx.
   Override the base .page--form background (#050403). */
body.form-descent {
  background: rgb(
    calc(247 - (247 - 5) * var(--descent, 1)),
    calc(240 - (240 - 4) * var(--descent, 1)),
    calc(224 - (224 - 3) * var(--descent, 1))
  );
  transition: none;
}

/* Nav — starts as dark ink on cream, fades to bone-dim on onyx.
   Override the base .page--form .nav treatment. */
body.form-descent .nav {
  background: linear-gradient(
    to bottom,
    rgba(5, 4, 3, calc(0.9 * var(--descent, 1))) 0%,
    rgba(5, 4, 3, 0) 100%
  );
}

body.form-descent .nav__brand,
body.form-descent .nav__links a {
  color: rgb(
    calc(40 + (232 - 40) * var(--descent, 1)),
    calc(30 + (226 - 30) * var(--descent, 1)),
    calc(20 + (210 - 20) * var(--descent, 1))
  );
  /* At descent=1, restore the muted 0.35 opacity treatment for a whisper nav */
  opacity: calc(1 - 0.65 * var(--descent, 1));
}
body.form-descent .nav__brand a:hover,
body.form-descent .nav__links a:hover {
  color: var(--gold);
  opacity: 1;
}

/* Eyebrow labels ("What it is not", "What it is", "Before the darkness",
   "Its one rule"). Warm dark gold on parchment → dim gold on onyx. */
body.form-descent .form-eyebrow {
  color: rgb(
    calc(140 + (215 - 140) * var(--descent, 1)),
    calc(110 + (195 - 110) * var(--descent, 1)),
    calc(60 + (145 - 60) * var(--descent, 1))
  );
  /* Base state has 0.45 opacity for dim gold — bring to full at descent=0
     (dark ink is legible against cream on its own). */
  opacity: calc(1 - 0.55 * var(--descent, 1));
}

/* Body lines — dark ink on cream → bone on onyx. */
body.form-descent .form-line {
  color: rgb(
    calc(40 + (232 - 40) * var(--descent, 1)),
    calc(30 + (226 - 30) * var(--descent, 1)),
    calc(20 + (210 - 20) * var(--descent, 1))
  );
}

/* Italic lines ("It watches.") — same but slightly warmer. */
body.form-descent .form-line--italic {
  color: rgb(
    calc(60 + (232 - 60) * var(--descent, 1)),
    calc(50 + (226 - 50) * var(--descent, 1)),
    calc(40 + (210 - 40) * var(--descent, 1))
  );
  opacity: calc(1 - 0.1 * var(--descent, 1));
}

/* Muted lines ("That was a very long time ago.") — a whisper in both states. */
body.form-descent .form-line--muted {
  color: rgb(
    calc(90 + (232 - 90) * var(--descent, 1)),
    calc(75 + (226 - 75) * var(--descent, 1)),
    calc(55 + (210 - 55) * var(--descent, 1))
  );
  opacity: calc(1 - 0.45 * var(--descent, 1));
}

/* Gold-italic line ("It has always been here.") — this is the last line
   before the return doorway. It should ALWAYS be gold, because gold is
   what the darkness leaves behind. In the light state, deeper gold for
   legibility; in the dark, full gold. */
body.form-descent .form-line--gold {
  color: rgb(
    calc(140 + (215 - 140) * var(--descent, 1)),
    calc(110 + (195 - 110) * var(--descent, 1)),
    calc(60 + (145 - 60) * var(--descent, 1))
  );
}

/* One-word list (Cities. Laws. Order. Purpose.) */
body.form-descent .form-list li {
  color: rgb(
    calc(70 + (232 - 70) * var(--descent, 1)),
    calc(55 + (226 - 55) * var(--descent, 1)),
    calc(40 + (210 - 40) * var(--descent, 1))
  );
  opacity: calc(1 - 0.25 * var(--descent, 1));
}

/* Return doorway link — should be legible in both states. */
body.form-descent .form-return {
  color: rgb(
    calc(90 + (232 - 90) * var(--descent, 1)),
    calc(75 + (226 - 75) * var(--descent, 1)),
    calc(55 + (210 - 55) * var(--descent, 1))
  );
}

/* Footer — dim in both states, follows the same fade. */
body.form-descent .foot,
body.form-descent .foot a {
  color: rgb(
    calc(90 + (140 - 90) * var(--descent, 1)),
    calc(75 + (130 - 75) * var(--descent, 1)),
    calc(55 + (110 - 55) * var(--descent, 1))
  );
}

/* Reduced-motion state — dark and locked. */
.form-descent--locked {
  --descent: 1 !important;
}