@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Fell SC";
  src: url("/fonts/fell-sc.woff2") format("woff2");
  font-display: block;
}

:root {
  --sand-hi: #F4EBDC;
  --sand: #EDE2CF;
  --sand-lo: #E0CFB3;
  --ink: #2B211B;
  --ink-soft: #6B5A4B;
  --rule: #BFAA8A;
  --spark: #E8902A;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--sand-lo);
}

body {
  margin: 0;
  min-height: 100vh;
  /* Grain, a light pool behind the moon, then beige settling into brown. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60rem 28rem at 50% 6rem, var(--sand-hi), transparent 70%),
    linear-gradient(180deg, var(--sand) 0%, var(--sand-lo) 100%);
  color: var(--ink);
  font: 400 1.0625rem/1.6 "Manrope", system-ui, sans-serif;
}

.sheet {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  text-align: center;
}

/* Hero */

.sky {
  width: 13.5rem;
  margin: 0 auto;
  aspect-ratio: 240 / 200;
}
.sky svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mark {
  margin: 0.5rem 0 0;
  font: 400 clamp(3rem, 15vw, 5.25rem)/1 "Fell SC", Georgia, serif;
  letter-spacing: 0.01em;
}
.line {
  max-width: 24rem;
  margin: 0.9rem auto 0;
  color: var(--ink-soft);
  font-size: 1.125rem;
}

.get {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.7rem 2.75rem 0.8rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--sand-hi);
  font: 400 1.5rem/1 "Fell SC", Georgia, serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 10px 20px -12px rgba(43, 33, 27, 0.7);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.get:hover { background: #3A2C23; transform: translateY(-1px); box-shadow: 0 14px 24px -14px rgba(43, 33, 27, 0.8); }
.get:active { transform: translateY(1px); box-shadow: 0 4px 10px -6px rgba(43, 33, 27, 0.8); }
.get:focus-visible { outline: 2px solid var(--spark); outline-offset: 4px; }

.later {
  max-width: 22rem;
  margin: 2rem auto 0;
  color: var(--ink-soft);
}

/* Facts, set like a book's contents: label, dotted leader, value. */

.facts {
  max-width: 22rem;
  margin: 3.25rem auto 0;
  padding: 0;
  text-align: left;
  font-size: 0.975rem;
}
.facts div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0;
}
.facts div::after {
  content: "";
  order: 1;
  flex: 1;
  border-bottom: 1.5px dotted var(--rule);
  transform: translateY(-0.3em);
}
.facts dt { color: var(--ink-soft); }
.facts dd { order: 2; margin: 0; font-weight: 500; }

/* About */

.about {
  max-width: 26rem;
  margin: 3.75rem auto 0;
}
.pair {
  width: 8.25rem;
  height: auto;
}
.pair * {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about h2 {
  margin: 0.75rem 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}
.about p {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
}

footer {
  margin-top: 4rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* The cut. Rest state = the app icon: two halves just apart, a glowing cut with rays, three sparkles.
   Timeline: moon rises (0-420ms), the blade's glint crosses (500-1800ms) with the cut drawing behind it,
   a flash as it leaves the moon (~1340ms), then the halves part. */

.half.up { transform: translate(-1.55px, -2.57px); }
.half.down { transform: translate(1.55px, 2.57px); }

.seam path, .slash { fill: none; stroke-linecap: round; stroke-dasharray: 1; }
.seam .halo { stroke-width: 4; opacity: 0.7; }
.seam .core { stroke-width: 1.2; }
.seam {
  opacity: 0.9;
  animation: breathe 2.8s ease-in-out infinite alternate;
}

.flash { opacity: 0; transform-box: fill-box; transform-origin: center; }

/* The glint: a short bright dash that runs the length of the cut. */
.slash { stroke-dasharray: 0.14 2; stroke-dashoffset: -1; }
.slash.halo { stroke: #EF9B2F; stroke-width: 5; opacity: 0.8; }
.slash.core { stroke: #FFFBEE; stroke-width: 1.8; }

.sparks path {
  fill: none;
  stroke: var(--spark);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0;
}
.k1 { --x: 29px; --y: -17.5px; }
.k2 { --x: 25.5px; --y: -5px; }
.k3 { --x: 17.6px; --y: -21.8px; }
.k4 { --x: 19.8px; --y: 3.1px; }
.k5 { --x: 7.2px; --y: -20.8px; }
.k6 { --x: -20.6px; --y: 12.4px; }
.k7 { --x: -10.1px; --y: 14.9px; }
.k8 { --x: -19.9px; --y: 2.1px; }

.motes path {
  fill: var(--spark);
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 3.2s ease-in-out infinite;
}
.motes g:nth-child(2) path { animation-delay: -1.1s; }
.motes g:nth-child(3) path { animation-delay: -2.2s; }

/* Played on every load, and again on a tap (moon.js). */
.play .moon { transform-box: fill-box; transform-origin: center; animation: rise 420ms cubic-bezier(.2, .7, .2, 1) both; }
.play .slash { animation: slash 1300ms linear 500ms both; }
.play .seam path { animation: draw 1300ms linear 500ms both; }
.play .seam { animation: breathe 2.8s ease-in-out 2s infinite alternate; }
.play .flash { animation: flash 560ms ease-out 1340ms both; }
.play .half { animation: part 700ms cubic-bezier(.2, .8, .2, 1) 1380ms both; }
.play .sparks path { animation: spark 700ms cubic-bezier(.1, .7, .3, 1) 1340ms both; }
.play .sparks .k6, .play .sparks .k7, .play .sparks .k8 { animation-delay: 800ms; }
.play .sparks .k2, .play .sparks .k4 { animation-delay: 1380ms; }
.play .motes path { animation: pop 500ms ease-out 1700ms both, twinkle 3.2s ease-in-out 2.2s infinite; }
.play .motes g:nth-child(2) path { animation-delay: 1850ms, 2.35s; }
.play .motes g:nth-child(3) path { animation-delay: 2000ms, 2.5s; }

@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@keyframes slash {
  from { stroke-dashoffset: 0.14; }
  to { stroke-dashoffset: -1; }
}
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes flash {
  0% { opacity: 0; transform: scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes part { from { transform: translate(0, 0); } }
@keyframes breathe { to { opacity: 0.55; } }
@keyframes spark {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)); }
}
@keyframes pop { from { opacity: 0; transform: scale(0); } }
@keyframes twinkle {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(.6); }
}

@media (prefers-reduced-motion: reduce) {
  .sky *, .play * { animation: none !important; }
  .get { transition: none; }
}

@media (min-width: 48rem) {
  .sheet { padding-top: 4rem; }
}