/* =============================================
   O SHATIKA — BLOOMING FLOWER PRELOADER
   preloader.css
   ============================================= */

/* Overlay */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0e0500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exit animation — flower expands and screen fades */
#preloader.hide {
  opacity: 0;
  transform: scale(1.15);
  pointer-events: none;
}

/* ─── Flower SVG Container ─── */
.preloader-flower {
  width: 120px;
  height: 120px;
  animation: flowerSpin 8s linear infinite;
}

.preloader-flower svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(200, 169, 110, 0.3));
}

/* Petals bloom in with staggered animation */
.preloader-flower .petal-group {
  transform-origin: center;
  opacity: 0;
  animation: petalBloom 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.preloader-flower .petal-group:nth-child(1) { animation-delay: 0.0s; }
.preloader-flower .petal-group:nth-child(2) { animation-delay: 0.1s; }
.preloader-flower .petal-group:nth-child(3) { animation-delay: 0.2s; }
.preloader-flower .petal-group:nth-child(4) { animation-delay: 0.3s; }
.preloader-flower .petal-group:nth-child(5) { animation-delay: 0.4s; }
.preloader-flower .petal-group:nth-child(6) { animation-delay: 0.5s; }
.preloader-flower .petal-group:nth-child(7) { animation-delay: 0.6s; }
.preloader-flower .petal-group:nth-child(8) { animation-delay: 0.7s; }

/* Inner petals */
.preloader-flower .inner-petal {
  transform-origin: center;
  opacity: 0;
  animation: innerPetalBloom 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.preloader-flower .inner-petal:nth-child(9)  { animation-delay: 0.5s; }
.preloader-flower .inner-petal:nth-child(10) { animation-delay: 0.6s; }
.preloader-flower .inner-petal:nth-child(11) { animation-delay: 0.7s; }
.preloader-flower .inner-petal:nth-child(12) { animation-delay: 0.8s; }
.preloader-flower .inner-petal:nth-child(13) { animation-delay: 0.9s; }
.preloader-flower .inner-petal:nth-child(14) { animation-delay: 1.0s; }
.preloader-flower .inner-petal:nth-child(15) { animation-delay: 1.1s; }
.preloader-flower .inner-petal:nth-child(16) { animation-delay: 1.2s; }

/* Center circle */
.preloader-flower .flower-center {
  opacity: 0;
  animation: centerAppear 0.6s ease forwards 0.9s;
}

/* Pulsing glow ring on center */
.preloader-flower .center-glow {
  opacity: 0;
  animation: centerGlow 2s ease-in-out infinite 1.2s;
}

/* ─── Brand Text ─── */
.preloader-brand {
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  animation: brandFadeIn 0.8s ease forwards 1.0s;
}

.preloader-brand-name {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 6px;
  margin: 0;
  /* Gold shimmer sweep */
  background: linear-gradient(
    90deg,
    #7a5a20 0%,
    #c8a96e 35%,
    #fff8e7 50%,
    #c8a96e 65%,
    #7a5a20 100%
  );
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerSweep 3s linear infinite 1.0s;
}

.preloader-tagline {
  font-size: 9px;
  letter-spacing: 3.5px;
  color: rgba(200, 169, 110, 0.5);
  text-transform: uppercase;
  margin: 6px 0 0;
}

/* ─── Loading Dots ─── */
.preloader-dots {
  display: flex;
  gap: 8px;
  opacity: 0;
  animation: brandFadeIn 0.6s ease forwards 1.3s;
}

.preloader-dots span {
  width: 5px;
  height: 5px;
  background: #c8a96e;
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite;
}

.preloader-dots span:nth-child(1) { animation-delay: 0s; }
.preloader-dots span:nth-child(2) { animation-delay: 0.2s; }
.preloader-dots span:nth-child(3) { animation-delay: 0.4s; }

/* =============================================
   KEYFRAMES
   ============================================= */

/* Slow continuous spin */
@keyframes flowerSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Outer petals bloom from scale 0 */
@keyframes petalBloom {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Inner petals bloom slightly different */
@keyframes innerPetalBloom {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 0.9; transform: scale(1.15); }
  100% { opacity: 0.85; transform: scale(1); }
}

/* Center circle appears */
@keyframes centerAppear {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* Pulsing glow on center */
@keyframes centerGlow {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50%      { opacity: 0.4; transform: scale(1.5); }
}

/* Brand text fade in */
@keyframes brandFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shimmer sweep for brand name */
@keyframes shimmerSweep {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Loading dots pulse */
@keyframes dotPulse {
  0%, 100% { transform: scale(0.6); opacity: 0.3; }
  50%      { transform: scale(1.2); opacity: 1; }
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 480px) {
  .preloader-flower {
    width: 90px;
    height: 90px;
  }

  .preloader-brand-name {
    font-size: 20px;
    letter-spacing: 4px;
  }

  .preloader-tagline {
    font-size: 8px;
    letter-spacing: 2.5px;
  }
}