/* Footer plants container */
.footer-plants {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0; /* Prevent affecting footer height */
    z-index: 1; /* Establish stacking context for plants */
}

/* Base styles for all plant images */
.footer-plants img {
    position: absolute;
    width: auto; /* Maintain aspect ratio */
    user-select: none; /* Prevent selection of plants */
    will-change: transform, filter; /* Optimize rendering */
}

/* Phone and shared plants (1–18) */
/* Plant 1 (left edge, half offscreen) */
.plant-1 {
    height: 130px;
    left: 0;
    bottom: calc(100% - 5px);
    transform: translateX(-50%) rotate(7deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-18deg) brightness(94%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 2 (right edge, half offscreen, flipped) */
.plant-2 {
    height: 140px;
    right: 0;
    bottom: calc(100% - 2px);
    transform: translateX(50%) scaleX(-1) rotate(-9deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(22deg) brightness(107%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 3 */
.plant-3 {
    height: 96px;
    left: 63%;
    bottom: calc(100% - 2px);
    transform: rotate(8deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-20deg) brightness(95%);
    z-index: -1; /* Behind footer (height ≤ 120px) */
}

/* Plant 4 (flipped) */
.plant-4 {
    height: 104px;
    left: 67%;
    bottom: calc(100% - 5px);
    transform: scaleX(-1) rotate(-10deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(15deg) brightness(105%);
    z-index: -1; /* Behind footer (height ≤ 120px) */
}

/* Plant 5 */
.plant-5 {
    height: 120px;
    left: 11%;
    bottom: calc(100% - 3px);
    transform: rotate(5deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-10deg) brightness(90%);
    z-index: -1; /* Behind footer (height ≤ 120px) */
}

/* Plant 6 (flipped) */
.plant-6 {
    height: 128px;
    left: 15%;
    bottom: calc(100% - 4px);
    transform: scaleX(-1) rotate(-7deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(25deg) brightness(110%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 7 */
.plant-7 {
    height: 136px;
    left: 19%;
    bottom: calc(100% - 6px);
    transform: rotate(10deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(0deg) brightness(100%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 8 (flipped) */
.plant-8 {
    height: 144px;
    left: 23%;
    bottom: calc(100% - 3px);
    transform: scaleX(-1) rotate(6deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-25deg) brightness(92%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 9 */
.plant-9 {
    height: 110px;
    left: 71%;
    bottom: calc(100% - 1px);
    transform: rotate(-8deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(20deg) brightness(108%);
    z-index: -1; /* Behind footer (height ≤ 120px) */
}

/* Plant 10 (flipped) */
.plant-10 {
    height: 118px;
    left: 75%;
    bottom: calc(100% - 5px);
    transform: scaleX(-1) rotate(9deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-15deg) brightness(97%);
    z-index: -1; /* Behind footer (height ≤ 120px) */
}

/* Plant 11 */
.plant-11 {
    height: 126px;
    left: 35%;
    bottom: calc(100% - 2px);
    transform: rotate(-5deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(10deg) brightness(103%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 12 */
.plant-12 {
    height: 100px;
    left: 79%;
    bottom: calc(100% - 4px);
    transform: rotate(-6deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(12deg) brightness(98%);
    z-index: -1; /* Behind footer (height ≤ 120px) */
}

/* Plant 13 (flipped) */
.plant-13 {
    height: 115px;
    left: 83%;
    bottom: calc(100% - 3px);
    transform: scaleX(-1) rotate(8deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-22deg) brightness(104%);
    z-index: -1; /* Behind footer (height ≤ 120px) */
}

/* Plant 14 */
.plant-14 {
    height: 125px;
    left: 47%;
    bottom: calc(100% - 6px);
    transform: rotate(4deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(18deg) brightness(96%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 15 (flipped) */
.plant-15 {
    height: 135px;
    left: 51%;
    bottom: calc(100% - 2px);
    transform: scaleX(-1) rotate(-9deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-15deg) brightness(102%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 16 */
.plant-16 {
    height: 145px;
    left: 55%;
    bottom: calc(100% - 5px);
    transform: rotate(7deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(20deg) brightness(99%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 17 (flipped) */
.plant-17 {
    height: 155px;
    left: 27%;
    bottom: calc(100% - 3px);
    transform: scaleX(-1) rotate(-5deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-10deg) brightness(90%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Plant 18 */
.plant-18 {
    height: 165px;
    left: 91%;
    bottom: calc(100% - 7px);
    transform: rotate(6deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(25deg) brightness(93%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Desktop-only plants (19–26) */
.plant-19 {
    height: 175px;
    left: 31%;
    bottom: calc(100% - 4px);
    transform: scaleX(-1) rotate(-8deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-20deg) brightness(101%);
    z-index: 2; /* In front of footer (height > 120px) */
}

.plant-20 {
    height: 180px;
    left: 39%;
    bottom: calc(100% - 6px);
    transform: rotate(5deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(15deg) brightness(97%);
    z-index: 2; /* In front of footer (height > 120px) */
}

.plant-21 {
    height: 170px;
    left: 43%;
    bottom: calc(100% - 3px);
    transform: rotate(9deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-12deg) brightness(94%);
    z-index: 2; /* In front of footer (height > 120px) */
}

.plant-22 {
    height: 184px;
    left: 3%;
    bottom: calc(100% - 5px);
    transform: rotate(-7deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(22deg) brightness(105%);
    z-index: 2; /* In front of footer (height > 120px) */
}

.plant-23 {
    height: 160px;
    left: 59%;
    bottom: calc(100% - 2px);
    transform: rotate(-6deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-18deg) brightness(91%);
    z-index: 2; /* In front of footer (height > 120px) */
}

.plant-24 {
    height: 150px;
    left: 87%;
    bottom: calc(100% - 4px);
    transform: scaleX(-1) rotate(8deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(10deg) brightness(108%);
    z-index: 2; /* In front of footer (height > 120px) */
}

.plant-25 {
    height: 140px;
    left: 91%;
    bottom: calc(100% - 3px);
    transform: rotate(4deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(-25deg) brightness(92%);
    z-index: 2; /* In front of footer (height > 120px) */
}

.plant-26 {
    height: 130px;
    left: 35%;
    bottom: calc(100% - 6px);
    transform: scaleX(-1) rotate(-5deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(20deg) brightness(99%);
    z-index: 2; /* In front of footer (height > 120px) */
}

/* Media Query 3: Tablets and Medium Screens (768px - 1023px) */
@media (max-width: 1023px) {
    /* Hide desktop-only plants */
    .plant-19, .plant-20, .plant-21, .plant-22, .plant-23, .plant-24, .plant-25, .plant-26 {
        display: none;
    }

    /* Adjust plant positions for smaller screens (16 plants between edges) */
    .plant-3 { left: 3%; }
    .plant-4 { left: 7%; }
    .plant-5 { left: 13%; }
    .plant-6 { left: 19%; }
    .plant-7 { left: 25%; }
    .plant-8 { left: 31%; }
    .plant-9 { left: 37%; }
    .plant-10 { left: 43%; }
    .plant-11 { left: 49%; }
    .plant-12 { left: 55%; }
    .plant-13 { left: 61%; }
    .plant-14 { left: 67%; }
    .plant-15 { left: 73%; }
    .plant-16 { left: 79%; }
    .plant-17 { left: 85%; }
    .plant-18 { left: 91%; }
}

/* Media Query 5: Larger Screens (≥ 1024px) */
@media (min-width: 1024px) {
    /* Adjust plant positions for desktop (24 plants between edges) */
    .plant-3 { left: 63%; }
    .plant-4 { left: 67%; }
    .plant-5 { left: 11%; }
    .plant-6 { left: 15%; }
    .plant-7 { left: 19%; }
    .plant-8 { left: 23%; }
    .plant-9 { left: 71%; }
    .plant-10 { left: 75%; }
    .plant-11 { left: 35%; }
    .plant-12 { left: 79%; }
    .plant-13 { left: 83%; }
    .plant-14 { left: 47%; }
    .plant-15 { left: 51%; }
    .plant-16 { left: 55%; }
    .plant-17 { left: 27%; }
    .plant-18 { left: 91%; }
    .plant-19 { left: 31%; }
    .plant-20 { left: 39%; }
    .plant-21 { left: 43%; }
    .plant-22 { left: 3%; }
    .plant-23 { left: 59%; }
    .plant-24 { left: 87%; }
    .plant-25 { left: 91%; }
    .plant-26 { left: 35%; }
}