/* style.css */
body {
  font-family: "system-ui", sans-serif;
  background: linear-gradient(165deg, #0a0b0be0, #060d44eb); /* Dark blue to steel blue gradient */
  color: rgb(111, 108, 134);
  text-align: center;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(270deg, #0a0b0be0, #060d44eb, #0a0b0be0, #060d44eb);
  background-size: 400% 400%;
  animation: GradientWave 8s ease infinite;
  
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 3rem;
  margin-bottom: 0.5em;
}

p {
  font-size: 1.5rem;
  margin-bottom: 1.5em;
}

a {
  display: inline-block;
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 1.2rem;
  text-decoration: none;
  color: #1f1f21;
  background-color: #acadb4;
  border-radius: 25px;
  box-shadow: 0 5px 15px rgba(54, 43, 43, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(76, 74, 74, 0.3);
}

.fa-github,
.fa-twitter {
  margin-right: 8px;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

h1.pulsate {
  animation: pulsate 2s infinite;
}

.splash__bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0; /* Set to 0 to ensure content on top is clickable */
  overflow: hidden;
}

/* Additional styles for the interactive background */
#interactive-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Ensure it stays in the background */
  transition: background 0.5s ease; /* Smooth transition for gradient changes */
}

.splash__bg:hover, #interactive-background:hover {
  background: inherit; /* Or set this to a specific style you want on hover */
}

@keyframes movingGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* AR projection-like text styles */
.ar-text {
  color: rgba(198, 212, 217, 0.9); /* Light blue color with transparency */
  text-shadow: 0 0 10px rgba(173, 216, 230, 0.1), /* Horizontal shadow */
               0 0 20px rgba(173, 216, 230, 0.1), /* Vertical shadow */
               0 0 30px rgba(173, 216, 230, 0.1), /* Blur radius */
               0 0 40px rgba(173, 216, 230, 0.1); /* Color and spread */
  animation: pulsateGlow 6s ease-in-out infinite;
}

@keyframes pulsateGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(173, 216, 230, 0.1), 
                 0 0 20px rgba(173, 216, 230, 0.1), 
                 0 0 30px rgba(173, 216, 230, 0.1), 
                 0 0 40px rgba(173, 216, 230, 0.1);
  }
  50% {
    text-shadow: 0 0 15px rgba(173, 216, 230, 0.65), 
                 0 0 25px rgba(173, 216, 230, 0.65), 
                 0 0 35px rgba(173, 216, 230, 0.65), 
                 0 0 45px rgba(173, 216, 230, 0.65);
  }
}

@keyframes GradientWave {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 50% 0%;
  }
}