@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/unbounded-latin-600-normal.woff2') format('woff2');
}

/* Zentra's purple: the same palette as the in-game sidebar. */
:root {
  --bg: #07050c;
  --ink: #f6efff;
  --lilac: #e4d2ff;
  --violet: #b98aff;
  --purple: #a970ff;
  --deep: #6d3fd1;
  --fuchsia: #c25cff;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Unbounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

main {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* The word: a soft lilac-to-purple gradient with a slow sheen passing across it. */
h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  font-weight: 600;
  font-size: clamp(60px, 17vw, 184px);
  line-height: 1;
  letter-spacing: -0.035em;
  filter: drop-shadow(0 0 42px rgba(169, 112, 255, .32)) drop-shadow(0 0 2px rgba(228, 210, 255, .25));
  animation: rise 1.6s var(--ease) both;
}
.word {
  background: linear-gradient(100deg, var(--lilac) 0%, var(--violet) 30%, var(--purple) 46%, var(--ink) 52%, var(--violet) 60%, var(--deep) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s ease-in-out 1.2s infinite;
}
.dots { display: inline-flex; margin-left: .02em; }
.dots span {
  display: inline-block;
  color: var(--violet);
  animation: blink 1.8s ease-in-out 1.6s infinite;
}
.dots span:nth-child(2) { animation-delay: 1.85s; }
.dots span:nth-child(3) { animation-delay: 2.1s; }

/* Background: drifting aurora, a faint pixel grid, a breathing halo and rising pixels. */
.scene { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; animation: fade-in 2.4s ease both; }
.aurora {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .42;
  will-change: transform;
}
.aurora-a { left: -18vmax; top: -24vmax; background: radial-gradient(circle, var(--deep), transparent 68%); animation: drift-a 26s ease-in-out infinite alternate; }
.aurora-b { right: -22vmax; bottom: -26vmax; background: radial-gradient(circle, var(--fuchsia), transparent 66%); opacity: .3; animation: drift-b 31s ease-in-out infinite alternate; }
.aurora-c { left: 30%; top: 38%; width: 44vmax; height: 44vmax; background: radial-gradient(circle, var(--purple), transparent 70%); opacity: .22; animation: drift-c 22s ease-in-out infinite alternate; }

.grid {
  position: absolute;
  inset: -64px;
  background-image:
    linear-gradient(rgba(185, 138, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 138, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
  animation: pan 40s linear infinite;
}

.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(169, 112, 255, .16) 0%, rgba(169, 112, 255, .05) 38%, transparent 66%);
  animation: breathe 9s ease-in-out infinite;
}

.pixels i {
  position: absolute;
  bottom: -24px;
  width: 6px;
  height: 6px;
  background: var(--violet);
  box-shadow: 0 0 12px rgba(185, 138, 255, .7);
  opacity: 0;
  animation: float 16s linear infinite;
}
.pixels i:nth-child(1)  { left: 6%;  animation-duration: 19s; animation-delay: -2s; }
.pixels i:nth-child(2)  { left: 13%; animation-duration: 15s; animation-delay: -9s;  width: 4px; height: 4px; background: var(--lilac); }
.pixels i:nth-child(3)  { left: 21%; animation-duration: 22s; animation-delay: -4s;  background: var(--purple); }
.pixels i:nth-child(4)  { left: 28%; animation-duration: 17s; animation-delay: -12s; width: 8px; height: 8px; opacity: 0; }
.pixels i:nth-child(5)  { left: 35%; animation-duration: 20s; animation-delay: -6s;  width: 4px; height: 4px; }
.pixels i:nth-child(6)  { left: 42%; animation-duration: 24s; animation-delay: -15s; background: var(--fuchsia); }
.pixels i:nth-child(7)  { left: 49%; animation-duration: 18s; animation-delay: -3s;  width: 5px; height: 5px; background: var(--lilac); }
.pixels i:nth-child(8)  { left: 56%; animation-duration: 21s; animation-delay: -10s; }
.pixels i:nth-child(9)  { left: 63%; animation-duration: 16s; animation-delay: -7s;  width: 4px; height: 4px; background: var(--purple); }
.pixels i:nth-child(10) { left: 70%; animation-duration: 23s; animation-delay: -1s;  width: 8px; height: 8px; }
.pixels i:nth-child(11) { left: 76%; animation-duration: 19s; animation-delay: -13s; background: var(--lilac); width: 5px; height: 5px; }
.pixels i:nth-child(12) { left: 82%; animation-duration: 17s; animation-delay: -5s;  background: var(--fuchsia); width: 4px; height: 4px; }
.pixels i:nth-child(13) { left: 88%; animation-duration: 25s; animation-delay: -11s; }
.pixels i:nth-child(14) { left: 94%; animation-duration: 20s; animation-delay: -8s;  width: 4px; height: 4px; background: var(--purple); }
.pixels i:nth-child(15) { left: 17%; animation-duration: 27s; animation-delay: -18s; width: 3px; height: 3px; background: var(--lilac); }
.pixels i:nth-child(16) { left: 67%; animation-duration: 26s; animation-delay: -20s; width: 3px; height: 3px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(14px) drop-shadow(0 0 0 transparent); }
  to { opacity: 1; transform: none; }
}
@keyframes sheen {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}
@keyframes blink {
  0%, 100% { opacity: .18; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-.06em); }
  60% { opacity: .9; transform: translateY(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift-a { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes drift-b { to { transform: translate(-12vmax, -8vmax) scale(.92); } }
@keyframes drift-c { from { transform: translate(-50%, -50%) scale(.9); } to { transform: translate(-20%, -70%) scale(1.15); } }
@keyframes pan { to { background-position: 64px 64px; } }
@keyframes breathe {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes float {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: .85; }
  80% { opacity: .5; }
  100% { transform: translateY(-112vh) rotate(180deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .dots span { opacity: 1; }
}