:root {
  --bg: #f5c518;
  --bg-deep: #e8b50f;
  --ink: #0a0a0a;
  --ink-soft: #1d1d1d;
  --paper: #fafafa;
  --grid-line: rgba(10, 10, 10, 0.08);
  --grid-line-strong: rgba(10, 10, 10, 0.14);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(
      ellipse at 50% 40%,
      var(--bg) 0%,
      var(--bg-deep) 100%
    );
  min-height: 100svh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide the system cursor only after JS has confirmed the UFO is in place.
   If the script fails or the SVG can't load, this class never gets added,
   so the user keeps a normal cursor instead of seeing nothing. */
body.ufo-active {
  cursor: none;
}

/* crosshatch grid paper */
.grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  mask-image: radial-gradient(
    ellipse at 50% 45%,
    black 45%,
    transparent 95%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 45%,
    black 45%,
    transparent 95%
  );
  z-index: 0;
}

.stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}

.logo-box {
  background: var(--ink);
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: 4px;
  box-shadow: 0 18px 40px -20px rgba(10, 10, 10, 0.55),
    0 2px 0 0 rgba(255, 255, 255, 0.04) inset;
  transform: translateZ(0);
  animation: floatBox 6s ease-in-out infinite;
}

.logo-box h1 {
  font-weight: 800;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.mark {
  color: var(--bg);
}

.dot {
  color: var(--bg);
  display: inline-block;
  transform: translateY(-2px);
}

.tld {
  color: var(--paper);
  font-weight: 700;
}

.tagline {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--ink);
  letter-spacing: 0.01em;
  font-weight: 500;
  opacity: 1;
  animation: pulse 3.2s ease-in-out infinite;
  user-select: none;
}

@keyframes floatBox {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* UFO cursor */
#ufo {
  position: fixed;
  top: 0;
  left: 0;
  width: 72px;
  height: 60px;
  pointer-events: none;
  z-index: 50;
  transform: translate(-50%, -55%);
  will-change: transform, left, top;
  filter: drop-shadow(0 8px 10px rgba(10, 10, 10, 0.25));
  transition: filter 0.2s ease;
}

#ufo img {
  width: 100%;
  height: 100%;
  display: block;
  animation: hover 1.6s ease-in-out infinite;
}

@keyframes hover {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-3px) rotate(1deg); }
}

#ufo.boost img {
  animation-duration: 0.6s;
}

/* falling tokens */
#tokens {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.token {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c2 0%, #f5c518 55%, #a87f05 100%);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.35),
    0 0 8px rgba(245, 197, 24, 0.55);
  will-change: transform, opacity;
  animation: drop 1.8s cubic-bezier(0.4, 0.05, 0.6, 1) forwards;
}

@keyframes drop {
  0% {
    transform: translate(var(--dx, 0), 0) scale(1);
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--dx, 0), 60vh) scale(0.6);
    opacity: 0;
  }
}

/* touch / no-hover fallback — keep system cursor and hide UFO */
@media (hover: none), (pointer: coarse) {
  body.ufo-active { cursor: auto; }
  #ufo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-box, .tagline, #ufo img { animation: none; }
  .token { animation-duration: 0.01s; opacity: 0; }
}