/* Hey Little Life — one meadow, one day, one letter.
   Palette is a day passing: dawn -> day -> dusk -> night.
   Motion: birds cross once, the hero pip notices you once, fireflies at night.
   Everything respects prefers-reduced-motion. */

:root {
  --dawn-a: #C9D4EA; --dawn-b: #EFD9A7;
  --day-a: #DCE7F0;  --day-b: #EDF2F5;
  --dusk-a: #B7A6C9; --dusk-b: #D9BFA8;
  --night-a: #232A44; --night-b: #343D5E;
  --ink: #232A3B;
  --meadow: #6B8A62; --meadow-deep: #43593F;
  --wildflower: #B65D7C;
  --paper: #EEF2F8;
}

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

body {
  color: var(--ink);
  font-family: "Nunito Sans", system-ui, sans-serif;
  line-height: 1.6;
  background: var(--day-a);
}

h1, h2, h3, .hand, .joined, .mortal p, .honest p {
  font-family: "Fraunces", Georgia, serif;
}

.scene { position: relative; overflow: hidden; }

/* ---------- dawn: the letter ---------- */
.scene--dawn {
  background: linear-gradient(var(--dawn-a) 55%, var(--dawn-b) 92%, var(--dawn-b));
  min-height: 96vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 4.5rem 1rem 11rem;
}
.sky { position: absolute; inset: 0; pointer-events: none; }
.sun {
  position: absolute; left: 12%; bottom: 24%;
  width: 72px; height: 72px; border-radius: 50%;
  background: #F6E7BC; opacity: 0.9;
}
.flock {
  position: absolute; top: 14%; left: -140px;
  width: 120px; height: 40px; color: var(--ink); opacity: 0.55;
  animation: cross 16s linear 1.5s 1 forwards;
}
@keyframes cross {
  to { transform: translateX(120vw) translateY(-4vh); }
}

.letter { position: relative; max-width: 36rem; }
.mark { font-size: 1.6rem; margin-bottom: 0.8rem; }
h1 {
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 550;
  letter-spacing: -0.015em;
  margin-bottom: 1.6rem;
}
.hand {
  font-style: italic;
  font-size: 1.14rem;
  max-width: 33ch;
  margin: 0 auto 1rem;
}
.sign { opacity: 0.75; font-size: 1rem; margin-bottom: 1.8rem; }

#waitlist { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
#waitlist input[type="email"] {
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid var(--ink); border-radius: 999px;
  font: inherit; padding: 0.6rem 1.1rem;
  width: 16.5rem; color: var(--ink);
}
#waitlist input[type="email"]:focus { outline: 2px solid var(--wildflower); outline-offset: 2px; }
#waitlist button {
  font: inherit; font-weight: 600;
  background: var(--ink); color: var(--dawn-b);
  border: 0; border-radius: 999px;
  padding: 0.65rem 1.7rem; cursor: pointer;
}
#waitlist button:hover { background: #313B52; }
#waitlist button:focus-visible { outline: 2px solid var(--wildflower); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.joined { margin-top: 1.1rem; font-style: italic; font-size: 1.05rem; }
.whisper { font-size: 0.88rem; opacity: 0.72; margin-top: 0.9rem; }
.peek {
  display: inline-block; margin-top: 1.6rem;
  color: var(--ink); opacity: 0.7; font-size: 0.92rem;
  text-decoration: none; border-bottom: 1px solid currentColor;
}
.peek:hover, .peek:focus-visible { opacity: 1; }

/* ---------- the ground and its people ---------- */
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 9.5rem; pointer-events: none; }
.hills { position: absolute; inset: 0; width: 100%; height: 100%; }
.pip { position: absolute; bottom: 3.1rem; width: 34px; height: 40px; }
.pip-a { left: 58%; width: 44px; height: 52px; color: var(--meadow-deep); }
.pip-b { left: 24%; width: 58px; height: 42px; color: #7A6C8F; bottom: 2.6rem; }
.pip-c { left: 78%; color: #9A7B4F; bottom: 3.6rem; }

/* the noticing: the hero pip's eyes start aside, slide to meet yours, blink once */
@keyframes notice {
  0%, 55% { transform: translateX(-4.5px); }
  75%, 100% { transform: translateX(0); }
}
@keyframes blink {
  0%, 82%, 96%, 100% { transform: scaleY(1); }
  88%, 92% { transform: scaleY(0.12); }
}
.hero-pip .pip-eyes {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: notice 2.6s ease-out 0.9s 1 both,
             blink 3.6s linear 0.9s 1;
}

/* ---------- day: the three truths ---------- */
.scene--day { background: linear-gradient(var(--day-a), var(--day-b)); }
.three {
  display: grid; gap: 2.4rem; grid-template-columns: 1fr;
  max-width: 62rem; margin: 0 auto;
  padding: 4.5rem 1.25rem 3.5rem;
}
@media (min-width: 740px) { .three { grid-template-columns: 1fr 1fr 1fr; } }
.three h2 {
  font-size: 1.35rem; font-weight: 550; margin-bottom: 0.55rem;
}
.three p { font-size: 0.98rem; max-width: 38ch; }
.three div { text-align: left; margin: 0 auto; }

/* ---------- the card lab ---------- */
.cardlab { text-align: center; padding: 3.5rem 1.25rem 5rem; }
.cardlab h2 { font-size: 1.9rem; font-weight: 550; }
.cardlab .whisper { margin: 0.5rem 0 1.5rem; font-size: 0.95rem; }
#pick { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
#pick input {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid var(--ink); border-radius: 999px;
  font: inherit; padding: 0.55rem 1.1rem; width: 15rem; color: var(--ink);
}
#pick input:focus { outline: 2px solid var(--wildflower); outline-offset: 2px; }
#pick button, #save {
  font: inherit; font-weight: 600;
  background: var(--ink); color: var(--day-b);
  border: 0; border-radius: 999px;
  padding: 0.6rem 1.5rem; cursor: pointer;
}
#save { margin-top: 1.1rem; }

.soulcard {
  margin: 2.4rem auto 0; max-width: 23rem; text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 14px;
  padding: 2rem 1.8rem 1.6rem;
}
.card-pip { display: block; width: 34px; height: 40px; margin: 0 auto 0.4rem; color: var(--meadow-deep); }
.soulcard h3 { font-weight: 550; font-size: 1.45rem; text-align: center; }
.meta { text-align: center; opacity: 0.68; font-size: 0.9rem; margin-bottom: 0.5rem; }
.arch {
  text-align: center; letter-spacing: 0.18em; font-size: 0.78rem;
  border-top: 1px solid rgba(35, 42, 59, 0.2); border-bottom: 1px solid rgba(35, 42, 59, 0.2);
  padding: 0.5rem 0; margin: 0.8rem 0 1rem;
}
.soulcard ul { list-style: none; }
.soulcard li { margin-bottom: 0.65rem; font-size: 0.95rem; font-family: "Fraunces", Georgia, serif; }
.pull { opacity: 0.68; font-size: 0.9rem; margin-top: 0.4rem; }
.daily {
  font-style: italic; font-size: 0.92rem; margin-top: 1rem;
  border-top: 1px solid rgba(35, 42, 59, 0.2); padding-top: 0.8rem;
  font-family: "Fraunces", Georgia, serif;
}
.hidden { display: none; }

/* ---------- dusk: mortality ---------- */
.scene--dusk {
  background: linear-gradient(var(--day-b), var(--dusk-a) 60%, var(--dusk-b));
  text-align: center; padding: 5rem 1.25rem;
}
.mortal h2 { font-size: 1.9rem; font-weight: 550; margin-bottom: 1rem; }
.mortal p { max-width: 44ch; margin: 0 auto; font-size: 1.05rem; }

/* ---------- night: honesty, fireflies, sleep ---------- */
.scene--night {
  background: linear-gradient(var(--dusk-a) 0%, var(--night-a) 26%, var(--night-b));
  color: #E6E9F2; text-align: center;
  padding: 6rem 1.25rem 10rem;
}
.stars { position: absolute; inset: 0; pointer-events: none; }
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #E6E9F2; opacity: 0.8;
}
.s1 { top: 18%; left: 16%; } .s2 { top: 12%; left: 44%; } .s3 { top: 22%; left: 71%; }
.s4 { top: 33%; left: 86%; } .s5 { top: 36%; left: 8%; width: 2px; height: 2px; }
.moonmark { position: absolute; top: 14%; right: 12%; font-size: 1.9rem; opacity: 0.9; }
.firefly {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #EFD9A7; box-shadow: 0 0 8px 2px rgba(239, 217, 167, 0.55);
  animation: glow 4.6s ease-in-out infinite;
}
.f1 { bottom: 24%; left: 28%; } .f2 { bottom: 30%; left: 62%; animation-delay: 1.4s; }
.f3 { bottom: 20%; left: 80%; animation-delay: 2.7s; }
@keyframes glow { 0%, 100% { opacity: 0.1; } 50% { opacity: 1; } }

.honest { position: relative; max-width: 40rem; margin: 0 auto; }
.honest h2 { font-size: 1.7rem; font-weight: 550; margin-bottom: 0.9rem; }
.honest p { font-size: 1rem; margin-bottom: 0.9rem; opacity: 0.92; }
footer { position: relative; margin-top: 2.5rem; }
.fine { font-size: 0.78rem; opacity: 0.65; max-width: 36rem; margin: 0 auto; }
.ground--night .hills { filter: brightness(0.45) saturate(0.7); }
.pip-night { left: 70%; color: #141927; }

/* ---------- calm for those who ask for it ---------- */
@media (prefers-reduced-motion: reduce) {
  .flock { animation: none; left: 24%; top: 16%; }
  .hero-pip .pip-eyes, .firefly, .dog-tail { animation: none; }
  .firefly { opacity: 0.8; }
}