/* Luna Post landing page — fonts, paper background, and the three acts
   (moon intro, postcard, birthday) plus the sign-up plans. Plain CSS, no build. */

/* ---- Fonts ---------------------------------------------------------------
   Paths are relative to this file (static/css/ -> ../fonts/). */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Regular.90a58d69f647.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic.f428fcb135d4.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "CL Antique No 36";
  src: url("../fonts/F00036.1de9e7a0fa6d.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/PinyonScript-Regular.0ebcc0c0afb8.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #2c2620;          /* warm near-black for body copy */
  --ink-soft: #6b6357;     /* muted captions */
  --stamp-red: #9d2b2b;    /* the Luna Post stamp red */
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --display: "CL Antique No 36", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Page shell ---------------------------------------------------------- */
body.landing {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  /* White at the centre, EBD091 @ 34% at the edges — the spec'd radial paper. */
  background: radial-gradient(circle at 50% 32%, #ffffff 0%, rgba(235, 208, 145, 0.34) 100%) fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.landing main { display: block; }

/* In-page anchors (the postcard's "Get my signs" -> #birthday) glide instead
   of jumping. Overridden under prefers-reduced-motion below. */
html { scroll-behavior: smooth; }

/* Page transition: the nav and paper stay put while the content area cross-fades
   between landing-styled pages (home <-> sign up), so the Sign Up button eases
   into the next page instead of hard-cutting. The enter fade is pure CSS (so it
   works with JS off and never flashes); the leave fade is added by a small
   script in base.html that holds navigation for one beat. */
/* Opacity-only so `main` never carries a lingering transform — a transform on
   an ancestor would break the moonrise's position:sticky. */
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.landing main { animation: page-in 0.5s var(--ease) both; }
body.landing.page-leave main {
  animation: none;
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

/* Top nav from base.html — float it, keep it quiet over the paper. */
body.landing > header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 1rem 1.6rem;
  font-family: var(--display);
  font-size: 0.78rem;
}
body.landing > header a { color: var(--ink); text-decoration: none; opacity: 0.78; }
body.landing > header a:hover { opacity: 1; }
body.landing > header a:first-child { margin-right: auto; font-size: 0.9rem; letter-spacing: 0.18em; opacity: 1; }

/* The stamp logo, pinned dead-center of the nav regardless of the side links. */
body.landing > header .nav-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  line-height: 0;
  opacity: 1;
}
body.landing > header .nav-logo img { height: 46px; width: auto; display: block; }

/* Small section eyebrow, echoing the comp's label captions. */
.eyebrow {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}

/* ---- Shared button ------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: #4a3b30;
  color: #f6efe0;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }

/* ======================================================================== */
/* ACT 1 — Moon intro (copy left, brightening moon right)                    */
/* ======================================================================== */
.intro-act {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 12vh clamp(1.5rem, 6vw, 6rem) 8vh;
  box-sizing: border-box;
}
.intro-copy { max-width: 30rem; }
.hero-line {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.14;
  margin: 0;
}
.hero-sub {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 1.6rem 0 0;
  max-width: 26rem;
}
.intro-copy .btn { margin-top: 1.9rem; }

/* The interactive postcard sits where the moon used to. It's visible right away
   (the page-in fade covers its entrance); tap/click flips front art <-> fortune. */
.intro-postcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* ======================================================================== */
/* Postcard (lives in the intro; flips front art <-> your fortune)           */
/* ======================================================================== */
/* The flip (rotateY) lives on the INNER .postcard; the scene just sets the 3D
   perspective. Keeping them on separate elements means no rule competes for
   .postcard's transform. */
.postcard-scene {
  perspective: 1800px;
  width: min(560px, 100%);
}
.postcard {
  position: relative;
  width: 100%;
  aspect-ratio: 1875 / 1275;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease);
  transform: rotateY(0deg);
  cursor: pointer;
  /* NO filter/opacity here: either one forces the browser to flatten this
     element's 3D context, which breaks preserve-3d and renders the back face
     mirror-reversed. The card's shadow lives on .pc-face instead. */
}
.postcard.flipped { transform: rotateY(180deg); }

.pc-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px;
  overflow: hidden;
  background: #f3ead6;
  /* Shadow lives here (not on .postcard) so it doesn't flatten the 3D flip. */
  box-shadow: 0 18px 30px rgba(60, 45, 20, 0.22);
}
.pc-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-front { transform: rotateY(0deg); }
.pc-back  { transform: rotateY(180deg); }

/* Text overlaid on the left half of the printed back. Sizes use cqw (1% of the
   card's width) so they scale with the card; a `container-type` is required for
   cqw to resolve. NOTE: plain `font-size: %` would be % of the parent font-size,
   not the card — that renders the text microscopic. */
.pc-back-text {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  text-align: left;   /* don't inherit the page's centered text */
}
.pc-back-text .moon-name {
  font-family: var(--script);
  font-size: 11.5cqw;
  line-height: 0.95;
  color: #1c1a17;
  position: absolute;
  left: 5.5%;
  top: 38%;
  white-space: nowrap;
}
.pc-back-text .moon-date {
  font-family: var(--script);
  font-size: 8cqw;
  color: #1c1a17;
  position: absolute;
  left: 6%;
  top: 53%;
  white-space: nowrap;
}
.pc-back-text .moon-meaning {
  font-family: var(--serif);
  font-size: 3.2cqw;
  line-height: 1.4;
  color: #2a2722;
  position: absolute;
  left: 6%;
  top: 73%;
  max-width: 50%;
}
.flip-hint {
  font-family: var(--display);
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0.7;
}

/* ======================================================================== */
/* Moonrise — a fixed full moon, present the whole scroll                     */
/* ======================================================================== */
/* The moon is fixed to the bottom of the viewport, sitting behind the page
   content. It starts peeking from the bottom edge behind the hero, then JS
   translates it up to fully risen as you scroll, and fades it out as the
   birthday section arrives. Because it's fixed (not tied to a track), it's
   continuously present — no gap between sections. */
.rising-moon {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(76vh, 92vw);
  z-index: 0;                          /* behind .content (z-index:1), above paper */
  pointer-events: none;
  transform: translate(-50%, 72%);     /* JS-driven; starts peeking from the bottom */
  will-change: transform, opacity;
}
/* Lift the page content above the fixed moon so text/postcard read over it. */
body.landing main { position: relative; z-index: 1; }

/* ======================================================================== */
/* Birthday + clouds                                                         */
/* ======================================================================== */
.birthday-act {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14vh 1.5rem;
  text-align: center;
  overflow: hidden;
}
.bday-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.bday-sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--ink);
  margin: 0.8rem auto 0;
  max-width: 30rem;
}

.bday-picker {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  margin: 1.6rem 0 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.bday-picker input[type="date"] {
  font-family: var(--serif);
  font-size: 1.05rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(44, 38, 32, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}
.bday-error { color: var(--stamp-red); font-style: italic; min-height: 1.4em; margin: 0.4rem 0 0; position: relative; z-index: 2; }

/* Clouds: a layer of drifting doodle clouds that stays in the background the
   whole time. On reveal they only soften (a smooth opacity fade) — they never
   fly away — so the signs read clearly while the sky keeps drifting behind. */
.cloud-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.cloud {
  position: absolute;
  width: var(--w, 220px);
  opacity: 0.85;
  animation: drift var(--dur, 18s) ease-in-out infinite alternate;
  transition: opacity 1s var(--ease);
}
@keyframes drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx, 18px), var(--dy, -10px)); }
}
.birthday-act.revealed .cloud { opacity: 0.5; }

/* The three-sign result. */
.signs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 5vw, 4rem);
  margin: 2.5rem auto 0;
  max-width: 56rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease) 0.35s, transform 1s var(--ease) 0.35s;
}
.birthday-act.revealed .signs { opacity: 1; transform: translateY(0); }
.sign { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sign .col-head {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.sign .art {
  height: clamp(72px, 12vw, 116px);
  display: flex; align-items: center; justify-content: center;
}
.sign .art img { max-height: 100%; max-width: 100%; object-fit: contain; }
.sign .art .numeral { font-family: var(--display); font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; }
/* Reserve space for the name + trait before they're filled in, so the CTA
   below doesn't get pushed down when results appear. */
.sign .name { font-weight: 700; font-size: 1.15rem; min-height: 1.8rem; }
.sign .trait { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; max-width: 14rem; min-height: 3rem; }

.birthday-cta {
  position: relative;
  z-index: 2;
  margin-top: 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.birthday-cta .cta-line {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.birthday-cta a { text-decoration: none; }

/* ======================================================================== */
/* Sign-up page — cycle choice, then log-in + postcard details               */
/* ======================================================================== */
.signup-page {
  min-height: 100vh;
  padding: 14vh clamp(1.5rem, 6vw, 5rem) 8vh;
  box-sizing: border-box;
  max-width: 60rem;
  margin: 0 auto;
}
.signup-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  text-align: center;
  margin: 0 0 0.4rem;
  font-weight: 400;
}
.signup-intro {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 2.6rem;
}
.form-errors { color: var(--stamp-red); text-align: center; margin: 0 0 1.5rem; }

/* Plan cards double as the billing-cycle radio: clicking a card selects it. */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 4vw, 2.5rem);
  align-items: start;
  margin: 0 0 3rem;
}
.plan {
  display: block;
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(44, 38, 32, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.plan:hover { border-color: rgba(44, 38, 32, 0.5); }
.plan:has(input:checked) {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(60, 45, 20, 0.12);
}
.plan:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.plan input { position: absolute; opacity: 0; width: 0; height: 0; }
.plan-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin: 0 0 0.2rem;
}
.plan-price {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  line-height: 1;
  margin: 0 0 1.1rem;
  font-style: italic;
}
.plan-price span { font-size: 0.4em; font-style: normal; }
.plan ul { list-style: none; padding: 0; margin: 0; font-size: 1rem; line-height: 1.5; }
.plan ul li { margin-bottom: 0.2rem; }

/* The two detail groups: log-in details, postcard details. */
.form-section {
  border: none;
  border-top: 1px solid rgba(44, 38, 32, 0.18);
  padding: 1.8rem 0 0;
  margin: 0 0 2rem;
}
.form-section legend {
  font-family: var(--display);
  font-size: 1.7rem;
  padding: 0;
  margin: 0 0 0.6rem;
}
.field { margin: 0 0 1.1rem; max-width: 34rem; }
.field label {
  display: block;
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.field input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(44, 38, 32, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}
.field .helptext { display: block; font-size: 0.85rem; color: var(--ink-soft); font-style: italic; margin-top: 0.2rem; }
.field .errorlist { color: var(--stamp-red); font-size: 0.9rem; list-style: none; padding: 0; margin: 0.2rem 0 0; }

.signup-submit { display: block; margin: 0 auto; font-size: 1.4rem; padding: 0.7rem 2.6rem; }

/* ---- Log-in page — same shell as sign-up, narrowed to a single column ---- */
.login-page { max-width: 26rem; }
.login-banner { display: block; width: 100%; height: auto; margin: 0 0 1.8rem; }
.login-page .form-section { border-top: none; padding-top: 0; }
.login-page .field { max-width: none; }
.login-signup-hint { text-align: center; padding-top: 20px; color: var(--ink-soft); margin: 0; }
.login-signup-hint a { color: var(--ink); }

/* ---- Motion / responsive ------------------------------------------------- */
@media (max-width: 820px) {
  .intro-act {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .intro-copy { max-width: 36rem; margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .intro-postcard { order: -1; }   /* show the card above the copy when stacked */
  .plans { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 640px) {
  .signs { grid-template-columns: 1fr; gap: 2rem; }
  .pc-back-text .moon-meaning { font-size: 4.8cqw; }
  /* No room to center on phones: drop the wordmark (the stamp already reads
     "Luna Post") and float the stamp left, links right. */
  body.landing > header a:first-child { display: none; }
  body.landing > header .nav-logo { position: static; transform: none; margin-right: auto; }
  body.landing > header .nav-logo img { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.landing main { animation: none; }
  body.landing.page-leave main { transition: none; }
  .rising-moon { transform: translate(-50%, 28%); }  /* rest partly risen, no scroll motion */
  .cloud { animation: none; }
}