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



body, html {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111; 
  font-family: "Montserrat", sans-serif;
  position: relative;
  overflow: hidden;
}




.splash {
  text-align: center;
  color: #fff;
  animation: fadeOut 2s ease forwards 4s;
}




.splash h1 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}




.logos {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2c1c66;
  box-shadow: 0px 0px 10px rgba(255,255,255,0.5);
  transition: transform 0.6s ease-in-out;
}

.logo:hover {
  transform: scale(1.1);
}




.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

.fade-in-delay {
  opacity: 0;
  animation: fadeIn 2s 1s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}




@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(0.95);
    visibility: hidden;
  }
}




.signature {
  position: absolute;
  font-size: 2rem;
  color: rgba(255,255,255,0.7);
  opacity: 0;
  text-align: center;
  animation: signatureCycle 2s ease forwards 5.5s;
}

.imperial-script {
  font-family: "Raleway", serif;
  font-weight: 400;
  font-style: normal;
}

@keyframes signatureCycle {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}