:root {
  color-scheme: dark;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #e9e7f0;
  background: #11131e;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; overflow-x: hidden; }
::selection { background: #817d9c; color: #fff; }

.atmosphere, .grain, .foreground { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.atmosphere { background: radial-gradient(ellipse at 50% 47%, #383a51 0%, #202333 38%, #11131e 76%); }
.atmosphere::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, transparent 25%, #080a1380 100%); }
.wash { position: absolute; border-radius: 50%; filter: blur(65px); animation: wander 38s ease-in-out infinite alternate; }
.wash--lilac { width: 110vw; height: 90vh; left: -45%; top: -48%; background: radial-gradient(ellipse, #8d7aa375, #62547730 50%, transparent 72%); }
.wash--peach { width: 90vw; height: 95vh; right: -42%; bottom: -60%; background: radial-gradient(ellipse, #a7917e45, #7f6a7130 52%, transparent 72%); animation-delay: -14s; animation-duration: 44s; }
.wash--blue { width: 95vw; height: 60vh; left: 5%; top: 12%; background: radial-gradient(ellipse, #93a4c125, transparent 70%); animation-delay: -8s; animation-duration: 41s; }
.mist { position: absolute; width: 150%; height: 50%; left: -25%; background: radial-gradient(ellipse, #9ca5bd20, transparent 65%); filter: blur(35px); animation: mist 34s ease-in-out infinite alternate; }
.mist--one { top: 1%; transform: rotate(-18deg); }
.mist--two { bottom: -14%; animation-delay: -12s; opacity: .65; }
/* Keep noise at a fixed scale instead of stretching it across large displays. */
.grain { z-index: 4; opacity: .06; background-size: 180px 180px; background-repeat: repeat; background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }

main { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center; padding: 70px 1.6vw 90px; }
.dream { width: 100%; text-align: center; }
h1 { margin: 0; animation: emerge 6.5s cubic-bezier(.16,.65,.25,1) both; }
.wordmark { display: block; width: 100%; height: auto; filter: brightness(0) invert(.94); opacity: .97; }

/* Clouds cross the foreground; the lettering itself stays anchored. */
.foreground { z-index: 2; }
.cloud { position: absolute; width: 160%; height: 75%; left: -30%; filter: blur(26px); }
.cloud--near { top: 16%; background: radial-gradient(ellipse at 38% 50%, #1b1e2cf5 0%, #222637c9 16%, #262b3e70 32%, transparent 59%); animation: clear-near 8s cubic-bezier(.2,.6,.3,1) both; }
.cloud--far { top: -15%; background: radial-gradient(ellipse at 60% 55%, #11131ee6 0%, #25283b9c 24%, transparent 58%); animation: clear-far 9s cubic-bezier(.2,.6,.3,1) both; }
.foreground::after { content: ""; position: absolute; width: 160%; height: 24%; left: -30%; top: 53%; background: radial-gradient(ellipse, #a1abc01c, transparent 65%); filter: blur(25px); animation: passing-cloud 36s ease-in-out 8s infinite alternate both; }

footer { position: absolute; z-index: 5; bottom: max(28px, env(safe-area-inset-bottom)); left: 0; width: 100%; padding: 12px 3vw; font-size: 10px; letter-spacing: .16em; color: #a7a9b9; animation: whisper-in 3s ease 4s both; }
.domain { opacity: .65; }
.coming-soon { position: absolute; right: 3vw; opacity: .65; }

@keyframes emerge { from { opacity: .04; filter: blur(16px); transform: scale(1.055); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes clear-near { from { transform: translate(0, 0) scale(1.15); opacity: 1; } to { transform: translate(-13%, 48%) scale(1.1); opacity: 0; } }
@keyframes clear-far { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(15%, -48%); opacity: 0; } }
@keyframes passing-cloud { from { transform: translate(-13%, 0) rotate(-8deg); opacity: .3; } to { transform: translate(15%, 10%) rotate(-5deg); opacity: .8; } }
@keyframes whisper-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wander { from { transform: translate(-3%, -3%) scale(1); } to { transform: translate(12%, 9%) scale(1.15); } }
@keyframes mist { from { transform: translateX(-8%) rotate(-18deg); } to { transform: translateX(16%) rotate(-10deg); } }

@media (max-width: 600px) {
  main { padding-inline: 3vw; }
  footer { padding-inline: 5vw; bottom: max(18px, env(safe-area-inset-bottom)); }
  .coming-soon { right: 5vw; }
  .wash { filter: blur(40px); min-width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .cloud { display: none; }
}