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

:root {
  color-scheme: dark;
  --bg: #02040a;
  --ink: rgba(230, 244, 255, 0.94);
  --muted: rgba(186, 220, 240, 0.62);
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: default;
}

canvas#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.veil,
.grid,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.veil {
  inset: -18%;
  background:
    radial-gradient(circle at 22% 32%, rgba(55, 103, 255, 0.16), transparent 28%),
    radial-gradient(circle at 78% 68%, rgba(183, 77, 255, 0.15), transparent 30%),
    radial-gradient(circle at 50% 48%, rgba(0, 236, 255, 0.08), transparent 26%),
    radial-gradient(circle at 50% 42%, rgba(255, 140, 48, 0.07), transparent 18%);
  filter: blur(28px);
  mix-blend-mode: screen;
  animation: driftGlow 18s ease-in-out infinite alternate;
}

.grid {
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 58%, black 0%, transparent 72%);
  opacity: 0.65;
  transform: perspective(700px) rotateX(62deg) translateY(18%);
  transform-origin: center bottom;
  animation: gridFlow 5s linear infinite;
}

.vignette {
  background:
    radial-gradient(circle at 50% 42%, transparent 0%, transparent 46%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.22) 100%);
  z-index: 2;
}

main {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 1.25rem max(5rem, env(safe-area-inset-bottom, 0px) + 2.5rem);
  text-align: center;
}

.mascot {
  width: min(58vw, 380px);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 28px rgba(255, 140, 48, 0.22));
  animation: float 4.8s ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

h1 {
  margin: 1.15rem 0 0.55rem;
  color: var(--ink);
  font-weight: 300;
  letter-spacing: 0.22em;
  font-size: clamp(1.15rem, 3.6vw, 2.15rem);
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(39, 224, 255, 0.22),
    0 0 22px rgba(126, 78, 255, 0.14);
}

#tagline {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.36em;
  font-size: clamp(0.62rem, 1.4vw, 0.8rem);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(39, 224, 255, 0.16);
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}

@keyframes driftGlow {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1.4%, 0) scale(1.06); }
}

@keyframes gridFlow {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 42px, 42px 0; }
}

@media (max-width: 520px) {
  .mascot { width: min(72vw, 300px); }
  h1 { letter-spacing: 0.14em; }
  #tagline { letter-spacing: 0.24em; }
}

@media (prefers-reduced-motion: reduce) {
  .veil, .grid, .mascot { animation: none; }
}

html.reduced-motion .veil,
html.reduced-motion .grid,
html.reduced-motion .mascot {
  animation: none;
}