.palm-bg-wrapper {
  position: absolute;
  top: 83%; 
  left: 0;
  width: 100%;
  height: 0; 
  z-index: 2; 
  pointer-events: none;
  overflow: visible;
}

/* Base styling for the animated palm wrapper */
.animated-palm {
  position: absolute;
  bottom: 0; 
  transform-origin: bottom center;
  animation: gentle-breeze ease-in-out infinite alternate;
  will-change: transform;
}

.animated-palm img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flip the right side images */
.palm-right { transform: scaleX(-1); }

/* Physics-based sway */
@keyframes gentle-breeze {
  0% { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}

/* --- LEFT SIDE PALMS --- */
.palm-l-tall { left: -5%; width: 36%; animation-duration: 5.2s; z-index: 1; }
.palm-l-med {
    left: -5%;
    width: 29%;
    animation-duration: 4.5s;
    animation-delay: -1.2s;
    z-index: 0;
    margin-bottom: 24%;
}
.palm-l-short { left: 12%; width: 18%; animation-duration: 3.8s; animation-delay: -2.5s; z-index: 3; bottom: -2%; }

/* --- RIGHT SIDE PALMS --- */
.palm-r-tall { right: -6%; width: 36%; animation-duration: 4.9s; animation-delay: -0.5s; z-index: 1; margin-bottom: -50%; }
.palm-r-med { right: -4%; width: 34%; animation-duration: 4.2s; animation-delay: -1.8s; z-index: 0; margin-bottom: -15%; }
.palm-r-short { right: 11%; width: 18%; animation-duration: 3.6s; animation-delay: -0.9s; z-index: 3; bottom: -2%; }

.palm-bg-wrapper-top {
  position: absolute;
  top: 14%; 
  left: 0;
  width: 100%;
  height: 0; 
  z-index: 2; 
  pointer-events: none;
  overflow: visible;
}

/* Base styling for the animated palm wrapper */
.palm-bg-wrapper-top .animated-palm {
  position: absolute;
  bottom: 0; 
  transform-origin: bottom center;
  animation: gentle-breeze ease-in-out infinite alternate;
  will-change: transform;
}

.palm-bg-wrapper-top .animated-palm img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flip the right side images */
.palm-bg-wrapper-top .palm-right { transform: scaleX(-1); }

/* Physics-based sway */
@keyframes gentle-breeze {
  0% { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}

/* --- LEFT SIDE PALMS --- */
.palm-bg-wrapper-top .palm-l-tall { left: -3%; width: 36%; animation-duration: 5.2s; z-index: 1; }
.palm-bg-wrapper-top .palm-l-med {
    left: -2%;
    width: 31%;
    animation-duration: 4.5s;
    animation-delay: -1.2s;
    z-index: 0;
    margin-bottom: 24%;
}
.palm-bg-wrapper-top .palm-l-short { left: 12%; width: 18%; animation-duration: 3.8s; animation-delay: -2.5s; z-index: 3; bottom: -2%; }

/* --- RIGHT SIDE PALMS --- */
.palm-bg-wrapper-top .palm-r-tall { right: -4%; width: 36%; animation-duration: 4.9s; animation-delay: -0.5s; z-index: 1; margin-bottom: -33%; }
.palm-bg-wrapper-top .palm-r-med { right: -2%; width: 34%; animation-duration: 4.2s; animation-delay: -1.8s; z-index: 0; margin-bottom: 1%; }
.palm-bg-wrapper-top .palm-r-short { right: 11%; width: 18%; animation-duration: 3.6s; animation-delay: -0.9s; z-index: 3; bottom: -2%; }
/* Base wrapper for the pendants */

.pendant-wrapper {
  position: absolute;
  /* ADJUST THIS: Move this percentage up or down until the top 
     of the rope aligns perfectly with the design in your background */
  top: 17.1%; 
  left: 0;
  width: 100%;
  z-index: 1; 
  pointer-events: none;
}


.palm-bg-wrapper-2 {
    position: absolute;
    top: 33.4%;

    width: 100%;
    height: 0;
    z-index: 2;
    /* pointer-events: none; */
    overflow: visible;
}
.palm-bg-wrapper-2 .animated-palm {
  /* You can lower the opacity slightly if you want them to feel further away */
  /* opacity: 0.9; */ 
}

/* --- SECTION 2 LEFT SIDE --- */
.palm-bg-wrapper-2 .palm-l-tall { 
  left: -17%; 
  width: 49%; /* Scaled down from 36% */
  animation-duration: 5.8s; /* Slower sway */
}
.palm-bg-wrapper-2 .palm-l-med { 
  left: -3%; 
  width: 32%; 
  animation-duration: 4.1s; 
  animation-delay: -2.3s; 
margin-bottom: -3%;
}
.palm-bg-wrapper-2 .palm-l-short { 
  left: -11%; 
  width: 27%; 
  animation-duration: 3.4s; 
  animation-delay: -1.1s; 
	margin-bottom: -22%;
	
}

/* --- SECTION 2 RIGHT SIDE --- */
.palm-bg-wrapper-2 .palm-r-tall {
    right: -9%;
    width: 43%;
    animation-duration: 5.5s;
    animation-delay: -3.2s;
}
.palm-bg-wrapper-2 .palm-r-med { 
  right: -2%; 
  width: 32%; 
  animation-duration: 4.8s; 
  animation-delay: -0.7s; 
	margin-bottom: -3%;
}
.palm-bg-wrapper-2 .palm-r-short { 
  right: -11%; 
  width: 27%; 
  animation-duration: 3.2s; 
  animation-delay: -2.8s; 
		margin-bottom: -22%;
}



/* --- BASE HERBS SWAY --- */
.herbs-sway {
  position: absolute;
          /* tune per design */
  height: auto;
  pointer-events: none;
  will-change: transform;
}

/* Left cluster placement & pivot */
.herbs-left {
    top: 24%;
    left: -12%;
    width: 52%;
    transform-origin: 85% 90%;
    animation: herbs-main-sway-left 8s ease-in-out infinite;
}

/* Right cluster placement & pivot */
.herbs-right {
  top: 20%;
  right: -9%;
width: 32%;   
  transform-origin: 15% 92%;   /* stem base near left/bottom of image */
  animation: herbs-main-sway-right 7s ease-in-out infinite;
}

.herbs-sway img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: inherit;
  animation:
    herbs-leaf-sway 4.5s ease-in-out infinite alternate,
    herbs-breath     13s ease-in-out infinite;
}

/* Optional micro-motion overlay for more richness */
.herbs-sway::before,
.herbs-sway::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;      /* only if you set backgrounds on herbs-* */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.22;
  pointer-events: none;
  transform-origin: inherit;
}

/* Left herbs overlays */
.herbs-left::before {
  animation: herbs-layer-left 6.8s ease-in-out infinite alternate;
}
.herbs-left::after {
  animation: herbs-layer-right 5.9s ease-in-out infinite alternate;
}

/* Right herbs overlays */
.herbs-right::before {
  animation: herbs-layer-left 6.2s ease-in-out infinite alternate;
}
.herbs-right::after {
  animation: herbs-layer-right 5.3s ease-in-out infinite alternate;
}

/* Main stem sway – left side slightly heavier */
@keyframes herbs-main-sway-left {
  0%   { transform: rotate(-3deg) translateY(0); }
  25%  { transform: rotate(-5deg) translateY(-1px); }
  50%  { transform: rotate(2deg)  translateY(1px); }
  75%  { transform: rotate(4deg)  translateY(0); }
  100% { transform: rotate(-3deg) translateY(0); }
}

/* Main stem sway – right side a bit lighter/faster */
@keyframes herbs-main-sway-right {
  0%   { transform: rotate(2deg) translateY(0); }
  25%  { transform: rotate(4deg) translateY(-1px); }
  50%  { transform: rotate(-1deg) translateY(1px); }
  75%  { transform: rotate(-3deg) translateY(0); }
  100% { transform: rotate(2deg) translateY(0); }
}

/* Leaves catching gusts */
@keyframes herbs-leaf-sway {
  0%   { transform: rotate(-1.5deg); }
  50%  { transform: rotate(2deg); }
  100% { transform: rotate(-0.5deg); }
}

/* Very slow breathing motion */
@keyframes herbs-breath {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-1px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* Micro-layers */
@keyframes herbs-layer-left {
  0%   { transform: rotate(-1.2deg) translateY(0); }
  100% { transform: rotate(1.4deg)  translateY(-0.5px); }
}

@keyframes herbs-layer-right {
  0%   { transform: rotate(1deg) translateY(0); }
  100% { transform: rotate(-1.6deg) translateY(0.5px); }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .herbs-sway,
  .herbs-sway img,
  .herbs-sway::before,
  .herbs-sway::after {
    animation: none !important;
  }
}
/* --- GOLD PALM SWAY --- */
.gold-palm-sway {
    position: absolute;
    top: 41.7%;
    left: 8.4%;
    width: 80%;
    height: auto;
    pointer-events: none;
    transform-origin: 50% 100%;
    animation: gold-palm-sway-main 8s ease-in-out infinite;
    will-change: transform;
	    z-index: 4;

}

.gold-palm-sway img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  /* subtle extra motion in the crown */
  animation:
    gold-palm-crown 5.5s ease-in-out infinite alternate,
    gold-palm-breath 14s ease-in-out infinite;
}

/* Main trunk sway – slow, wind driven */
@keyframes gold-palm-sway-main {
  0%   { transform: rotate(-1.8deg) translateX(0); }
  20%  { transform: rotate(-3deg)   translateX(-1px); }
  45%  { transform: rotate(2deg)    translateX(1px); }
  70%  { transform: rotate(3deg)    translateX(0); }
  100% { transform: rotate(-1.8deg) translateX(0); }
}

/* Crown micro‑movement so fronds don’t feel rigid */
@keyframes gold-palm-crown {
  0%   { transform: rotate(-1deg) scale(1); }
  50%  { transform: rotate(1.5deg) scale(1.01); }
  100% { transform: rotate(0deg)   scale(1); }
}

/* Very slow breathing motion for realism */
@keyframes gold-palm-breath {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .gold-palm-sway,
  .gold-palm-sway img {
    animation: none !important;
  }
}


.palm-bg-wrapper-3 {
    position: absolute;
    top: 62%;

    width: 100%;
    height: 0;
    z-index: 2;
    /* pointer-events: none; */
    overflow: visible;
}
.palm-bg-wrapper-3 .animated-palm {
  /* You can lower the opacity slightly if you want them to feel further away */
   opacity: 0.9; 
}

/* --- SECTION 2 LEFT SIDE --- */
.palm-bg-wrapper-3 .palm-l-tall {
    left: -13%;
    width: 38%;
    animation-duration: 5.8s;
    margin-bottom: -58%;
}


/* --- SECTION 2 RIGHT SIDE --- */
.palm-bg-wrapper-3 .palm-r-tall {
    right: -7%;
    width: 33%;
    animation-duration: 5.5s;
    animation-delay: -3.2s;
    margin-bottom: 0%;
}


.palm-bg-wrapper-4 {
    position: absolute;
    top: 45%;

    width: 100%;
    height: 0;
    z-index: 1;
    /* pointer-events: none; */
    overflow: visible;
}
.palm-bg-wrapper-4 .animated-palm {
  /* You can lower the opacity slightly if you want them to feel further away */
   opacity: 0.9; 
}

/* --- SECTION 2 RIGHT SIDE --- */
.palm-bg-wrapper-4 .palm-r-tall {
    right: -7%;
    width: 44%;
    animation-duration: 3.5s;
    animation-delay: -3.2s;
    margin-bottom: 0%;
}
.dragonfly-flight {
    position: absolute;
    top: 15.35%;
    left: 2%;
    width: 44%;
    height: auto;
    z-index: 6;
    pointer-events: none;
}
.dragonfly-flight img{
	width: 100%;
	height: auto;
}


.eye-gif {
    position: absolute;
    top: 50.8%;
    left: 17%;
    width: 44%;
    height: auto;
    z-index: 6;
    pointer-events: none;
}
.eye-gif img{
	width: 100%;
	height: auto;
}

.firefly {
  animation: firefly-path-gust 8s ease-in-out infinite; position: absolute;
 /*   top: 15.35%;
    left: 2%;
    width: 44%;
    height: auto;
    z-index: 6;
    pointer-events: none;*/
	 animation-duration: 1.7s;
}
.firefly img{
	width: 100%;
	height: auto;
}

@keyframes firefly-path-gust {
  0%,10%,20%,35%,45%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%,75%,95%  { transform: translate3d(0, 0, 0) rotate(15deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

.Circle2-gif {
    position: absolute;
    top: 16.7%;
    right: -16%;
    width: 39%;
    height: auto;
    z-index: 4;
    pointer-events: none;
}
.Circle2-gif img{
	width: 100%;
	height: auto;
}

.Circle-gif {
    position: absolute;
    top: 49.5%;
    right: -12%;
    width: 52%;
    height: auto;
    z-index: 3;
    pointer-events: none;
}
.Circle-gif img{
	width: 100%;
	height: auto;
}

.Circle33-gif {
    position: absolute;
    top: 13.1%;
    right: -3%;
    width: 55%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}
.Circle33-gif img{
	width: 100%;
	height: auto;
}

.Circle3-gif {
    position: absolute;
    top: 50.7%;
    right: 16%;
    width: 42%;
    height: auto;
    z-index: 4;
    pointer-events: none;
}
.Circle3-gif img{
	width: 100%;
	height: auto;
}
.long-gif {
    position: absolute;
    top: 24.7%;
    right: -8%;
    width: 34%;
    height: auto;
    z-index: 4;
    pointer-events: none;
}
.long-gif img{
	width: 100%;
	height: auto;
}