@font-face {
  font-family: "Dela Gothic One";
  src: url("/fonts/dela-gothic-one.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

:root {
  --cream: #FFF4E6;
  --ink: #241A3D;
  --orange: #FF7847;
  --yellow: #FFD23F;
  --pink: #FF9FD0;
  --blue: #7AA5FF;
  --display: "Dela Gothic One", "Arial Black", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { overflow: clip; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--display);
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
}

/* ---------- balloons ---------- */
.decor { position: fixed; inset: 0; pointer-events: none; }
.ball {
  position: absolute;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  animation: float 6s ease-in-out infinite;
}
.ball::after {
  content: ""; position: absolute; top: 18%; left: 22%; width: 26%; height: 20%;
  border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(-30deg);
}
.ball::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 160px;
  background: linear-gradient(rgba(36, 26, 61, .45), rgba(36, 26, 61, 0));
  transform-origin: top; transform: rotate(6deg);
}
.ball--pink { width: 170px; height: 195px; left: 6%; top: 14%; background: radial-gradient(circle at 35% 30%, #ffd0ea, var(--pink) 55%, #e870ad); }
.ball--yellow { width: 130px; height: 150px; right: 8%; top: 10%; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--yellow) 55%, #e8b51c); animation-delay: -2s; }
.ball--blue { width: 100px; height: 115px; right: 16%; bottom: 16%; background: radial-gradient(circle at 35% 30%, #d6e3ff, var(--blue) 55%, #4f7fe0); animation-delay: -4s; }

/* ---------- text ---------- */
.center { position: relative; z-index: 1; text-align: center; padding: 24px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px;
  font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.01em;
}
.logo__sun { width: 1.4em; height: 1.4em; }
.title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(44px, 9vw, 128px);
  line-height: 1;
  letter-spacing: -.02em;
}
.title span { color: var(--orange); }

@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@media (prefers-reduced-motion: reduce) { .ball { animation: none; } }

@media (max-width: 600px) {
  .ball--pink { width: 100px; height: 115px; left: -24px; top: 8%; }
  .ball--yellow { width: 80px; height: 92px; right: -16px; top: 18%; }
  .ball--blue { width: 64px; height: 74px; right: 12%; bottom: 10%; }
}