html {
  height: 100%;
  background: url("imgs/stars.png") repeat;
  background-size: cover;
  background-color: #000;
  z-index: 0;
  animation: starScroll 120s linear infinite; /* drifting stars */
  overflow: hidden;
  position: relative;
}

/* floating ambience haze */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(64, 128, 255, 0.15), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(128, 0, 255, 0.15), transparent 60%),
              radial-gradient(circle at 50% 90%, rgba(0, 200, 150, 0.1), transparent 70%);
  animation: ambience 40s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

/* scattered twinkling stars */
html::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 
    -400px -200px rgba(255,255,255,0.8),
     300px -250px rgba(255,255,255,0.6),
    -250px  150px rgba(255,255,255,0.7),
     120px  220px rgba(255,255,255,0.9),
    -100px -350px rgba(255,255,255,0.5),
     400px  300px rgba(255,255,255,0.8),
    -320px  280px rgba(255,255,255,0.6),
     200px -100px rgba(255,255,255,0.7);
  animation: twinkle 6s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

@keyframes starScroll {
  from { background-position: 0 0; }
  to   { background-position: -8000px 4000px; }
}

@keyframes ambience {
  0%   { transform: scale(1) translate(0,0); filter: hue-rotate(0deg); }
  50%  { transform: scale(1.2) translate(10px, -20px); filter: hue-rotate(40deg); }
  100% { transform: scale(1) translate(-10px, 20px); filter: hue-rotate(-20deg); }
}

@keyframes twinkle {
  0%   { opacity: 0.4; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.3); }
  100% { opacity: 0.6; transform: scale(1); }
}



/* --- Logo: slow dreamy rise */
.logo {
  opacity: 0;
  transform: translateY(40px);
  animation: slideUp 2.4s ease-in-out forwards;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
  }
  60% {
    opacity: 0.6;
    transform: translateY(12px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* --- Sound Control: gentle fade from above */
.soundControl {
  opacity: 0;
  transform: translateY(-40px);
  animation: fadeDown 2.8s ease-in-out forwards;
  animation-delay: 1s; /* staggered, arrives later */
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
    filter: blur(8px);
  }
  60% {
    opacity: 0.6;
    transform: translateY(-12px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


.circle {
  position: fixed;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 180px;
  background-color: #000000;
  border-radius: 30%;
  transition: all 0.4s ease;
  z-index: 10;
  cursor: pointer;
}

/* Expanded state */
.circle.expanded {
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 0 0;
  bottom: 0;
  left: 0;
  text-align: center;
  transform: none;
}

/* Glow effect */
.circle.glow {
  animation: glowPulse 3s ease-out 2s; /* duration 1s, delay 2s */
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 0px rgba(0, 200, 255, 0);
  }
  40% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 0px rgba(0, 200, 255, 0);
  }
}


@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(-20px);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateY(0);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}



.stars {
  width: 2px;
  height: 2px;
  background: white;
  position: absolute;
  top: 0;
  left: 50%;
  box-shadow: 
    -100px -200px white,
    200px 300px white,
    -300px 100px white,
    400px -100px white,
    -250px 250px white,
    150px -350px white,
    -400px -150px white,
    350px 200px white;
  animation: twinkle 2s infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}