/* Chameleon Mascot Styles (PNG version) */

.chameleon-mascot {
    width: 220px;
    height: auto;
    max-width: 100%;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: hue-rotate(0deg) saturate(1) brightness(1);
    will-change: filter, transform;
}

/* Indica hover - purple (green 120deg -> purple 280deg = +160deg) */
.chameleon-mascot.indica-hover {
    filter: hue-rotate(160deg) saturate(1.4) brightness(0.85);
    transform: scaleX(-1) scale(1.08);
}

/* Sativa hover - strawberry red (green 120deg -> red 0deg) */
.chameleon-mascot.sativa-hover {
    filter: hue-rotate(255deg) saturate(2.5) brightness(0.95);
    transform: scale(1.08);
}

/* Chameleon bounce animation on page load */
@keyframes chameleonAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    60% {
        transform: scale(1.1) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.chameleon-mascot {
    animation: chameleonAppear 0.8s ease-out;
}

/* Subtle idle floating animation */
@keyframes chameleonFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.chameleon-wrapper {
    animation: chameleonFloat 3s ease-in-out infinite;
    animation-delay: 0.8s;
}