/* ========================================
   AN NHIÊN HOMESTAY — Preloader Screen
   Centered logo wrapped by a growing vine
   ======================================== */

.preloader {
  position: fixed;
  inset: 0;
  background: var(--color-cream-light);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              visibility 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.preloader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

/* ── Container for logo and surrounding vine ── */
.preloader__logo-container {
  position: relative;
  width: 180px; /* Tăng kích thước bao ngoài để chứa lá */
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader__logo {
  width: 90px;
  height: 90px;
  border-radius: var(--radius-full);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  animation: logoIntro 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}

@keyframes logoIntro {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ── Animated Vine (SVG) wrapping the logo ── */
.vine-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

/* Chiều dài nét vẽ cho 2 dây uốn lượn */
.vine-stem {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linejoin: round;
  opacity: 0.92;
  filter: drop-shadow(0 1px 1px rgba(61, 90, 61, 0.12));
}

.vine-stem--1 {
  animation: growVine 1.6s linear forwards;
}

.vine-stem--2 {
  animation: growVine 1.6s linear forwards;
}

@keyframes growVine {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.vine-leaf path {
  transform-origin: 0px 0px;
  transform: scale(0) rotate(var(--leaf-twist, 0deg));
  opacity: 0;
  fill: var(--leaf-color, var(--color-green));
  animation: bloomLeaf 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Kích hoạt mọc lá tại đúng các điểm dừng của dây leo (rút ngắn theo tỷ lệ 2s) */
.vine-leaf--1 path { --leaf-color: #5f7f63; --leaf-scale: 0.9; --leaf-twist: -8deg; animation-delay: 0.13s; }
.vine-leaf--2 path { --leaf-color: #76966f; --leaf-scale: 0.82; --leaf-twist: 10deg; animation-delay: 0.27s; }
.vine-leaf--3 path { --leaf-color: #4f704f; --leaf-scale: 1.02; --leaf-twist: -5deg; animation-delay: 0.43s; }
.vine-leaf--4 path { --leaf-color: #6c8d66; --leaf-scale: 0.88; --leaf-twist: 13deg; animation-delay: 0.6s; }
.vine-leaf--5 path { --leaf-color: #55785b; --leaf-scale: 0.98; --leaf-twist: -12deg; animation-delay: 0.8s; }
.vine-leaf--6 path { --leaf-color: #789a73; --leaf-scale: 0.86; --leaf-twist: 7deg; animation-delay: 0.93s; }
.vine-leaf--7 path { --leaf-color: #496d4d; --leaf-scale: 0.94; --leaf-twist: -9deg; animation-delay: 1.1s; }
.vine-leaf--8 path { --leaf-color: #6f916a; --leaf-scale: 0.84; --leaf-twist: 12deg; animation-delay: 1.27s; }
.vine-leaf--9 path { --leaf-color: #587d5b; --leaf-scale: 0.91; --leaf-twist: -6deg; animation-delay: 1.4s; }
.vine-leaf--10 path { --leaf-color: #7c9d76; --leaf-scale: 0.8; --leaf-twist: 11deg; animation-delay: 1.5s; }
.vine-leaf--11 path { --leaf-color: #688b64; --leaf-scale: 0.72; --leaf-twist: -14deg; animation-delay: 0.33s; }
.vine-leaf--12 path { --leaf-color: #5a805e; --leaf-scale: 0.76; --leaf-twist: 9deg; animation-delay: 1.07s; }

/* ── Keyframes Lá ── */
@keyframes bloomLeaf {
  to {
    transform: scale(var(--leaf-scale, 1)) rotate(var(--leaf-twist, 0deg));
    opacity: 1;
  }
}

/* ── Hide preloader when loaded ── */
body.loaded .preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}