:root {
  --black: #050403;
  --gold-1: #FFF3B0;   /* highlight */
  --gold-2: #FFD84D;   /* body gold */
  --gold-3: #E8A400;   /* deep gold */
  --gold-4: #8A5A00;   /* shadow gold */
  --faint: rgba(255, 216, 77, 0.38);
}

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

html, body { height: 100%; }

body {
  background: var(--black);
  color: var(--gold-2);
  font-family: 'Unbounded', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 14vh;   /* lifts the logo and text above center */
  overflow: hidden;
  cursor: default;
  /* faint gold glow rising from the bottom, like light off a vault floor */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 115%, rgba(232, 164, 0, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(255, 216, 77, 0.05), transparent 70%);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- logo ---------- */
.logo {
  width: min(230px, 52vw);
  image-rendering: pixelated;          /* keep the pixel art crisp when scaled */
  filter: drop-shadow(0 18px 40px rgba(232, 164, 0, 0.35));
  animation: bob 4.5s ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
}

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

/* ---------- wordmark ---------- */
h1 {
  margin-top: 28px;
  font-weight: 900;
  font-size: clamp(2.4rem, 9vw, 5.2rem);
  letter-spacing: -0.02em;
  line-height: 1;
  /* metallic gold text with a travelling sheen */
  background: linear-gradient(
    100deg,
    var(--gold-4) 0%,
    var(--gold-3) 22%,
    var(--gold-2) 40%,
    var(--gold-1) 50%,
    var(--gold-2) 60%,
    var(--gold-3) 78%,
    var(--gold-4) 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 5s linear infinite;
  filter: drop-shadow(0 0 22px rgba(255, 216, 77, 0.28));
}

@keyframes sheen {
  from { background-position: 200% 0; }
  to   { background-position: -40% 0; }
}

/* ---------- coming soon ---------- */
.coming-soon {
  margin-top: 30px;
  font-family: 'Press Start 2P', monospace;   /* echoes the pixel-art bars */
  font-size: clamp(0.7rem, 2.6vw, 1.05rem);
  letter-spacing: 0.45em;
  padding-left: 0.45em;                        /* re-center the letterspacing */
  color: var(--gold-2);
  text-shadow: 0 0 14px rgba(255, 216, 77, 0.45);
  animation: blink 2.4s steps(1) infinite;
}

@keyframes blink {
  0%, 78% { opacity: 1; }
  79%, 84% { opacity: 0.25; }
  85%, 100% { opacity: 1; }
}

/* ---------- tagline ---------- */
.tagline {
  margin-top: 22px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(0.8rem, 2.4vw, 0.95rem);
  color: var(--faint);
  letter-spacing: 0.04em;
}

/* ---------- mute button ---------- */
.mute-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: none;
  border: none;
  color: var(--gold-2);
  cursor: pointer;
  transition: color 0.2s, filter 0.2s;
}

.mute-btn:hover,
.mute-btn:focus-visible {
  color: var(--gold-1);
  filter: drop-shadow(0 0 10px rgba(255, 216, 77, 0.5));
  outline: none;
}

.mute-btn.muted {
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  .logo, h1, .coming-soon, main { animation: none; }
}