/* CSS Variables for easy color management */
:root {
  --color-primary: #5639fe; /* Purple (used in logo gradient) */
  --color-secondary: #66e8fd; /* Light blue (used in logo gradient) */
  --color-text: #070b54; /* Deep navy for text */
  --font-family: "Poppins", sans-serif;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: #ffffff; /* White background */
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text);
  position: relative;
}

/* Fireworks canvas behind content */
#fireworks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Container for the logo + text
     Fades up into place */
.coming-soon-container {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: containerSlideUpFade 1.5s ease-in-out forwards 1s;
}

@keyframes containerSlideUpFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smaller logo with float animation */
.interviu-logo {
  width: 90px; /* Reduced size */
  margin-bottom: 15px;
  animation: floatLogo 3s ease-in-out infinite;
}

@keyframes floatLogo {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Main heading in #070B54 (no gradient) */
.company-name {
  font-size: 2.5rem; /* Smaller than previous 3rem */
  color: var(--color-text);
  margin-bottom: 10px;
}

/* "Coming Soon" text in #070B54 with a perpetual "breathe" animation */
.coming-soon-text {
  font-size: 1.2rem;
  color: var(--color-text);
  animation: breathe 3s ease-in-out infinite; /* starts after container fade-in finishes */
}

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

/* Example styles for an error page (if used) */
.error-container {
  text-align: center;
  padding: 20px;
}

.error-code {
  font-size: 3rem;
  margin-bottom: 10px;
  color: var(--color-text);
}

.error-message {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: var(--color-text);
}

.error-link {
  font-size: 1rem;
  text-decoration: none;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  padding: 8px 16px;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.error-link:hover {
  background-color: var(--color-text);
  color: #ffffff;
}