/* ================================= 
   SALON LOADER - EZEE CUT
   3D Origami Bird & Luxury Brand Experience
================================= */ 
 
.salon-loader { 
  position: fixed; 
  inset: 0; 
  z-index: 99999; 
 
  display: flex; 
  justify-content: center; 
  align-items: center; 
 
  background: 
    radial-gradient( 
      circle at center, 
      #fff7fb 0%, 
      #f9e8f0 55%, 
      #efd2df 100% 
    ); 
 
  transition: 
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
    visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
  
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
} 
 
.salon-loader.hide { 
  opacity: 0; 
  visibility: hidden; 
  pointer-events: none; 
} 
 
/* ================================= 
   LOADER CONTENT 
================================= */ 
 
.loader-content { 
  text-align: center; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  position: relative;
} 
 
/* ================================= 
   BIRD SCENE 
================================= */ 
 
.bird-scene { 
  width: 280px; 
  height: 180px; 
 
  display: flex; 
  justify-content: center; 
  align-items: center; 
 
  overflow: visible; 
  margin: 0 auto;
} 
 
.bird-scene #sky { 
  perspective: 400px; 
  filter: 
    drop-shadow( 
      0 25px 15px rgba(100, 30, 70, 0.18) 
    ); 
} 
 
.bird-scene #sky div { 
  transform-style: preserve-3d; 
} 
 
/* ================================= 
   BIRD 
================================= */ 
 
.bird-scene .bird { 
  position: relative; 
  animation: fly 4s linear infinite; 
} 
 
/* ================================= 
   WIND 
================================= */ 
 
.bird-scene .wind { 
  position: absolute; 
  left: 50%; 
  width: 3px; 
  height: 130px; 
  margin-left: -2px; 
  border-radius: 999px; 
  overflow: hidden; 
} 
 
.bird-scene .wind::before { 
  content: ""; 
  position: absolute; 
  width: 3px; 
  height: 180px; 
  background: 
    linear-gradient( 
      to bottom, 
      transparent, 
      rgba(190, 80, 130, 0.3), 
      transparent 
    ); 
  border-radius: 999px; 
  transform: translateY(-180px); 
  animation: wind 1.8s linear infinite; 
} 
 
/* WIND POSITIONS */ 
 
.bird-scene .wind:nth-child(1) { 
  transform: 
    translate3d(-80px, -40px, -20px) 
    rotateY(90deg); 
} 
 
.bird-scene .wind:nth-child(2) { 
  transform: 
    translate3d(-30px, -70px, -60px) 
    rotateY(90deg); 
} 
 
.bird-scene .wind:nth-child(3) { 
  transform: 
    translate3d(30px, -30px, 20px) 
    rotateY(90deg); 
} 
 
.bird-scene .wind:nth-child(4) { 
  transform: 
    translate3d(80px, -60px, -30px) 
    rotateY(90deg); 
} 
 
.bird-scene .wind:nth-child(5) { 
  transform: 
    translate3d(110px, 20px, -50px) 
    rotateY(90deg); 
} 
 
/* ================================= 
   BODY 
================================= */ 
 
.bird_body { 
  position: relative; 
  width: 30px; 
  height: 40px; 
  background: #a33d68; 
} 
 
/* ================================= 
   HEAD 
================================= */ 
 
.bird_head { 
  position: absolute; 
  top: -30px; 
  border-right: 15px solid transparent; 
  border-bottom: 30px solid #c55b89; 
  border-left: 15px solid transparent; 
  transform-origin: 50% 100%; 
  transform: rotateX(-20deg); 
} 
 
/* ================================= 
   LEFT WING 
================================= */ 
 
.bird_wing_left { 
  position: absolute; 
  left: -30px; 
  height: 30px; 
  border-right: 30px solid #b64d79; 
  border-bottom: 10px solid transparent; 
  transform-origin: 100% 0; 
  animation: 
    wingLeft 
    700ms 
    cubic-bezier(.36,.1,.16,1) 
    infinite alternate; 
} 
 
.bird_wing_left_top { 
  position: absolute; 
  left: -30px; 
  border-right: 30px solid #8f315b; 
  border-bottom: 30px solid transparent; 
  transform-origin: 100% 0; 
  animation: 
    wingLeft 
    700ms 
    cubic-bezier(.545,.08,.52,.975) 
    infinite alternate; 
} 
 
/* ================================= 
   RIGHT WING 
================================= */ 
 
.bird_wing_right { 
  position: absolute; 
  left: 30px; 
  height: 30px; 
  border-left: 30px solid #d37ca1; 
  border-bottom: 10px solid transparent; 
  transform-origin: 0 0; 
  animation: 
    wingRight 
    700ms 
    cubic-bezier(.36,.1,.16,1) 
    infinite alternate; 
} 
 
.bird_wing_right_top { 
  position: absolute; 
  border-left: 30px solid #a83c69; 
  border-bottom: 30px solid transparent; 
  transform-origin: 0 0; 
  animation: 
    wingRight 
    700ms 
    cubic-bezier(.545,.08,.52,.975) 
    infinite alternate; 
} 
 
/* ================================= 
   TAIL 
================================= */ 
 
.bird_tail_left { 
  position: absolute; 
  top: 40px; 
  border-right: 30px solid transparent; 
  border-top: 40px solid #8f315b; 
  transform: rotateX(-20deg); 
} 
 
.bird_tail_right { 
  position: absolute; 
  top: 40px; 
  border-left: 30px solid transparent; 
  border-top: 40px solid #d38bad; 
  transform: rotateX(-20deg); 
} 
 
/* ================================= 
   ANIMATIONS 
================================= */ 
 
@keyframes fly { 
  0% { 
    transform: 
      rotateX(-120deg) 
      rotateZ(0deg) 
      rotateX(10deg); 
  } 
  100% { 
    transform: 
      rotateX(-120deg) 
      rotateZ(360deg) 
      rotateX(10deg); 
  } 
} 
 
@keyframes wingLeft { 
  0% { 
    transform: rotateY(-40deg); 
  } 
  100% { 
    transform: rotateY(40deg); 
  } 
} 
 
@keyframes wingRight { 
  0% { 
    transform: rotateY(40deg); 
  } 
  100% { 
    transform: rotateY(-40deg); 
  } 
} 
 
@keyframes wind { 
  0% { 
    transform: translateY(-180px); 
  } 
  100% { 
    transform: translateY(150px); 
  } 
} 
 
/* ================================= 
   BRAND & COMPANY LOGO
================================= */ 
 
.loader-brand { 
  margin-top: 6px; 
  display: flex;
  flex-direction: column;
  align-items: center;
} 
 
.loader-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.loader-logo-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 10px 24px -4px rgba(143, 49, 91, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: #ffffff;
  padding: 4px;
}

.loader-logo-badge {
  position: relative;
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #0d7a6f 0%, #09544d 100%);
  color: #ffffff;
  box-shadow: 0 10px 24px -4px rgba(13, 122, 111, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.loader-logo-svg {
  width: 28px;
  height: 28px;
}

.loader-badge-check {
  position: absolute;
  bottom: -4px;
  right: -4px;
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f59e0b;
  color: #000000;
  font-size: 10px;
  font-weight: 900;
  border: 2px solid #ffffff;
}

.loader-brand h1 { 
  margin: 6px 0 0; 
  font-family: Georgia, "Times New Roman", serif; 
  font-size: clamp(26px, 5.5vw, 40px); 
  font-weight: 700; 
  letter-spacing: 2.5px; 
  color: #8f315b; 
  line-height: 1.15;
} 

.loader-brand h1 .brand-accent {
  color: #0d7a6f;
}
 
.loader-brand p { 
  margin: 6px 0 0; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; 
  font-size: clamp(8.5px, 2vw, 10px); 
  letter-spacing: 4px; 
  color: #9b647a; 
  font-weight: 700;
  text-transform: uppercase;
} 
 
/* ================================= 
   LOADING BAR 
================================= */ 
 
.loading-box { 
  width: min(210px, 68vw); 
  height: 4px; 
  margin: 22px auto 12px; 
  overflow: hidden; 
  border-radius: 999px; 
  background: rgba(143, 49, 91, 0.15); 
} 
 
.loading-bar { 
  width: 0%; 
  height: 100%; 
  border-radius: 999px; 
  background: 
    linear-gradient( 
      90deg, 
      #8f315b 0%, 
      #d59b37 50%, 
      #0d7a6f 100% 
    ); 
  animation: 
    loading 2.8s ease-in-out forwards; 
} 
 
@keyframes loading { 
  0% { 
    width: 0%; 
  } 
  100% { 
    width: 100%; 
  } 
} 
 
/* ================================= 
   LOADING TEXT 
================================= */ 
 
.loading-text { 
  font-size: 11px; 
  color: #9b647a; 
  letter-spacing: 1px; 
  font-weight: 500;
  animation: 
    textPulse 1.5s ease-in-out infinite; 
} 
 
@keyframes textPulse { 
  0%,100% { 
    opacity: .4; 
  } 
  50% { 
    opacity: 1; 
  } 
} 

/* ================================= 
   SKIP BUTTON (User Convenience)
================================= */

.loader-skip-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #8f315b;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(143, 49, 91, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  opacity: 0.8;
}

.loader-skip-btn:hover {
  opacity: 1;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(143, 49, 91, 0.15);
  transform: translateY(-1px);
}
 
/* ================================= 
   RESPONSIVENESS & ADAPTIVE STYLING
================================= */ 
 
@media(max-width: 540px) { 
  .bird-scene { 
    transform: scale(.82); 
    height: 150px;
  } 
 
  .loader-brand h1 { 
    font-size: 28px; 
    letter-spacing: 1.5px;
  } 

  .loader-brand p {
    letter-spacing: 2.5px;
  }

  .loader-logo-img,
  .loader-logo-badge {
    width: 46px;
    height: 46px;
  }

  .loading-box {
    margin: 18px auto 10px;
  }
} 

@media(max-height: 600px) {
  .bird-scene {
    transform: scale(0.68);
    height: 120px;
  }

  .loader-content {
    transform: scale(0.92);
  }
}

/* Pause animations when hidden to save CPU & battery */
.salon-loader.hide .bird,
.salon-loader.hide .bird_wing_left,
.salon-loader.hide .bird_wing_right,
.salon-loader.hide .wind::before,
.salon-loader.hide .loading-bar,
.salon-loader.hide .loading-text {
  animation-play-state: paused !important;
}