/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap');

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

body {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 196, 0, 0.45), transparent 25%),
    radial-gradient(circle at 80% 25%, rgba(0, 153, 255, 0.5), transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(255, 0, 140, 0.4), transparent 30%),
    radial-gradient(circle at 30% 75%, rgba(0, 255, 170, 0.35), transparent 25%),
    linear-gradient(135deg, #091540 0%, #122d68 35%, #1f4287 60%, #0f1c3f 100%);
  background-size: cover;
}

/* Oil-paint texture overlay */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(
      circle at center,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.02) 3px,
      transparent 6px,
      transparent 12px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.01) 4px,
      transparent 8px,
      transparent 16px
    );
  mix-blend-mode: soft-light;
  opacity: 0.9;
  pointer-events: none;
}

/* Subtle Starry Night swirls */
body::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 40%);
  filter: blur(80px);
  animation: swirl 18s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.hero h1 {
  color: white;
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  text-transform: lowercase;
  text-shadow:
    0 0 10px rgba(255,255,255,0.15),
    0 0 30px rgba(255,255,255,0.08),
    0 0 60px rgba(255,255,255,0.05);
  user-select: none;
}

@keyframes swirl {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.08);
  }
}