/* The home page's look, shared with the app (Refrain/App/Theme.swift): the page opens at night under the hold mark's
   arc, paper rises like morning under it, and it closes at evening. Night sections keep the psalter's rules by
   swapping its inks: cream for black, the hold's gold for the red rubric. */
:root {
  --hold: #A87A22;
  --hold-dot: #A87A22;
  --night-top: #27325C;
  --night: #141A33;
  --gutter: max(1rem, calc((100% - 66rem) / 2));
  --horizon-h: clamp(2.75rem, 8vw, 7rem);
  --vault-w: clamp(40rem, 100vw, 100rem);
  /* The hold, as in the app (Motion.breath, Motion.arrival): slower than the kit on purpose. */
  --hold-listen: 1600ms;
  --hold-arrival: 900ms;
  --hold-step: 450ms;
}
@media (prefers-color-scheme: dark) { :root { --hold: #D6A84E; --hold-dot: #D6A84E; } }

.night {
  --ink: #F3EBDD;
  --soft: #BDB9C9;
  --line: rgba(243, 235, 221, 0.2);
  --rubric: #D6A84E;
  --card: rgba(243, 235, 221, 0.05);
  --on-ink: #141A33;
  --hold: #D6A84E;
  --hold-dot: #F3EBDD;
  color: var(--ink);
}
.hold-arc { fill: var(--hold); }
.hold-dot { fill: var(--hold-dot); }

.home main { width: auto; }
.home main > section, .home main > .rule { width: min(100% - 2rem, 66rem); margin-inline: auto; }

/* Top bar, laid over the night. */
.home .top { position: absolute; inset: 0 0 auto; z-index: 2; width: auto; margin: 0; padding-inline: var(--gutter); border: 0; }
.home .brand { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; }
.brand-mark { grid-row: span 2; width: 2.5rem; height: auto; }

/* The hero: night, the arc overhead, morning at its foot. */
.home main > .hero {
  position: relative; isolation: isolate; overflow: hidden; display: block; width: auto; min-height: 100svh; text-align: center;
  padding: calc(3.5rem + var(--vault-w) * 0.137 + 2.75rem) var(--gutter) calc(var(--horizon-h) + 3.5rem);
  /* The first layer is a sliver of paper along the foot, so no night shows through where the arc meets the next section. */
  background:
    linear-gradient(var(--ground), var(--ground)) bottom / 100% 1px no-repeat,
    radial-gradient(70% 20rem at 50% 100%, rgba(232, 194, 122, 0.3), transparent),
    linear-gradient(var(--night-top), var(--night) 72%);
}
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero::before { background: url("/stars.svg") center top / 1600px auto repeat-x; }
/* The light overhead. It lifts once as a verse arrives. */
.hero::after {
  background: radial-gradient(60rem 30rem at 50% -4rem, rgba(233, 192, 106, 0.34), transparent 70%);
  opacity: 0.45; transition: opacity var(--hold-arrival) var(--motion-easing-enter);
}
.hero.is-answering::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero::after { transition: none; } }
.vault { position: absolute; z-index: -1; top: 3.5rem; left: 50%; width: var(--vault-w); height: auto; transform: translateX(-50%); pointer-events: none; }

.hero-copy { max-width: 46rem; margin-inline: auto; }
.home .hero h1 { font-size: clamp(2.75rem, 8.4vw, 5rem); text-wrap: balance; }
.home .hero .lede { margin-inline: auto; text-wrap: pretty; }
.home .hero .lede::first-letter { color: inherit; float: none; font-size: inherit; line-height: inherit; margin: 0; font-weight: inherit; initial-letter: normal; }

.home .demo { background: none; border: 0; padding: 0; max-width: 44rem; margin: 2.25rem auto 0; }
.demo-mark { display: none; }
.home .prayers { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.home .prayer-chip { border-radius: 999px; padding-inline: 1.1rem; background: var(--card); }

/* Each exchange sits on a lit plate, gold along the top edge, as Scripture does in the app. */
.home .exchange, .home .exchange + .exchange {
  margin-top: 1.5rem; padding: 1.4rem 1.5rem 1.5rem; text-align: left; border: 1px solid; border-radius: 22px;
  border-color: rgba(214, 168, 78, 0.6) var(--line) rgba(243, 235, 221, 0.1);
  background: linear-gradient(rgba(214, 168, 78, 0.12), rgba(214, 168, 78, 0) 55%), var(--card);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}
.home .said { position: relative; padding-left: 0.9rem; }
.home .said::before { content: ""; position: absolute; left: 0; top: 0.2rem; bottom: 0.2rem; width: 2.5px; border-radius: 2px; background: var(--hold); }
.home .reply { padding-left: 0; margin-top: 1.25rem; }
.home .reply::before { content: none; }
.reply-head { display: flex; align-items: center; height: 1.75rem; }
.hold { flex: none; width: 2.75rem; height: auto; transform-origin: left center; transform: scale(0.42); }
.home .reply-head .reply-label { margin: 0 0 0 calc(2.75rem * -0.58 + 0.5rem); }
.home .verse { font-size: 1.625rem; }

/* The hold: the mark breathes under your words while you wait, then settles beside "From His Word" as the verse comes in. */
@media (prefers-reduced-motion: no-preference) {
  .exchange.is-arriving .hold {
    animation: breathe var(--hold-listen) ease-in-out, settle var(--hold-arrival) var(--motion-easing-enter) var(--hold-listen) forwards;
  }
  .home .exchange.is-arriving .phrase, .home .exchange.is-arriving .cite, .home .exchange.is-arriving .reply-label { animation-duration: var(--hold-arrival); }
}
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes settle { from { transform: scale(1); opacity: 0.55; } to { transform: scale(0.42); opacity: 1; } }

/* Morning: the paper below rises as a low arc. */
.horizon, .dusk { position: absolute; left: 0; width: 100%; height: var(--horizon-h); }
.horizon { bottom: -1px; }
.horizon-fill { fill: var(--ground); }
.horizon-line { fill: none; stroke: #D6A84E; stroke-opacity: 0.7; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Waitlist: the form on a plate, the one gold button. */
.home .join { max-width: 38rem; padding: 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); }
.home .field-row input { background: var(--ground); border-radius: 999px; padding-inline: 1.2rem; }
.home .join-btn, .home .last-cta { color: #1A1408; background: linear-gradient(#E9C06A, #CC9C40); border-radius: 999px; padding-inline: 1.6rem; box-shadow: 0 5px 14px rgba(168, 122, 34, 0.3); }
.home .join-btn:hover, .home .last-cta:hover { color: #1A1408; background: linear-gradient(#F1CD7E, #D6A84E); }
.home .join-section { padding-top: 3rem; }

/* Evening: the night rises again for the last call and the foot. */
.home main > .last { position: relative; width: auto; margin-top: calc(var(--horizon-h) + 1rem); padding: 2.5rem var(--gutter) 4.5rem; background: linear-gradient(var(--night), #1B2345); }
.dusk { bottom: calc(100% - 1px); }
.dusk path { fill: var(--night); }
.last-mark { display: block; width: 4.5rem; height: auto; margin: 0 auto 1.5rem; }
.home .foot { width: auto; margin: 0; padding-inline: var(--gutter); background: #1B2345; border-top: 1px solid var(--line); }