/* ========== RESET ========== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== BODY ========== */
html {
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 16px;
}
body {
  min-height: 100vh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center */
  text-align: center;
  background: linear-gradient(135deg, #361a30, #1a001a, #222222) center/400% 400% no-repeat;
  animation: backgroundShift 30s ease infinite;
  color: #ffcc00;
}

/* ========== ANIMATIONS ========== */
@keyframes backgroundShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes bowlWobble {
  0%,50%,100% { transform: rotate(-2deg); }
  25%,75%     { transform: rotate(2deg);  }
}
@keyframes steamRise {
  0%   { transform: translate(-50%, 0) scale(1);   opacity: 0;   }
  10%  { opacity: 0.6; }
  50%  { transform: translate(-50%, -80px) scale(1.1); opacity: 0.4; }
  100% { transform: translate(-50%, -260px) scale(1.2); opacity: 0;   }
}

/* ========== CONTAINER ========== */
.container {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;  /* always leave side-padding */
}

/* ========== LOGO ========== */
.logo-wrapper {
  position: relative;
  margin-bottom: 1rem;
}
.logo {
  width: clamp(120px, 30vw, 200px);
  filter: drop-shadow(0 0 10px #ff00aa);
  transform-origin: center bottom;
  animation: bowlWobble 4s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
}
.logo-wrapper::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(170,170,170,0.6) 0%, transparent 70%);
  filter: blur(6px);
  opacity: 0.6;
  animation: steamRise 7s ease-in-out infinite;
  pointer-events: none;
}

/* ========== TYPOGRAPHY ========== */
h1 {
  font-size: clamp(2rem, 8vw, 3rem);
  color: #ff00aa;
  text-shadow: 0 0 8px #ff00aa;
  margin-bottom: 0.5rem;
  white-space: normal;  /* allow wrapping */
}
.lead {
  font-size: clamp(1rem, 4vw, 1.25rem);
  color: #ffee58;
  line-height: 1.4;
  margin: 1rem 0;
  padding: 0 1rem;
  white-space: normal;
  overflow-wrap: break-word;
}

/* ========== FORM (if you ever re-enable it) ========== */
form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
input[type="email"],
button {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 4px #ff00aa;
}
input[type="email"] {
  background: #222;
  color: #fff;
}
button {
  background: #ff00aa;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover {
  background: #ff33bb;
}

/* ========== FOOTER ========== */
footer {
  margin-top: 1rem;
  font-size: clamp(0.75rem, 2.5vw, 0.875rem);
  color: #666;
}
footer a {
  color: #999;
}
footer a:hover {
  color: #ff00aa;
}