/* ---------------------------------------------------------------
   COMMON USE — pre-launch splash
   A full-bleed still-life photograph of the black stone jar carries the
   page; a warm scrim darkens the left (and floor) so the live gold
   wordmark + signup read cleanly over the plaster wall, while the jar
   stays clear on the right. All copy is live text — nothing baked in.
----------------------------------------------------------------- */

:root {
  --scrim: 32, 26, 16;   /* warm espresso — scrim rgb (used with alpha) */
  --gold: #cca86a;       /* light antique gold — wordmark, reads on dark */
  --gold-soft: #bd9a58;  /* release, labels                             */
  --gold-line: #c2a468;  /* dash + field border                         */

  --track-wide: 0.3em;   /* wordmark tracking                           */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #2a2317;
  color: var(--gold);
  font-family: "Poppins", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* --- Hero photograph (full-bleed still life) -------------------- */
.hero {
  position: fixed;
  inset: 0;
  background: url("/images/hero.png") 58% center / cover no-repeat;
  z-index: 1;
}

/* Darken the left where the copy sits — legibility for the gold type —
   fading to clear over the jar on the right. A soft floor vignette adds
   depth without hiding the scene. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(var(--scrim), 0.82) 0%,
      rgba(var(--scrim), 0.62) 22%,
      rgba(var(--scrim), 0.15) 46%,
      rgba(var(--scrim), 0) 62%
    ),
    linear-gradient(
      to bottom,
      rgba(var(--scrim), 0.28) 0%,
      rgba(var(--scrim), 0) 30%,
      rgba(var(--scrim), 0) 72%,
      rgba(var(--scrim), 0.35) 100%
    );
}

/* --- Content column (left) -------------------------------------- */
.stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center start;
  padding: clamp(2rem, 7vw, 7rem);
}

.card {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 440px;
}

/* --- Wordmark --------------------------------------------------- */
.wordmark {
  /* Acumin Variable Concept, bold condensed — falling back to the
     kit's acumin-pro-condensed, then a web-safe condensed sans. */
  font-family: "acumin-variable", "acumin-pro-condensed", "Arial Narrow",
    system-ui, sans-serif;
  font-weight: 500;
  font-stretch: condensed;
  font-variation-settings: "wght" 500, "wdth" 75;
  font-size: clamp(1.9rem, 5.2vw, 3.3rem);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--gold);

  opacity: 0;
  transform: translateY(8px);
  animation: rise 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

/* --- Divider ---------------------------------------------------- */
.rule {
  display: block;
  width: 26px;
  height: 1px;
  margin: 1.4rem 0 1.3rem;
  background: var(--gold-line);
  transform-origin: left center;

  opacity: 0;
  transform: scaleX(0.2);
  animation: spread 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

/* --- Release line ----------------------------------------------- */
.release {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0.01em;
  color: var(--gold-soft);

  opacity: 0;
  transform: translateY(6px);
  animation: rise 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}

/* --- Notify form ------------------------------------------------ */
.notify {
  margin-top: 2.3rem;
  width: min(90%, 420px);

  opacity: 0;
  transform: translateY(6px);
  animation: rise 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.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;
}

/* A thin gold-bordered box: input on the left, a divided SIGN UP on
   the right — the high-contrast field from the key art. */
.field-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--gold-line);
  background: rgba(20, 16, 9, 0.28);
  transition: border-color 0.4s ease, background-color 0.4s ease;
}

.field-row:focus-within {
  border-color: var(--gold);
  background: rgba(20, 16, 9, 0.42);
}

.field-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--gold-soft);
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.95rem 1.15rem;
}

.field-row input::placeholder {
  color: rgba(205, 178, 122, 0.6);
}

.field-row button {
  flex: none;
  background: transparent;
  border: none;
  border-left: 1px solid var(--gold-line);
  color: var(--gold-soft);
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  padding: 0 1.5rem;
  transition: color 0.35s ease, background-color 0.35s ease;
}

.field-row button:hover,
.field-row button:focus-visible {
  color: #2a2317;
  background: var(--gold);
  outline: none;
}

.form-status {
  min-height: 1.1rem;
  margin-top: 0.85rem;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.form-status.show {
  opacity: 1;
}

.form-status.error {
  color: #a85c3f;
}

/* Collapse the field once the visitor has joined the list. */
.notify.done .field-row {
  display: none;
}

/* --- Motion ----------------------------------------------------- */
@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spread {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark,
  .rule,
  .release,
  .notify {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- Narrow screens --------------------------------------------- */
/* Keep the photo full-bleed but recenter on the jar, swap the left
   scrim for a bottom one, and sit the left-aligned copy over the
   darkened floor. */
@media (max-width: 820px) {
  .hero {
    background-position: 62% center;
  }

  .hero::before {
    background: linear-gradient(
      to bottom,
      rgba(var(--scrim), 0.15) 0%,
      rgba(var(--scrim), 0) 26%,
      rgba(var(--scrim), 0.55) 58%,
      rgba(var(--scrim), 0.85) 100%
    );
  }

  .stage {
    align-items: end;
    justify-items: start;
    padding: 2.5rem 1.5rem 3rem;
  }

  .card {
    max-width: 100%;
    width: 100%;
  }

  .wordmark {
    font-size: clamp(1.8rem, 10vw, 2.7rem);
  }

  .notify {
    margin-top: 1.9rem;
    width: 100%;
    max-width: 360px;
  }

  .field-row button {
    padding: 0 1.2rem;
  }
}