/* ============================================================
   SlopVibe — Coming Soon
   Palette: vivid yellow #FFEA00 + near-black #0A0A0A
   ============================================================ */

:root {
  --yellow: #ffea00;
  --yellow-soft: #fff35c;
  --black: #0a0a0a;
  --ink: #0a0a0a;
  --paper: #f5f5f2;
  --muted: rgba(245, 245, 242, 0.62);
  --line: rgba(255, 234, 0, 0.22);
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--paper);
  background-color: var(--black);
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255, 234, 0, 0.16), transparent 42%),
    url("/assets/bg-grid.png");
  background-size: auto, 640px 360px;
  background-position: center top, center;
  background-repeat: no-repeat, repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  position: relative;
}

/* ---------- Layout ---------- */
.stage {
  width: 100%;
  max-width: 760px;
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brandmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--paper);
}
.brandmark__accent { color: var(--yellow); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  border: 1px solid var(--line);
  background: rgba(255, 234, 0, 0.06);
  padding: 7px 14px;
  border-radius: 999px;
}
.badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 0 rgba(255, 234, 0, 0.55);
  animation: pulse 2.2s ease-out infinite;
}

/* ---------- Hero ---------- */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 36px 0;
}

.mascot { position: relative; }
.mascot__img {
  width: clamp(120px, 22vw, 180px);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
  animation: float 5.5s ease-in-out infinite;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-top: -4px;
}

.tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  color: var(--yellow);
}

.subtag {
  max-width: 52ch;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--muted);
}
.subtag strong { color: var(--paper); }

/* ---------- Chips ---------- */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.chip {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--paper);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 15px;
  border-radius: 999px;
  transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.chip:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  transform: translateY(-2px);
}

.about {
  max-width: 50ch;
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}
.about strong { color: var(--paper); }

/* ---------- CTA ---------- */
.cta { margin-top: 8px; }
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn--primary {
  color: var(--black);
  background: var(--yellow);
  box-shadow: 0 10px 30px rgba(255, 234, 0, 0.28);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background: var(--yellow-soft);
  box-shadow: 0 16px 40px rgba(255, 234, 0, 0.4);
}
.btn--primary:active { transform: translateY(0); }

/* ---------- Links ---------- */
.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 6px;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s ease;
}
.link svg { color: var(--muted); transition: color 0.2s ease; }
.link:hover, .link:hover svg { color: var(--yellow); }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--muted);
  padding-top: 18px;
}
.footer__dot { opacity: 0.5; }

/* ---------- Decorative accents ---------- */
.accent {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  will-change: transform;
}
.accent--sparkle { width: 42px; }
.accent--bolt { width: 30px; }
.accent--1 { top: 16%; left: 9%; }
.accent--2 { top: 26%; right: 11%; }
.accent--3 { bottom: 18%; right: 14%; width: 30px; }
.accent--4 { bottom: 22%; left: 12%; }

.stage { position: relative; z-index: 1; }

/* ---------- Animations ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 234, 0, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(255, 234, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 234, 0, 0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .accent--1, .accent--4 { left: 4%; }
  .accent--2, .accent--3 { right: 4%; }
  .accent--sparkle { width: 30px; }
  .accent--bolt { width: 22px; }
  .links { gap: 8px 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mascot__img, .badge__dot { animation: none; }
  .accent { display: none; }
  * { transition: none !important; }
}