:root {
  --bg: #f3f3f5;
  --mist-white: #ffffff;
  --mist-pale: #eaeaef;
  --mist-amber: #FBCB57;
  --text: #555555;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.atmosphere {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  pointer-events: none;
  z-index: 1;
  --mouse-x: 0;
  --mouse-y: 0;
}

.parallax {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.p-1 { transform: translate(calc(var(--mouse-x) * -25px), calc(var(--mouse-y) * -25px)); }
.p-2 { transform: translate(calc(var(--mouse-x) * 15px), calc(var(--mouse-y) * 20px)); }
.p-3 { transform: translate(calc(var(--mouse-x) * 35px), calc(var(--mouse-y) * -15px)); }

.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  /* Longhands below must not reset this no-JS default. */
  animation-play-state: paused;
}

body[data-motion="active"] .cloud {
  animation-play-state: running;
}
body[data-motion="paused"] .cloud {
  animation-play-state: paused;
}

.cloud-1 {
  width: max(65vw, 55vh);
  height: max(65vw, 55vh);
  background-color: var(--mist-white);
  top: -10%;
  left: -10%;
  opacity: 0.8;
  animation-name: drift-1;
  animation-duration: 32s;
}

.cloud-amber-1 {
  width: max(45vw, 50vh);
  height: max(45vw, 50vh);
  background-color: var(--mist-amber);
  top: 5%;
  left: 20%;
  opacity: 0.18;
  animation-name: drift-2;
  animation-duration: 40s;
  animation-direction: alternate-reverse;
}

.cloud-2 {
  width: max(75vw, 65vh);
  height: max(55vw, 50vh);
  background-color: var(--mist-pale);
  bottom: -15%;
  right: -5%;
  opacity: 0.9;
  animation-name: drift-3;
  animation-duration: 35s;
}

.cloud-white {
  width: max(45vw, 50vh);
  height: max(45vw, 50vh);
  background-color: var(--mist-white);
  bottom: 5%;
  left: 15%;
  opacity: 0.8;
  animation-name: drift-3;
  animation-duration: 42s;
  animation-direction: alternate-reverse;
}

.cloud-3 {
  width: max(55vw, 60vh);
  height: max(65vw, 70vh);
  background-color: var(--mist-white);
  top: 15%;
  right: -5%;
  opacity: 0.7;
  animation-name: drift-2;
  animation-duration: 38s;
}

.cloud-amber-2 {
  width: max(50vw, 55vh);
  height: max(40vw, 45vh);
  background-color: var(--mist-amber);
  bottom: 10%;
  right: 25%;
  opacity: 0.15;
  animation-name: drift-1;
  animation-duration: 45s;
}

@media (min-width: 768px) {
  .cloud { filter: blur(140px); }
  .cloud-1 { width: max(45vw, 50vh); height: max(45vw, 50vh); }
  .cloud-amber-1 { width: max(35vw, 40vh); height: max(35vw, 40vh); }
  .cloud-2 { width: max(65vw, 60vh); height: max(45vw, 40vh); }
  .cloud-white { width: max(35vw, 40vh); height: max(35vw, 40vh); }
  .cloud-3 { width: max(45vw, 50vh); height: max(55vw, 60vh); }
  .cloud-amber-2 { width: max(40vw, 45vh); height: max(35vw, 40vh); }
}

@keyframes drift-1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3vw, 4vh) scale(1.05); }
  100% { transform: translate(-2vw, 2vh) scale(0.95); }
}

@keyframes drift-2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4vw, -2vh) scale(0.98); }
  100% { transform: translate(2vw, 3vh) scale(1.04); }
}

@keyframes drift-3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2vw, -4vh) scale(1.03); }
  100% { transform: translate(-3vw, 1vh) scale(0.97); }
}

.content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.logo {
  width: 420px;
  /* Reserve subtitle/spacing plus side margins; also fit short dynamic viewports. */
  max-width: min(calc(100vw - 3rem), calc((100vh - 6rem) * 3.8579));
  max-width: min(calc(100vw - 3rem), calc((100dvh - 6rem) * 3.8579));
  height: auto;
  opacity: 1;
  display: block;
  pointer-events: none;
}

@media (min-width: 768px) {
  .logo {
    width: 510px;
  }
}

.subtitle {
  margin: 1.5rem 0 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--text);
  font-weight: 400;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cloud, body[data-motion="active"] .cloud {
    animation: none;
  }
  .parallax {
    transform: none;
  }
}