/* ================================================================
   STAYVIBES — LOADER v4  Clean, elegant, not odd
   ================================================================ */
#sv-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: #0f0a05;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity .6s ease, visibility .6s;
}
#sv-loader.out { opacity: 0; visibility: hidden; pointer-events: none; }

/* Warm background glow */
.ldr-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 40%, rgba(200,75,49,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(150,50,20,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Center stack */
.ldr-center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
}

/* Logo */
.ldr-logo {
  width: 120px; height: auto;
  object-fit: contain;
  margin-bottom: 32px;
  filter: drop-shadow(0 4px 20px rgba(200,75,49,0.4));
  animation: ldrLogoIn .9s cubic-bezier(0.34,1.56,.64,1) .1s both;
}
@keyframes ldrLogoIn {
  from { opacity:0; transform:scale(0.8) translateY(-10px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* House SVG icon — simple, clean */
.ldr-icon-wrap {
  width: 80px; height: 80px;
  background: rgba(200,75,49,0.1);
  border: 1px solid rgba(200,75,49,0.2);
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  animation: ldrIconIn .8s cubic-bezier(0.34,1.56,.64,1) .4s both;
}
@keyframes ldrIconIn {
  from { opacity:0; transform:scale(0.6); }
  to   { opacity:1; transform:scale(1); }
}

/* Animated key icon */
.ldr-icon-wrap svg {
  animation: ldrIconFloat 2s ease-in-out infinite;
}
@keyframes ldrIconFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Dots loader */
.ldr-dots {
  display: flex; gap: 8px;
  margin-bottom: 20px;
  animation: fadeIn .5s ease .7s both;
}
.ldr-dot {
  width: 8px; height: 8px; border-radius: 50%;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.ldr-dot:nth-child(1) { background: #C84B31; animation-delay: 0s; }
.ldr-dot:nth-child(2) { background: #D4956A; animation-delay: .15s; }
.ldr-dot:nth-child(3) { background: #C84B31; animation-delay: .3s; }
@keyframes dotBounce {
  0%,80%,100% { transform: scale(0.8); opacity: .5; }
  40%          { transform: scale(1.2); opacity: 1; }
}

/* Progress bar */
.ldr-bar-wrap {
  width: 180px; height: 2px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px; overflow: hidden;
  margin-bottom: 16px;
  animation: fadeIn .5s ease .6s both;
}
.ldr-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #C84B31, #ff9a5c, #C84B31);
  background-size: 200% 100%;
  border-radius: 99px;
  animation:
    barGrow 2s cubic-bezier(.4,0,.2,1) .5s forwards,
    barShine 1.2s linear infinite;
}
@keyframes barGrow  { to { width: 100%; } }
@keyframes barShine { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Tagline */
.ldr-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  animation: fadeIn .5s ease .8s both, tagPulse 2s ease-in-out infinite .8s;
}
@keyframes tagPulse  { 0%,100%{opacity:.28} 50%{opacity:.6} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }