/* ========================================
   CAMALEÃO INTERATIVO CHARMOSO - ESTILOS
   ======================================== */

.interactive-chameleon-container {
    position: fixed;
    bottom: 120px;
    right: 30px;
    width: 120px;
    height: 80px;
    z-index: 1000;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-chameleon-container:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 8px 25px rgba(94, 234, 212, 0.4));
}

.interactive-chameleon-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: all 0.3s ease;
}

/* Elementos do camaleão */
.chameleon-shadow {
    opacity: 0.3;
    animation: shadow-pulse 4s ease-in-out infinite;
}

.chameleon-body {
    fill: #5eead4;
    transition: fill 0.8s ease-in-out;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.chameleon-head {
    fill: #5eead4;
    transition: fill 0.8s ease-in-out;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.chameleon-tail {
    stroke: #5eead4;
    transition: stroke 0.8s ease-in-out;
    animation: tail-sway 3s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.chameleon-leg {
    fill: #14b8a6;
    transition: fill 0.8s ease-in-out;
}

.chameleon-crest {
    stroke: #14b8a6;
    transition: stroke 0.8s ease-in-out;
    animation: crest-shimmer 4s ease-in-out infinite;
}

/* Olhos expressivos */
.chameleon-eyes {
    transform-origin: center;
}

.eye-socket {
    transition: all 0.2s ease-out;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.eye-pupil {
    transition: all 0.1s ease-out;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.eye-shine {
    animation: shine-twinkle 3s ease-in-out infinite;
}

/* Boca */
.chameleon-mouth {
    transition: all 0.3s ease;
}

.interactive-chameleon-container:hover .chameleon-mouth {
    stroke: #ff69b4;
    transform: translateY(-1px);
}

/* Língua interativa */
.chameleon-tongue {
    opacity: 0;
    transform: scaleX(0.1) translateX(10px);
    transform-origin: 18px 45px;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.chameleon-tongue path {
    stroke: #ff6b9d;
    filter: drop-shadow(0 2px 4px rgba(255, 107, 157, 0.4));
}

.chameleon-tongue circle {
    fill: #ff1744;
    filter: drop-shadow(0 2px 4px rgba(255, 23, 68, 0.4));
}

/* Partículas mágicas */
.magic-particles circle {
    transition: all 0.3s ease-out;
    filter: drop-shadow(0 0 3px currentColor);
}

/* Tooltip de interação */
.interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    animation: hint-float 2s ease-in-out infinite;
}

/* Animações */
@keyframes shadow-pulse {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.4; 
        transform: scale(1.1);
    }
}

@keyframes tail-sway {
    0%, 100% { 
        transform: rotate(0deg);
    }
    25% { 
        transform: rotate(3deg);
    }
    75% { 
        transform: rotate(-3deg);
    }
}

@keyframes crest-shimmer {
    0%, 100% { 
        opacity: 1;
        stroke-width: 3;
    }
    50% { 
        opacity: 0.7;
        stroke-width: 4;
    }
}

@keyframes shine-twinkle {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.5;
        transform: scale(0.8);
    }
}

@keyframes hint-float {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(-3px);
    }
}

/* Estados de interação */
.interactive-chameleon-container:active {
    transform: scale(0.95);
}

.interactive-chameleon-container:active .interactive-chameleon-svg {
    animation: happy-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes happy-bounce {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(5deg); }
    50% { transform: scale(1.1) rotate(-3deg); }
    75% { transform: scale(1.05) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Efeitos especiais quando clicado */
.chameleon-excited .chameleon-body {
    animation: color-rainbow 1s linear;
}

.chameleon-excited .magic-particles circle {
    animation: particle-explode 1s ease-out;
}

@keyframes color-rainbow {
    0% { fill: #ff0000; }
    16% { fill: #ff8000; }
    33% { fill: #ffff00; }
    50% { fill: #00ff00; }
    66% { fill: #0080ff; }
    83% { fill: #8000ff; }
    100% { fill: #ff0080; }
}

@keyframes particle-explode {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(3) translate(var(--random-x, 20px), var(--random-y, -30px));
    }
    100% {
        opacity: 0;
        transform: scale(0) translate(var(--random-x, 40px), var(--random-y, -60px));
    }
}

/* Responsividade */
@media (max-width: 768px) {
    .interactive-chameleon-container {
        bottom: 90px;
        right: 20px;
        width: 100px;
        height: 66px;
    }
    
    .interaction-hint {
        font-size: 6px;
    }
}

@media (max-width: 480px) {
    .interactive-chameleon-container {
        bottom: 70px;
        right: 15px;
        width: 80px;
        height: 53px;
    }
}

/* Acessibilidade - reduzir animações se preferido */
@media (prefers-reduced-motion: reduce) {
    .interactive-chameleon-container,
    .interactive-chameleon-svg,
    .chameleon-tail,
    .chameleon-shadow,
    .eye-shine,
    .interaction-hint {
        animation: none !important;
    }
    
    .interactive-chameleon-container:hover {
        transform: scale(1.05);
    }
}

/* Easter egg - combinação especial de clicks */
.chameleon-super-excited {
    animation: super-celebration 2s ease-out;
}

@keyframes super-celebration {
    0% { transform: scale(1) rotate(0deg); }
    10% { transform: scale(1.3) rotate(15deg); }
    20% { transform: scale(1.2) rotate(-15deg); }
    30% { transform: scale(1.4) rotate(25deg); }
    40% { transform: scale(1.1) rotate(-10deg); }
    50% { transform: scale(1.5) rotate(30deg); }
    60% { transform: scale(1.2) rotate(-20deg); }
    70% { transform: scale(1.3) rotate(15deg); }
    80% { transform: scale(1.1) rotate(-5deg); }
    90% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Efeito especial de hover prolongado */
.interactive-chameleon-container.long-hover .chameleon-body {
    animation: gentle-glow 2s ease-in-out infinite;
}

@keyframes gentle-glow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(94, 234, 212, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(94, 234, 212, 0.6));
    }
}