/* ============================================================
   LBM — Loader: Premium Upgraded with Butterflies & Slogan
   ============================================================ */
:root {
  --navy: #1f3f89;
  --blue: #1a4aa1;
  --gold: #f4a51c;
  --gold2: #f1b647;
}

#lbm-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #030810;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition:
    opacity 1s ease,
    visibility 1s ease;
}
#lbm-loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Background preview of homepage emerging */
.loader-page-preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom, #f8f4ed, #fdfbf7);
  opacity: 0;
  transform: scale(1.08);
  animation: pageEmerge 4.5s ease forwards;
}
@keyframes pageEmerge {
  0% {
    opacity: 0;
    transform: scale(1.08);
  }
  40% {
    opacity: 0;
    transform: scale(1.06);
  }
  70% {
    opacity: 0.15;
    transform: scale(1.03);
  }
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
}

.loader-page-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 30% 50%,
      rgba(26, 74, 161, 0.15) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 50%,
      rgba(244, 165, 28, 0.1) 0%,
      transparent 60%
    );
}

/* Curtains */
.loader-curtain-left,
.loader-curtain-right {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(to bottom, #030810, #0a1628);
  width: 55%;
  transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}
.loader-curtain-left {
  left: 0;
  transform-origin: left;
}
.loader-curtain-right {
  right: 0;
  transform-origin: right;
}
#lbm-loader.fade-out .loader-curtain-left {
  transform: translateX(-100%);
}
#lbm-loader.fade-out .loader-curtain-right {
  transform: translateX(100%);
}

/* Center content */
.loader-center {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Logo */
.loader-logo-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: 32px;
}
.loader-logo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.2) blur(4px);
  animation: logoReveal 2s ease forwards 0.3s;
  position: relative;
  z-index: 2;
  border: 2px solid transparent;
}
@keyframes logoReveal {
  0% {
    opacity: 0;
    filter: brightness(0.1) blur(6px);
    transform: scale(0.8);
    border-color: transparent;
  }
  50% {
    opacity: 0.7;
    filter: brightness(0.6) blur(2px);
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0px);
    transform: scale(1);
    border-color: var(--gold);
  }
}

/* Glow ring */
.loader-glow-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(244, 165, 28, 0.5);
  animation:
    glowRing 1.5s ease forwards 1.5s,
    ringPulse 2s ease-in-out infinite 3s;
}
@keyframes glowRing {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 32px rgba(244, 165, 28, 0.4);
  }
}
@keyframes ringPulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(244, 165, 28, 0.3);
  }
  50% {
    box-shadow: 0 0 60px rgba(244, 165, 28, 0.8);
  }
}

/* Light rays behind logo */
.loader-rays {
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(244, 165, 28, 0.06) 10deg,
    transparent 20deg,
    transparent 40deg,
    rgba(244, 165, 28, 0.06) 50deg,
    transparent 60deg,
    transparent 80deg,
    rgba(244, 165, 28, 0.06) 90deg,
    transparent 100deg,
    transparent 120deg,
    rgba(244, 165, 28, 0.06) 130deg,
    transparent 140deg,
    transparent 160deg,
    rgba(244, 165, 28, 0.06) 170deg,
    transparent 180deg,
    transparent 200deg,
    rgba(244, 165, 28, 0.06) 210deg,
    transparent 220deg,
    transparent 240deg,
    rgba(244, 165, 28, 0.06) 250deg,
    transparent 260deg,
    transparent 280deg,
    rgba(244, 165, 28, 0.06) 290deg,
    transparent 300deg,
    transparent 320deg,
    rgba(244, 165, 28, 0.06) 330deg,
    transparent 340deg,
    transparent 360deg
  );
  opacity: 0;
  animation:
    raysAppear 1s ease forwards 1.8s,
    raysRotate 12s linear infinite 2s;
  z-index: 1;
}
@keyframes raysAppear {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes raysRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Sunrise glow */
.loader-sunrise {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 140px;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(244, 165, 28, 0.7),
    transparent 70%
  );
  filter: blur(20px);
  opacity: 0;
  animation: sunriseAppear 2s ease forwards 1s;
  z-index: 1;
}
@keyframes sunriseAppear {
  from {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.3);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

/* Title */
.loader-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0;
  animation: textFade 0.8s ease forwards 1.8s;
  text-shadow: 0 0 40px rgba(244, 165, 28, 0.3);
}

/* Tagline — Love Build Make a Difference */
.loader-tagline {
  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0;
  animation: textFade 0.8s ease forwards 2.2s;
}

/* SLOGAN — Let's Be Mindful! */
.loader-slogan {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: 0.04em;
  text-align: center;
  margin-top: 18px;
  opacity: 0;
  animation: sloganReveal 1.2s ease forwards 2.6s;
  text-shadow:
    0 0 30px rgba(244, 165, 28, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.5);
  position: relative;
}
.loader-slogan::after {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 8px auto 0;
  animation: sloganLine 1s ease forwards 3.4s;
}
@keyframes sloganReveal {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes sloganLine {
  from {
    width: 0%;
  }
  to {
    width: 80%;
  }
}

@keyframes textFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stars */
.loader-star {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: starTwinkle var(--dur) ease-in-out infinite var(--delay);
  z-index: 1;
}
@keyframes starTwinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.6;
    transform: scale(1);
  }
}

/* Gold Particles */
.loader-particle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(244, 165, 28, 0.9),
    rgba(244, 165, 28, 0)
  );
  opacity: 0;
  z-index: 1;
  animation: particleFloat var(--dur) ease-in infinite var(--delay);
}
@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0);
  }
  20% {
    opacity: 0.8;
    transform: translateY(-20px) translateX(var(--drift)) scale(1);
  }
  80% {
    opacity: 0.3;
    transform: translateY(-80px) translateX(calc(var(--drift) * 2)) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) translateX(calc(var(--drift) * 3)) scale(0);
  }
}

/* Butterfly */
.loader-butterfly {
  position: absolute;
  font-size: var(--bsize);
  opacity: 0;
  z-index: 2;
  animation: butterflyFloat var(--bdur) ease-in-out infinite var(--bdelay);
  filter: drop-shadow(0 0 6px rgba(244, 165, 28, 0.6));
}
@keyframes butterflyFloat {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-10deg) scale(0.5);
  }
  15% {
    opacity: 0.9;
    transform: translate(var(--bx1), var(--by1)) rotate(5deg) scale(1);
  }
  40% {
    opacity: 0.7;
    transform: translate(var(--bx2), var(--by2)) rotate(-8deg) scale(0.9);
  }
  70% {
    opacity: 0.5;
    transform: translate(var(--bx3), var(--by3)) rotate(12deg) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(var(--bx4), var(--by4)) rotate(-5deg) scale(0.3);
  }
}

/* Progress */
.loader-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 4;
}
.loader-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--gold), var(--gold2));
  width: 0%;
  animation: progressFill 4.2s ease forwards;
}
@keyframes progressFill {
  to {
    width: 100%;
  }
}

/* Coming text */
.loader-coming {
  position: absolute;
  bottom: 20px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  z-index: 4;
  opacity: 0;
  animation: textFade 0.8s ease forwards 2.5s;
}