/* ============================================
   SCROLL GROWING FLOWER — CSS
   Decorative lily that grows with scroll progress
   ============================================ */

/* --- Outer Wrapper (GSAP controls scale + opacity) --- */
.scroll-flower {
  position: fixed;
  left: -40px;
  bottom: -60px;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, opacity;
  transform-origin: bottom left;
  /* GSAP sets initial scale/opacity via JS */
}

/* --- Inner Wrapper (CSS controls floating idle animation) --- */
.scroll-flower__float {
  will-change: transform;
}

/* --- The flower image --- */
.scroll-flower__img {
  width: clamp(260px, 42vw, 660px);
  height: auto;
  display: block;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 24px rgba(107, 61, 122, 0.18));
}

/* --- Idle floating keyframes (soft, premium) --- */
@keyframes flowerFloat {
  0% {
    transform: translateY(0px) rotate(-1.25deg);
  }
  33% {
    transform: translateY(-8px) rotate(0.5deg);
  }
  66% {
    transform: translateY(-3px) rotate(1.25deg);
  }
  100% {
    transform: translateY(0px) rotate(-1.25deg);
  }
}

.scroll-flower__float {
  animation: flowerFloat 6s ease-in-out infinite;
}

/* --- Reduced motion: disable float, show static --- */
@media (prefers-reduced-motion: reduce) {
  .scroll-flower__float {
    animation: none !important;
  }
  .scroll-flower {
    opacity: 0.35 !important;
  }
}

/* --- Responsive: Mobile adjustments --- */
@media (max-width: 767px) {
  .scroll-flower {
    left: -30px;
    bottom: -40px;
  }
  .scroll-flower__img {
    width: clamp(180px, 50vw, 360px);
  }
}

/* --- Responsive: Large desktop --- */
@media (min-width: 1440px) {
  .scroll-flower {
    left: -56px;
    bottom: -88px;
  }
  .scroll-flower__img {
    width: clamp(400px, 38vw, 680px);
  }
}