/* wp-content/plugins/custom-loading-screen-final/style.css */


body.loaded .logo-loader {
  animation: logoShrink 0.1s ease forwards;
}

body.loaded #loader {
  animation: slideUp 0.1s ease 0.05s forwards; /* delay 추가 */
}

/* body.loaded #main, 
body.loaded header, 
body.loaded footer {
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
} */

@keyframes slideUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 1;
    visibility: hidden;
  }
}

@keyframes logoShrink {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(0.3); opacity: 0; }
}

#loader {
  position: fixed;
  z-index: 9999;
  background: #111;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s ease;
}

.logo-loader {
  position: relative;
  width: 130px;
  height: 112px;

  background-color: #cccccc; /* ✅ 기본 로고 색상 */
  mask-image: url('loding.svg');
  -webkit-mask-image: url('loding.svg');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  overflow: hidden;
}

.logo-loader .fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%; /* 고정 */
  background-color: #006ddb;
  transform: scaleY(0); /* 시작 상태 */
  transform-origin: bottom;
  animation: fillUp 1s ease-in-out forwards;
  z-index: 2;
}

@keyframes fillUp {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}