#logo-loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#logo-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.logo-loader-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.logo-loader-img {
  width: 160px;
  height: auto;
  opacity: 0;
  transform: scale(0.6);
  animation: logoExpand 1.8s ease-out forwards;
}


.logo-loader-content::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,182,193,0.45) 0%, rgba(255,218,185,0.25) 50%, transparent 70%);
  border-radius: 50%;
  filter: blur(12px);
  opacity: 0;
  transform: scale(0.3);
  animation: watercolorExpand 1.8s ease-out forwards;
  z-index: -1;
}


@keyframes logoExpand {
  0% {
    opacity: 0;
    transform: scale(0.5) translate(0, 0);
  }
  35% {
    opacity: 1;
    transform: scale(1.15) translate(0, 0);
  }
  70% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  100% {
    opacity: 0.9;
    transform: scale(0.55) translate(-42vw, -42vh);
  }
}


@keyframes watercolorExpand {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  40% {
    opacity: 0.7;
    transform: scale(1.3);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}


@media (max-width: 768px) {
  .logo-loader-img {
    width: 120px;
  }

  .logo-loader-content::before {
    width: 170px;
    height: 170px;
  }

  @keyframes logoExpand {
    0% {
      opacity: 0;
      transform: scale(0.5) translate(0, 0);
    }
    35% {
      opacity: 1;
      transform: scale(1.1) translate(0, 0);
    }
    70% {
      opacity: 1;
      transform: scale(1) translate(0, 0);
    }
    100% {
      opacity: 0.9;
      transform: scale(0.5) translate(-38vw, -40vh);
    }
  }
}/* CSS Document */