/* chickpeababy.app home: one day with Chickpea. The page moves from morning light to bedtime navy as it scrolls,
   the way the app moves between its day and night palettes. The chickpea peeking over the phone is the one bold
   element; everything else stays quiet. Colors come from the app (Palette.swift, ChickpeaDrawing.swift). */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/fredoka.woff2) format("woff2"); }

:root {
  /* Sky, one per time of day */
  --dawn: #F7F0F6;
  --morning: #F4F2FB;
  --midmorning: #EEF1FC;
  --nap: #E6E7F8;
  --afternoon: #FBF1E4;
  --twilight: #A99CD6;
  --dusk: #34337E;
  --night: #161A33;
  /* Ink */
  --ink: #1E2140;
  --muted: #5B5E7E;
  --night-ink: #EEEDF7;
  --night-muted: #ABADCB;
  /* The app */
  --indigo: #4A47C8;
  --sleep: #2F4F94;
  --bottle: #C43B6A;
  --diaper: #D99127;
  --pump: #6A55D0;
  --line: rgba(30, 33, 64, .12);
  --display: "Fredoka", "Avenir Next Rounded", ui-rounded, system-ui, sans-serif;
  --body: "Figtree", -apple-system, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --dawn: #1F1D35; --morning: #1B1C36; --midmorning: #1A1D3A; --nap: #1A1C3C; --afternoon: #24203A;
    --twilight: #2C2A55; --dusk: #22235A; --night: #10132A;
    --ink: #EEEDF7; --muted: #A9ABC8; --indigo: #A5A2F5; --line: rgba(238, 237, 247, .14);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--morning); color: var(--ink); font: 17px/1.6 var(--body); }
img { max-width: 100%; height: auto; }
a { color: var(--indigo); }
a:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; text-wrap: balance; margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Top */
.top { max-width: 1120px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 20px 0; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { border-radius: 9px; }
.brand span { font-family: var(--display); font-weight: 600; font-size: 20px; }
.top nav { margin-left: auto; display: flex; gap: 20px; font-size: 15px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); }

/* Hero */
.hero { max-width: 1120px; margin: 0 auto; padding: clamp(28px, 6vw, 72px) 20px 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 64px); align-items: end; }
.hero-copy { padding-bottom: clamp(24px, 7vw, 96px); }
.hero h1 span { display: block; }
.hero h1 { font-size: clamp(44px, 6.6vw, 84px); letter-spacing: -.02em; font-weight: 600; }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 33ch; margin: 22px 0 30px; }
.store { display: inline-flex; align-items: center; gap: 10px; margin: 0; background: var(--ink); color: var(--morning); border-radius: 14px; padding: 10px 20px 10px 16px; font: 600 19px/1.1 var(--body); }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.free { margin: 14px 0 0; font-size: 15px; color: var(--muted); }

.hero-phone { margin: 0; position: relative; justify-self: center; width: min(100%, 380px); }
.hero-phone img { position: relative; z-index: 1; display: block; width: 100%; margin-top: 32.2%;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
/* The chickpea peeks over the phone: its body sits behind the phone and its hands in front, on the top edge. The
   drawing is 46% of the phone's width, so its y = 70 (the hands) lands 32.2% (46% x 0.7) down, where the image starts. */
.peeker { position: absolute; top: 0; left: 27%; width: 46%; height: auto; z-index: 0; }
/* The head pops up from behind the phone, the hands already on its edge. Only the body moves, and only by
   transform, so the hands and the phone stay put. */
.peeker:not(.hands) { animation: rise 900ms cubic-bezier(.2, .9, .25, 1.2) 300ms backwards; }
.peeker.hands { z-index: 2; }
.blink { transform-origin: 50px 64px; animation: blink 4.5s linear 1.4s infinite; }
@keyframes rise { from { transform: translateY(36%); } to { transform: none; } }
@keyframes blink { 0%, 96.8% { transform: scaleY(1); } 98.4% { transform: scaleY(.1); } 100% { transform: scaleY(1); } }

/* The day */
.day { position: relative; }
.day-title { max-width: 1120px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 20px 8px; font-size: clamp(30px, 4.4vw, 46px); }
.moment { --sky: var(--morning); --next: var(--morning); background: linear-gradient(var(--sky), var(--next));
  display: grid; grid-template-columns: 7.5rem 120px minmax(0, 1fr) minmax(0, 300px); gap: 8px 28px; align-items: center;
  padding: clamp(28px, 5vw, 56px) max(20px, calc((100% - 1080px) / 2)); }
.m-dawn { --sky: var(--morning); --next: var(--dawn); }
.m-morning { --sky: var(--dawn); --next: var(--morning); }
.m-midmorning { --sky: var(--morning); --next: var(--midmorning); }
.m-nap { --sky: var(--midmorning); --next: var(--nap); }
.m-afternoon { --sky: var(--nap); --next: var(--afternoon); }
.m-dusk { --sky: var(--afternoon); --next: var(--dusk); color: var(--night-ink); }
.m-dusk .say p { color: var(--night-muted); }
.m-dusk .time { color: var(--night-ink); }
/* Dusk text sits on the dark half of its gradient: keep it in the lower part. */
.m-dusk { background: linear-gradient(var(--sky) 0%, var(--twilight) 30%, var(--dusk) 58%, var(--night) 100%);
  padding-top: clamp(96px, 12vw, 160px); align-items: end; }

.time { margin: 0; font: 600 clamp(26px, 3vw, 34px)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.time time { letter-spacing: -.01em; }
.pose { width: 120px; height: 120px; }
.say h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 8px; }
.say p { margin: 0; color: var(--muted); max-width: 46ch; }
.shot { justify-self: end; width: 100%; max-width: 300px;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.shot-wide { -webkit-mask-image: none; mask-image: none; border-radius: 22px; max-width: 340px; box-shadow: 0 18px 32px -12px rgba(40, 36, 120, .35); }
.moment:not(:has(.shot)) .say { grid-column: 3 / 5; }

/* Night */
.night { background: var(--night); color: var(--night-ink); }
.night-inner { max-width: 1120px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 20px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px 48px; align-items: center; }
.night h2 { font-size: clamp(30px, 4.4vw, 46px); grid-column: 1 / -1; }
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; }
.promises li { color: var(--night-muted); }
.promises b { display: block; color: var(--night-ink); font-family: var(--display); font-weight: 500; font-size: 20px; margin-bottom: 2px; }
.sleeper { position: relative; width: 200px; justify-self: center; }
.sleeper svg { width: 100%; height: auto; display: block; }
.z { position: absolute; font: 600 22px var(--display); color: var(--night-muted); opacity: 0; animation: float 4.8s ease-in-out infinite; }
.z1 { left: 74%; top: 18%; }
.z2 { left: 82%; top: 8%; font-size: 17px; animation-delay: 1.6s; }
.z3 { left: 89%; top: 0; font-size: 13px; animation-delay: 3.2s; }
@keyframes float { 0% { opacity: 0; transform: translate(0, 10px); } 25% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; transform: translate(10px, -18px); } }

.foot { background: var(--night); color: var(--night-muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
  padding: 0 20px max(36px, env(safe-area-inset-bottom)); }
.foot a { color: var(--night-muted); }
.foot a:focus-visible { outline-color: var(--night-ink); }

/* Narrow */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero-copy { padding-bottom: 0; }
  .hero-phone { width: min(78%, 330px); }
  .moment { grid-template-columns: 76px minmax(0, 1fr); gap: 6px 18px; align-items: start; }
  .moment .time { grid-column: 1 / -1; }
  .pose { width: 76px; height: 76px; grid-row: 2; }
  .say { grid-row: 2; }
  .moment:not(:has(.shot)) .say { grid-column: 2; }
  .shot { grid-column: 1 / -1; justify-self: center; margin-top: 18px; max-width: 280px; }
  .shot-wide { max-width: 100%; }
  .m-dusk { padding-top: 168px; }
  .night-inner { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr; }
  .sleeper { width: 150px; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .peeker:not(.hands), .blink, .z { animation: none; }
  .z { opacity: .6; }
}