/* Import a futuristic font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* Basic setup and Vanta.js container */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hide overflow from Vanta.js */
    font-family: 'Orbitron', sans-serif; /* Apply the futuristic font */
}

#vanta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* Place the Vanta.js background behind other content */
}

/* Flexbox container for centering content */
.content-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative; /* Position relative to allow z-index layering */
    z-index: 1; /* Ensure content is on top of the background */
    flex-direction: column;
}

/* Custom logo styling */
.logo-container {
    position: absolute;
    top: 10%;
    left: 5%; /* Adjust left position for left-middle section */
    transform: translateY(-50%); /* Vertically center the logo */
}

.custom-logo {
    width: 300px; /* Adjust size as needed */
    height: auto;
    filter: drop-shadow(0 0 10px #0ff); /* Add a glowing effect to the logo */
}

/* Text styling */
.text-container {
    position: absolute;
    top: 40%; /* Adjust top position for top-middle section */
    left: 20%;
    /* text-align: center; */
    width: 100%;
}

.stay-tuned-text {
    font-size: 3rem;
    color: #0ff; /* Cyan color for a futuristic glow */
    text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
    letter-spacing: 5px;
    text-transform: uppercase;
    /*animation: buzz 0.5s infinite alternate; /* Apply the buzz animation */
    animation: blur-animation 5s infinite alternate; /* Adjust duration, iteration, and direction */
}

@keyframes blur-animation {
  0% {
    filter: blur(0px); /* Start clear */
  }
  50% {
    filter: blur(3px); /* Max blur at midpoint */
  }
  100% {
    filter: blur(0px); /* End clear */
  }
}

/* Buzz keyframe animation */
@keyframes buzz {
    0% {
        transform: translateX(-2px) rotate(0deg);
    }
    25% {
        transform: translateX(2px) rotate(1deg);
    }
    50% {
        transform: translateX(-1px) rotate(-1deg);
    }
    75% {
        transform: translateX(1px) rotate(1deg);
    }
    100% {
        transform: translateX(-2px) rotate(-1deg);
    }
}