/* Full-screen background */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #222222;
}

.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* click-through */
}

/* Fade-in centered main text */
.fade-in-text {
  position: absolute;
  top: 45%; /* slightly above center for balance with subtext */
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-family: sans-serif;
  font-size: 3rem;
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}

/* Fade-in subtext */
.fade-in-subtext {
  position: absolute;
  top: 50%; /* moved up from 55% for tighter spacing */
  left: 50%;
  transform: translate(-50%, -50%);
  color: #bbbbbb;
  font-family: sans-serif;
  font-size: 1.5rem;
  opacity: 0;
  animation: fadeInSub 2s ease-in-out forwards, fadeOutSub 1s ease-in-out forwards 3s;
}

/* Styling for cycling phrases */
.cycling-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #cccccc;
  font-family: sans-serif;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Keyframes for main fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Keyframes for subtext fade-in animation */
@keyframes fadeInSub {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Keyframes for subtext fade-out animation */
@keyframes fadeOutSub {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
}

@media only screen and (max-width: 600px) {
  .fade-in-text {
    font-size: 2rem;
    top: 40%;
    padding: 0 1rem;
  }
  .fade-in-subtext {
    font-size: 1rem;
    top: 46%;
    padding: 0 1rem;
  }
  .cycling-text {
    font-size: 0.9rem;
    top: 50%;
    padding: 0 1rem;
  }
}