:root {
  color-scheme: only light;
  font-family:
    "Helvetica Neue",
    "SF Pro Display",
    "Avenir Next",
    Avenir,
    system-ui,
    -apple-system,
    sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  --paper: #fdfbf8;
  /* Cool early sky, a rose horizon, and the first warm light of the day. */
  --peach: 255 167 111;
  --rose: 255 153 172;
  --lilac: 183 182 225;
  --gold: 255 220 139;
  --cream: 255 248 223;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

.page {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
}

/* Independent color fields blend into a continuous, slowly changing mesh. */
.ambient {
  position: fixed;
  z-index: -2;
  inset: -12%;
  overflow: hidden;
  pointer-events: none;
  filter: blur(clamp(40px, 5vw, 80px));
}

.mesh-blob {
  position: absolute;
  width: 70vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: mesh-drift var(--duration) ease-in-out infinite;
  animation-delay: var(--phase);
  animation-play-state: paused;
}

.mesh-peach {
  left: -8%;
  top: 3%;
  background: radial-gradient(ellipse, rgb(var(--peach) / 0.68), transparent 70%);
  --duration: 29s;
  --phase: -7s;
  --x-start: -8%;
  --y-start: -6%;
  --x-mid: 20%;
  --y-mid: 18%;
  --x-end: 4%;
  --y-end: 34%;
  --turn: 28deg;
}

.mesh-rose {
  width: 66vmax;
  left: 40%;
  top: -5%;
  background: radial-gradient(ellipse, rgb(var(--rose) / 0.46), transparent 70%);
  --duration: 37s;
  --phase: -14s;
  --x-start: 8%;
  --y-start: -12%;
  --x-mid: -20%;
  --y-mid: 22%;
  --x-end: -3%;
  --y-end: 38%;
  --turn: -32deg;
}

.mesh-lilac {
  width: 80vmax;
  left: 16%;
  top: -37%;
  background: radial-gradient(ellipse, rgb(var(--lilac) / 0.45), transparent 70%);
  --duration: 43s;
  --phase: -23s;
  --x-start: -20%;
  --y-start: 4%;
  --x-mid: 21%;
  --y-mid: -10%;
  --x-end: 4%;
  --y-end: -24%;
  --turn: 36deg;
}

.mesh-gold {
  width: 58vmax;
  left: 18%;
  top: 26%;
  background: radial-gradient(ellipse, rgb(var(--gold) / 0.84), transparent 68%);
  --duration: 31s;
  --phase: -4s;
  --x-start: -6%;
  --y-start: 8%;
  --x-mid: 22%;
  --y-mid: -12%;
  --x-end: 12%;
  --y-end: 26%;
  --turn: -24deg;
}

.mesh-cream {
  width: 54vmax;
  left: 44%;
  top: 28%;
  background: radial-gradient(ellipse, rgb(var(--cream) / 0.92), transparent 66%);
  --duration: 47s;
  --phase: -17s;
  --x-start: 12%;
  --y-start: -8%;
  --x-mid: -32%;
  --y-mid: 6%;
  --x-end: -12%;
  --y-end: -24%;
  --turn: 18deg;
}

/* One small noise tile, generated once in JS; only its offset is animated. */
.texture {
  position: fixed;
  z-index: -1;
  inset: -96px;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 192px 192px;
  opacity: 0.22;
  animation: grain-shift 800ms steps(1) infinite;
  animation-play-state: paused;
}

:root[data-motion="running"] .mesh-blob,
:root[data-motion="running"] .texture {
  animation-play-state: running;
  will-change: transform;
}

.wordmark {
  margin: 0;
  padding-left: 0.24em;
  color: rgb(33 37 43 / 0.42);
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  font-weight: 300;
  letter-spacing: 0.24em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1rem rgb(255 255 255 / 0.42);
  user-select: none;
}

@keyframes mesh-drift {
  0%,
  100% {
    transform: translate3d(var(--x-start), var(--y-start), 0) rotate(0deg) scale(1);
  }

  33% {
    transform: translate3d(var(--x-mid), var(--y-mid), 0) rotate(var(--turn)) scale(1.12, 0.94);
  }

  66% {
    transform: translate3d(var(--x-end), var(--y-end), 0) rotate(0deg) scale(0.96, 1.08);
  }
}

@keyframes grain-shift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  12.5% { transform: translate3d(-37px, 19px, 0); }
  25% { transform: translate3d(24px, -41px, 0); }
  37.5% { transform: translate3d(-53px, -17px, 0); }
  50% { transform: translate3d(43px, 31px, 0); }
  62.5% { transform: translate3d(-18px, -56px, 0); }
  75% { transform: translate3d(61px, -28px, 0); }
  87.5% { transform: translate3d(-45px, 47px, 0); }
}

@media (max-width: 42rem) {
  .mesh-blob {
    width: 100vmax;
  }

  .mesh-peach { left: -68%; top: -8%; }
  .mesh-rose {
    width: 82vmax;
    left: -12%;
    top: 0%;
    --x-mid: -10%;
    --y-mid: 10%;
    --x-end: 12%;
    --y-end: 25%;
  }
  .mesh-lilac { left: -44%; top: -25%; }
  .mesh-gold { left: -32%; top: 21%; }
  .mesh-cream { left: -4%; top: 38%; }

  .wordmark {
    font-size: 0.95rem;
    letter-spacing: 0.2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mesh-blob,
  .texture {
    animation: none;
    will-change: auto !important;
  }

}

@media (forced-colors: active) {
  body {
    background: Canvas;
  }

  .ambient,
  .texture {
    display: none;
  }

  .wordmark {
    color: CanvasText;
  }
}