/* 🌸 Gradient animated background */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

/* background animation */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.container {
  position: relative;
  text-align: center;
}

.title {
  color: white;
  font-size: 2.8rem;
  text-shadow: 0px 0px 15px rgba(255,255,255,0.8);
  z-index: 2;
  position: relative;
}

/* stars floating */
.star {
  aspect-ratio: 1;
  object-fit: cover;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px 10px 25px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}

.star:hover {
  transform: scale(1.15);
}

/* float animation */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

/* scatter positions (like stars around heading) */
.float1 { top: -80px; left: -290px; animation: float 4s ease-in-out infinite; }
.float2 { top: -240px; right: -140px; animation: float 6s ease-in-out infinite; }
.float3 { top: 190px; left: -130px; animation: float 5s ease-in-out infinite; }
.float4 { top: 250px; right: -190px; animation: float 7s ease-in-out infinite; }
.float5 { bottom: 220px; left: -100px; animation: float 8s ease-in-out infinite; }
.float6 { bottom: -140px; right: -320px; animation: float 10s ease-in-out infinite; }