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

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow: hidden;
}

/* Stage: positioning context for robot + card */
.stage {
  position: relative;
}

/* Robot — z-index 1 so .border-wrap (z-index 2) hides its lower body while peeking */
.robot {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%) translateY(-110%);
  animation: peek 10s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes peek {
  0%,  20% { transform: translateX(-50%) translateY(-110%); }
  30%       { transform: translateX(-50%) translateY(-40%) rotate(-4deg); }
  37%       { transform: translateX(-50%) translateY(-48%) rotate(4deg); }
  44%, 64%  { transform: translateX(-50%) translateY(-44%) rotate(0deg); }
  78%       { transform: translateX(-50%) translateY(-110%); }
  100%      { transform: translateX(-50%) translateY(-110%); }
}

/* Border wrapper — padding=4px + gradient background = shimmering border */
.border-wrap {
  position: relative;
  z-index: 2;
  padding: 4px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    #ff006e, #ff8c00, #ffe100, #00d4aa, #0077ff, #9b00ff, #ff006e
  );
  background-size: 400% 400%;
  animation: shimmer 5s ease-in-out infinite;
  box-shadow:
    0 0 24px rgba(255, 0, 110, 0.4),
    0 0 48px rgba(0, 119, 255, 0.3),
    0 0 72px rgba(155, 0, 255, 0.2);
}

@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Card interior */
.card {
  background: #080808;
  border-radius: 14px;
  padding: 2.8rem 5rem;
  text-align: center;
}

h1 {
  font-size: clamp(1.1rem, 2.8vw, 1.75rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}