:root {
  --angle-start: 45deg;
  --angle-end: 405deg;
}

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

body,
html {
  height: 100%;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
}

/* animated background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center,
    #ff3cac 0%,
    #784ba0 40%,
    #2b86c5 100%);
  animation: spin 18s linear infinite;
  z-index: -2;
  transform: scale(1.2); /* avoid edge banding */
}

/* ripple on click */
body:active::before {
  animation: ripple .7s ease-out;
}

@keyframes spin {
  to { filter: hue-rotate(360deg); }
}

@keyframes ripple {
  0%   { transform: scale(1.2); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1.2); }
}

/* centered container */
main { text-align: center; color: #fff; }

/* animated gradient text */
h1 {
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 8rem);
  background: linear-gradient(var(--angle-start), #fff 0%, #eee 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: textHue 18s linear infinite;
}

@keyframes textHue {
  to { filter: hue-rotate(360deg); }
}

p {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  opacity: 0;
  animation: fadeIn 1s ease forwards 1s;
}

@keyframes fadeIn { to { opacity: 0.8; } }