/* mCream Edibles - Edibles Gallery Styles */

/* Mobile scrolling improvements for edibles */
@media (max-width: 768px) {
    /* Optimize animations for mobile performance */
    .edible-item {
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* Reduce animation complexity on mobile for better performance */
    .edible-item img {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* Edibles Gallery Styles */
.edibles-gallery {
    position: relative;
    width: 100%;
    height: 80vh;
    max-height: 600px;
    min-height: 500px;
    margin: 30px 0;
    overflow: hidden;
}

.edible-item {
    position: absolute;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 1;
}

.edible-item:hover {
    z-index: 10;
    transform: scale(1.1);
}

.edible-item img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.edible-item:hover img {
    transform: scale(1.05);
}

/* Drink items (edible-1 and edible-6) are 25% bigger */
.edible-1 img,
.edible-6 img {
    width: 225px;
    height: 225px;
}

/* Individual edible positioning and floating animations */
.edible-1 {
    top: 10%;
    left: 15%;
    animation: float-edible-1 6s ease-in-out infinite;
}

.edible-3 {
    top: 25%;
    left: 5%;
    animation: float-edible-3 5.5s ease-in-out infinite;
}

.edible-4 {
    top: 20%;
    right: 10%;
    animation: float-edible-4 6.5s ease-in-out infinite;
}

.edible-5 {
    top: 45%;
    left: 20%;
    animation: float-edible-5 5s ease-in-out infinite;
}

.edible-6 {
    top: 40%;
    right: 25%;
    animation: float-edible-6 7.5s ease-in-out infinite;
}

.edible-7 {
    top: 60%;
    left: 10%;
    animation: float-edible-7 6.2s ease-in-out infinite;
}

.edible-8 {
    top: 55%;
    right: 15%;
    animation: float-edible-8 5.8s ease-in-out infinite;
}

.edible-9 {
    top: 75%;
    left: 25%;
    animation: float-edible-9 6.8s ease-in-out infinite;
}

.edible-10 {
    top: 70%;
    right: 5%;
    animation: float-edible-10 5.3s ease-in-out infinite;
}

.edible-11 {
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    animation: float-edible-11 6.7s ease-in-out infinite;
}

.edible-12 {
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation: float-edible-12 5.7s ease-in-out infinite;
}

/* Floating animations for edibles */
@keyframes float-edible-1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(8deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    75% { transform: translateY(-15px) rotate(-3deg); }
}

@keyframes float-edible-3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(6deg); }
    50% { transform: translateY(-18px) rotate(4deg); }
    75% { transform: translateY(-12px) rotate(-2deg); }
}

@keyframes float-edible-4 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-11px) rotate(-4deg); }
    50% { transform: translateY(-22px) rotate(-2deg); }
    75% { transform: translateY(-16px) rotate(5deg); }
}

@keyframes float-edible-5 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(5deg); }
    50% { transform: translateY(-16px) rotate(3deg); }
    75% { transform: translateY(-10px) rotate(-4deg); }
}

@keyframes float-edible-6 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-14px) rotate(-7deg); }
    50% { transform: translateY(-24px) rotate(-4deg); }
    75% { transform: translateY(-18px) rotate(6deg); }
}

@keyframes float-edible-7 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-9px) rotate(4deg); }
    50% { transform: translateY(-19px) rotate(2deg); }
    75% { transform: translateY(-13px) rotate(-5deg); }
}

@keyframes float-edible-8 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-7deg); }
    50% { transform: translateY(-21px) rotate(-5deg); }
    75% { transform: translateY(-15px) rotate(3deg); }
}

@keyframes float-edible-9 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-7px) rotate(6deg); }
    50% { transform: translateY(-17px) rotate(4deg); }
    75% { transform: translateY(-11px) rotate(-3deg); }
}

@keyframes float-edible-10 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-13px) rotate(-5deg); }
    50% { transform: translateY(-23px) rotate(-3deg); }
    75% { transform: translateY(-17px) rotate(4deg); }
}

@keyframes float-edible-11 {
    0%, 100% { transform: translateX(-50%) translateY(0px) rotate(0deg); }
    25% { transform: translateX(-50%) translateY(-8px) rotate(6deg); }
    50% { transform: translateX(-50%) translateY(-20px) rotate(3deg); }
    75% { transform: translateX(-50%) translateY(-14px) rotate(-4deg); }
}

@keyframes float-edible-12 {
    0%, 100% { transform: translateX(-50%) translateY(0px) rotate(0deg); }
    25% { transform: translateX(-50%) translateY(-7px) rotate(-4deg); }
    50% { transform: translateX(-50%) translateY(-18px) rotate(-2deg); }
    75% { transform: translateX(-50%) translateY(-12px) rotate(5deg); }
}

/* Mobile responsiveness for Edibles Gallery */
@media (max-width: 768px) {
    .edibles-gallery {
        height: 70vh;
        max-height: 500px;
        min-height: 400px;
        margin: 20px 0;
    }
    
    .edible-item img {
        width: 150px;
        height: 150px;
    }
    
    /* Drink items 25% bigger on tablet */
    .edible-1 img,
    .edible-6 img {
        width: 188px;
        height: 188px;
    }
    
    .edible-1 {
        top: 15%;
        left: 10%;
    }
    
    .edible-3 {
        top: 30%;
        left: 5%;
    }
    
    .edible-4 {
        top: 25%;
        right: 8%;
    }
    
    .edible-5 {
        top: 50%;
        left: 15%;
    }
    
    .edible-6 {
        top: 45%;
        right: 20%;
    }
    
    .edible-7 {
        top: 65%;
        left: 8%;
    }
    
    .edible-8 {
        top: 60%;
        right: 12%;
    }
    
    .edible-9 {
        top: 80%;
        left: 20%;
    }
    
    .edible-10 {
        top: 75%;
        right: 5%;
    }
    
    .edible-11 {
        top: 20%;
    }
    
    .edible-12 {
        top: 55%;
    }
}

@media (max-width: 480px) {
    .edibles-gallery {
        height: 60vh;
        max-height: 400px;
        min-height: 300px;
        margin: 15px 0;
    }
    
    .edible-item img {
        width: 100px;
        height: 100px;
    }
    
    /* Drink items 25% bigger on mobile */
    .edible-1 img,
    .edible-6 img {
        width: 125px;
        height: 125px;
    }
    
    .edible-1 {
        top: 20%;
        left: 8%;
    }
    
    .edible-3 {
        top: 35%;
        left: 3%;
    }
    
    .edible-4 {
        top: 30%;
        right: 6%;
    }
    
    .edible-5 {
        top: 55%;
        left: 12%;
    }
    
    .edible-6 {
        top: 50%;
        right: 15%;
    }
    
    .edible-7 {
        top: 70%;
        left: 6%;
    }
    
    .edible-8 {
        top: 65%;
        right: 10%;
    }
    
    .edible-9 {
        top: 85%;
        left: 15%;
    }
    
    .edible-10 {
        top: 80%;
        right: 3%;
    }
    
    .edible-11 {
        top: 25%;
    }
    
    .edible-12 {
        top: 60%;
    }
}