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

body {
  background-color: #050d06;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Share Tech Mono", monospace;
  overflow: hidden;
  cursor: default;
}

body::before {
  content: "";
  position: fixed;
  inset: -20px;
  background: url("../assets/background.png") no-repeat center center;
  background-size: cover;
  filter: blur(6px);
  opacity: 0.6;
  pointer-events: none;
}

canvas {
  position: fixed;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 65, 0.012) 2px,
      rgba(0, 255, 65, 0.012) 4px);
  pointer-events: none;
}

.center {
  position: relative;
  z-index: 1;
  text-align: center;
  user-select: none;
}

.mbg {
  font-family: "Orbitron", sans-serif;
  font-weight: 900;
  font-size: clamp(5rem, 20vw, 14rem);
  color: #00ff41;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow:
    0 0 60px rgba(0, 255, 65, 0.25),
    0 0 120px rgba(0, 255, 65, 0.1);
  animation: pulse 4s ease-in-out infinite;
  position: relative;
}

@keyframes pulse {
  0%,
  100% {
    text-shadow:
      0 0 60px rgba(0, 255, 65, 0.25),
      0 0 120px rgba(0, 255, 65, 0.1);
  }
  50% {
    text-shadow:
      0 0 80px rgba(0, 255, 65, 0.4),
      0 0 160px rgba(0, 255, 65, 0.2);
  }
}

.mbg::before {
  content: "MBG";
  position: absolute;
  inset: 0;
  color: #ff003c;
  animation: glitch-r 5s infinite;
  clip-path: inset(0 0 70% 0);
}

.mbg::after {
  content: "MBG";
  position: absolute;
  inset: 0;
  color: #00ffff;
  animation: glitch-b 5s infinite 0.15s;
  clip-path: inset(70% 0 0 0);
}

@keyframes glitch-r {
  0%,
  88%,
  100% {
    transform: none;
    opacity: 0;
  }
  89% {
    transform: translate(-5px, 2px);
    opacity: 1;
  }
  91% {
    transform: translate(3px);
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
}

@keyframes glitch-b {
  0%,
  88%,
  100% {
    transform: none;
    opacity: 0;
  }
  89% {
    transform: translate(5px, -2px);
    opacity: 1;
  }
  91% {
    transform: translate(-3px);
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
}

.tagline {
  font-size: clamp(0.55rem, 2vw, 0.85rem);
  color: #3a6b3c;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-top: 0.8rem;
}

.joke {
  margin-top: 2.5rem;
  font-size: clamp(0.6rem, 1.5vw, 0.8rem);
  color: #1e4020;
  letter-spacing: 0.15em;
  border: 1px solid #0f2710;
  display: inline-block;
  padding: 0.5rem 1.5rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    color 0.3s,
    border-color 0.3s;
}

.joke:hover {
  color: #00ff41;
  border-color: #1a3d1c;
}

.joke span {
  color: #ff003c;
}

.dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00ff41;
  margin-bottom: 0.2rem;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

#grayscale-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  backdrop-filter: grayscale(100%);
  -webkit-backdrop-filter: grayscale(100%);
  mask-image: radial-gradient(circle 350px at var(--x, -1000px) var(--y, -1000px), transparent 0%, black 100%);
  -webkit-mask-image: radial-gradient(circle 350px at var(--x, -1000px) var(--y, -1000px), transparent 0%, black 100%);
}