:root {
  --sea: #0a4fa8;
  --sea-deep: #041018;
  --sea-mid: #0b2a4a;
  --wave: #3aa0e8;
  --sun: #f5c518;
  --sun-hot: #ffe27a;
  --sky: #7ec8f5;
  --cloud: #f4fbff;
  --tree: #3d9a46;
  --bark: #6d4c41;
  --earth: #8ec5f2;
  --ink: #e8f4ff;
  --muted: color-mix(in srgb, var(--cloud) 62%, var(--wave));
}

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

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

body {
  font-family: "Segoe UI", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  color: var(--ink);
  background: var(--sea-deep);
  overflow: hidden;
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, var(--sky) 28%, transparent), transparent 58%),
    radial-gradient(900px 520px at 18% 18%, color-mix(in srgb, var(--sun) 22%, transparent), transparent 55%),
    radial-gradient(800px 480px at 82% 22%, color-mix(in srgb, var(--tree) 16%, transparent), transparent 60%),
    linear-gradient(180deg, #06101c 0%, var(--sea-mid) 58%, #05203a 78%, #03101c 100%);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.glow-sun {
  width: min(52vw, 420px);
  height: min(52vw, 420px);
  left: 50%;
  top: 18%;
  translate: -50% -20%;
  background: radial-gradient(circle, var(--sun-hot) 0%, color-mix(in srgb, var(--sun) 70%, transparent) 38%, transparent 70%);
  opacity: 0.55;
  animation: pulse 9s ease-in-out infinite;
}

.glow-sea {
  width: 140%;
  height: 46%;
  left: -20%;
  bottom: -12%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sea) 55%, transparent), transparent 68%);
  opacity: 0.7;
}

.glow-sky {
  width: min(40vw, 320px);
  height: min(40vw, 320px);
  right: 8%;
  top: 12%;
  background: radial-gradient(circle, var(--cloud) 0%, var(--sky) 35%, transparent 70%);
  opacity: 0.18;
}

.earth {
  position: absolute;
  right: max(1.5rem, 4vw);
  bottom: max(1.5rem, 4vw);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--cloud), var(--earth) 42%, var(--sea) 78%);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--earth) 80%, transparent),
    0 0 2px var(--cloud);
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: 8vh 6vw 12vh;
}

.logo {
  width: min(72vw, 640px);
  height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 10px 28px color-mix(in srgb, var(--sun) 18%, transparent));
  animation: rise 1.1s ease-out both;
}

.soon {
  margin: 0;
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--cloud);
  text-shadow: 0 0 24px color-mix(in srgb, var(--sea) 40%, transparent);
  animation: rise 1.1s ease-out 0.12s both;
}

.meta {
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cloud) 55%, var(--wave));
}

.sandbox {
  color: var(--sun);
}

.sandbox:not([hidden])::after {
  content: "·";
  margin-left: 0.75rem;
  color: color-mix(in srgb, var(--cloud) 40%, var(--wave));
}

@keyframes rise {
  from {
    opacity: 0.35;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.42;
    transform: translate(-50%, -20%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -20%) scale(1.06);
  }
}

@media (max-width: 640px) {
  .logo {
    width: min(70vw, 360px);
  }

  .soon {
    letter-spacing: 0.22em;
  }

  .earth {
    width: 10px;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .soon,
  .glow-sun {
    animation: none;
  }
}