@font-face {
  font-family: "Fredoka";
  src: url("assets/fonts/Fredoka-Variable.ttf") format("truetype");
  font-weight: 300 700; font-stretch: 75% 125%; font-display: swap;
}
:root {
  --navy-deep: #0e0e0e;
  --navy: #1d1d1d;
  --blue: #1f4a78;
  --ice: #9a9a9a;
  --paper: #fff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  min-height: 100svh;
  background: radial-gradient(120% 90% at 30% 25%, var(--navy) 0%, var(--navy-deep) 70%);
  color: var(--paper);
  font-family: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  overflow: hidden;
}

main {
  position: relative;
  min-height: 100svh;
  display: grid; place-content: center; justify-items: center;
  gap: clamp(1.2rem, 4vw, 2.6rem);
  padding: 1.5rem 16px;
}
.logo {
  position: relative;
  width: min(84vw, 920px);
  aspect-ratio: 512 / 264.24;
  -webkit-tap-highlight-color: transparent;
}
.logo-svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the canvas covers the logo plus a 50-unit margin on every side so the ink can bloat */
#inkCanvas {
  display: none; position: absolute; pointer-events: none;
  left: -9.766%; width: 119.531%; top: -18.923%; height: 137.843%;
}
html:not(.no-js) .logo-svg { visibility: hidden; }
html.gl-fail .logo-svg { visibility: visible; }
html.gl #inkCanvas { display: block; }

.soon {
  font-size: clamp(1.4rem, 3.6vw, 2.4rem);
  font-weight: 500;
  letter-spacing: .05em;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1.8s ease, filter 2.2s ease;
}
.ink-done .soon, .no-js .soon { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .soon { opacity: 1; filter: none; transition: none; } }