/* Slashbloom landing site — moonlit garden noir.
   Deep grove greens and indigo night, soft gold moonlight, pale blue rim light. */

:root {
  --night: #0a0c16;
  --indigo: #141a2e;
  --grove: #14251f;
  --grove-deep: #0d1a15;
  --bone: #e9e6df;
  --muted: #a7b3ab;
  --gold: #e8c06a;
  --rim: #9fc4e8;
  --line: rgba(159, 196, 232, 0.18);
  --measure: 44rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color: var(--bone);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(159, 196, 232, 0.16), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(232, 192, 106, 0.10), transparent 65%),
    linear-gradient(180deg, var(--night) 0%, var(--indigo) 45%, var(--grove-deep) 100%);
  background-attachment: fixed;
  line-height: 1.6;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }

header.site {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 12, 22, 0.92), rgba(20, 37, 31, 0.72));
}

header.site .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem; }
header.site a.wordmark { color: var(--gold); font-size: 1.25rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
nav.site { margin-left: auto; display: flex; gap: 1.1rem; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; }
nav.site a { color: var(--muted); text-decoration: none; display: inline-block; padding: 0.16rem 0; }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--bone); }

main { padding: 3rem 0 4rem; }

h1 { font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.12; margin: 0 0 0.75rem; color: var(--bone); font-weight: 500; }
h1 em { color: var(--gold); font-style: normal; }
h2 { font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim); margin: 2.5rem 0 0.75rem; }
p.lede { font-size: 1.15rem; color: var(--bone); }
p, li { color: var(--muted); }
strong { color: var(--bone); font-weight: 600; }
a { color: var(--gold); }

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 1.75rem 0 0.5rem; }
a.button {
  display: inline-block; padding: 0.7rem 1.35rem; border-radius: 999px;
  border: 1px solid var(--gold); color: var(--gold); text-decoration: none;
  letter-spacing: 0.06em; font-size: 0.95rem;
}
a.button.primary { background: linear-gradient(180deg, #f0cd83, var(--gold)); color: #1b1608; border-color: var(--gold); }
a.button:hover { filter: brightness(1.08); }

ul.features { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
ul.features li::before { content: "❦ "; color: var(--gold); }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.25rem; margin: 0; }
dl.facts dt { color: var(--rim); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; padding-top: 0.15rem; }
dl.facts dd { margin: 0; color: var(--bone); }

.shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
figure.shot { margin: 0; }
figure.shot .frame {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 0.75rem;
  background:
    radial-gradient(60% 40% at 50% 72%, rgba(232, 192, 106, 0.16), transparent 70%),
    radial-gradient(70% 45% at 50% 12%, rgba(159, 196, 232, 0.12), transparent 70%),
    linear-gradient(180deg, var(--night), var(--grove-deep));
}
/* Each frame paints its own slice of the grove until the capture lands. */
figure.shot .frame::before, figure.shot .frame::after { content: ""; position: absolute; }
.frame[data-capture="grove-night"] {
  background:
    radial-gradient(22% 13% at 50% 26%, rgba(233, 230, 223, 0.85), rgba(232, 192, 106, 0.18) 62%, transparent 74%),
    radial-gradient(48% 30% at 50% 74%, rgba(159, 196, 232, 0.16), transparent 72%),
    linear-gradient(180deg, var(--night), var(--grove));
}
.frame[data-capture="grove-night"]::before {
  inset: auto 0 0 0; height: 26%;
  background: repeating-linear-gradient(92deg, var(--grove-deep) 0 6px, transparent 6px 17px);
}
.frame[data-capture="grove-night"]::after {
  left: 12%; bottom: 22%; width: 7%; height: 9%; border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, var(--gold), var(--grove-deep));
}
.frame[data-capture="petal-bloom"] {
  background:
    radial-gradient(56% 30% at 50% 52%, rgba(236, 168, 132, 0.42), transparent 72%),
    radial-gradient(30% 18% at 34% 42%, rgba(233, 230, 223, 0.35), transparent 70%),
    linear-gradient(180deg, var(--indigo), var(--grove-deep));
}
.frame[data-capture="petal-bloom"]::before {
  left: -18%; right: -18%; top: 44%; height: 16%;
  background: repeating-linear-gradient(74deg, rgba(240, 205, 131, 0.5) 0 9px, transparent 9px 22px);
  transform: rotate(-12deg);
}
.frame[data-capture="nightmare-meter"] {
  background:
    radial-gradient(70% 46% at 50% 88%, rgba(150, 60, 96, 0.42), transparent 72%),
    linear-gradient(180deg, var(--night), var(--grove-deep));
}
.frame[data-capture="nightmare-meter"]::before {
  right: 9%; top: 12%; bottom: 12%; width: 9%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(232, 192, 106, 0.2), var(--gold) 78%, #c96a8a);
}
.frame[data-capture="nightmare-meter"]::after {
  inset: 20% 0 0 0;
  background: repeating-linear-gradient(88deg, transparent 0 14px, rgba(13, 26, 21, 0.75) 14px 20px);
}
.frame[data-capture="daily-seed"] {
  background:
    radial-gradient(52% 32% at 50% 50%, rgba(232, 192, 106, 0.2), transparent 72%),
    linear-gradient(180deg, var(--night), var(--grove-deep));
}
.frame[data-capture="daily-seed"]::before {
  inset: 22% 14%; border: 1px solid var(--line); border-radius: 0.6rem;
  background: linear-gradient(160deg, rgba(20, 37, 31, 0.95), rgba(10, 12, 22, 0.95));
}
.frame[data-capture="daily-seed"]::after {
  left: 50%; top: 42%; width: 16%; height: 9%; margin-left: -8%; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--gold), var(--grove-deep) 78%);
}
figure.shot figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 0.5rem; }

footer.site { border-top: 1px solid var(--line); padding: 1.5rem 0 2.25rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: 0.85rem; color: var(--muted); }
footer.site a { display: inline-block; padding: 0.3rem 0; }
footer.site .sprout { color: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  a.button { transition: filter 120ms ease, transform 120ms ease; }
  a.button:hover { transform: translateY(-1px); }
}

@media (min-width: 40rem) {
  .shot-grid { gap: 1.2rem; }
}

/* ---- Landing hero ---- */

.hero {
  display: grid; gap: 2rem; align-items: center;
  max-width: calc(var(--measure) + 26rem); margin: 0 auto;
  padding: 1.75rem 1.25rem 2.75rem;
}
.hero-copy { max-width: var(--measure); }
.hero-copy h1 { margin-bottom: 1rem; }
.hero-copy .lede { max-width: 30rem; }
.hero-copy .actions { margin-bottom: 0.75rem; }
p.note { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rim); margin: 0.25rem 0 0; }

.hero-art {
  position: relative; width: 100%; max-width: 30rem; justify-self: center;
  aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 1rem;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(232, 192, 106, 0.16), transparent 62%),
    radial-gradient(85% 55% at 50% -4%, rgba(159, 196, 232, 0.15), transparent 62%),
    linear-gradient(180deg, #0a0c16 0%, #121a2c 52%, #0d1a15 100%);
}

.hero-moon {
  position: absolute; top: 11%; left: 50%; transform: translateX(-50%);
  width: 4.25rem; height: 4.25rem; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #f6e6bd, #e8c06a 58%, #c69a4a);
  box-shadow: 0 0 1.75rem rgba(232, 192, 106, 0.5), 0 0 4.5rem rgba(232, 192, 106, 0.22);
}

.hero-glow {
  position: absolute; bottom: 17%; left: 50%; transform: translateX(-50%);
  width: 7rem; height: 3.2rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(159, 196, 232, 0.85), rgba(159, 196, 232, 0.22) 68%, transparent);
  filter: blur(5px);
}

.hero-weed {
  position: absolute; bottom: 0; background: #04070d;
  clip-path: polygon(50% 0, 56% 10%, 42% 14%, 55% 26%, 40% 30%, 58% 46%, 44% 48%, 60% 66%, 46% 68%, 52% 100%, 0 100%, 0 0);
}
.hero-weed.w1 { left: 6%; width: 12px; height: 34%; }
.hero-weed.w2 { left: 20%; width: 8px; height: 22%; transform: scaleX(-1); }
.hero-weed.w3 { right: 22%; width: 9px; height: 26%; }
.hero-weed.w4 { right: 5%; width: 13px; height: 38%; transform: scaleX(-1); }

.hero-soil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
  background: linear-gradient(180deg, transparent, rgba(5, 8, 13, 0.92) 30%, #04070d);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: heroPulse 5.5s ease-in-out infinite; }
  @keyframes heroPulse {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.12); }
  }
}

@media (min-width: 48rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); padding-top: 2.5rem; }
  .hero-art { justify-self: end; }
}

code {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: max(12px, 0.88em); color: var(--rim);
  background: rgba(159, 196, 232, 0.08);
  border: 1px solid var(--line); border-radius: 0.3rem;
  padding: 0.05rem 0.35rem;
}
dl.facts dd { line-height: 1.5; }