@import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Michroma", sans-serif;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
}

.container {
  background-color: rgb(255, 255, 255);
  color: #005BCE;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.loading-page {
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* ADD THIS LINE: Prepares the curtain mask for the wipe effect */
  clip-path: inset(0% 0% 0% 0%);
}

/* Flexbox keeps the logo perfectly centered at all times */
.logo-container {
  position: relative;
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: center;
  height: 15vh;
  width: 100vw;
}

#svg-logo {
  height: 64%; /* Kept the size you liked! */
  width: auto;
  flex-shrink: 0;
  
  /* THE TWEAK: This moves ONLY the logo up by 15 pixels */
  transform: translate(0.5px, -3.75px); 
}

#svg-logo path {
  stroke: #005BCE;
  stroke-width: 0.8px;
  fill-opacity: 0;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  
  /* Animations */
  animation-name: draw, fillFade, fadeStroke;
  
  /* THE TWEAK: Stroke is 1.5s. Color fade is 1s. */
  animation-duration: 1.5s, 1s, 1s; 
  
  animation-timing-function: linear, ease, ease; 
  
  /* Stroke finishes at 1.5s. 
     Wait 0.2s for the pause. 
     The fade begins exactly at 1.7s! */
  animation-delay: 0s, 1.7s, 1.8s; 
  
  animation-fill-mode: forwards, forwards, forwards;
  animation-iteration-count: 1, 1, 1; 
}

#svg-logo .st0 { fill: #2f3192; }
#svg-logo .st1 { fill: #00adef; }

/* Wrapper handles the right-to-left wipe naturally */
.text-wrapper {
  height: 80%;
  width: 0px; /* Starts completely hidden */
  margin-left: 0px; 
  overflow: hidden; 
  display: flex;
  align-items: center;
  justify-content: flex-end; /* This forces the right-to-left wipe effect */
}

#svg-text {
  height: 100%;
  width: 25vh; 
  flex-shrink: 0; 
}

#svg-text .st2 {
  fill: #2e368f;
  font-family: 'Poppins', sans-serif;
  font-size: 10.62px;
  font-weight: 600;
}

#svg-text .st3 {
  fill: #231f20;
  stroke: #2aace2;
  stroke-miterlimit: 10;
}

/* Keyframes */
@keyframes draw { 100% { stroke-dashoffset: 0; } }
@keyframes fillFade { 100% { fill-opacity: 1; } }
@keyframes fadeStroke { 100% { stroke-opacity: 0; } }