/* ========================================\n   CAMALEÃO 3D ULTRA DINÂMICO - ESTILOS\n   Efeitos visuais avançados e otimizações\n   ======================================== */\n\n/* Container otimizado para renderização 3D */\n.chameleon-walking-zone {\n    position: relative;\n    height: 80px;\n    overflow: hidden;\n    background: linear-gradient(135deg, \n        rgba(94, 234, 212, 0.05) 0%, \n        rgba(240, 171, 252, 0.08) 30%,\n        rgba(20, 184, 166, 0.05) 70%,\n        rgba(94, 234, 212, 0.03) 100%);\n    border-radius: var(--radius-xl);\n    cursor: crosshair;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    \n    /* Otimizações de performance */\n    will-change: background;\n    transform: translateZ(0);\n    backface-visibility: hidden;\n}\n\n.chameleon-walking-zone:hover {\n    background: linear-gradient(135deg, \n        rgba(94, 234, 212, 0.1) 0%, \n        rgba(240, 171, 252, 0.12) 30%,\n        rgba(20, 184, 166, 0.1) 70%,\n        rgba(94, 234, 212, 0.08) 100%);\n    box-shadow: \n        inset 0 2px 4px rgba(94, 234, 212, 0.1),\n        0 4px 12px rgba(94, 234, 212, 0.15);\n}\n\n/* Efeitos de profundidade e atmosfera */\n.chameleon-walking-zone::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: \n        radial-gradient(ellipse 100px 20px at 30% 80%, rgba(94, 234, 212, 0.1) 0%, transparent 70%),\n        radial-gradient(ellipse 80px 15px at 70% 85%, rgba(240, 171, 252, 0.08) 0%, transparent 70%),\n        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%);\n    pointer-events: none;\n    animation: ambient-glow 4s ease-in-out infinite alternate;\n}\n\n/* Canvas 3D otimizado */\n.chameleon-walking-zone canvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 10;\n    \n    /* Melhor qualidade de renderização */\n    image-rendering: -webkit-optimize-contrast;\n    image-rendering: crisp-edges;\n    image-rendering: pixelated;\n    \n    /* Otimizações WebGL */\n    will-change: transform, opacity;\n    transform: translateZ(0);\n}\n\n/* Indicadores visuais de interatividade */\n.chameleon-walking-zone::after {\n    content: \"🦎 Camaleão explorador\";\n    position: absolute;\n    top: 5px;\n    left: 10px;\n    font-size: 10px;\n    color: rgba(94, 234, 212, 0.6);\n    font-weight: 600;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    pointer-events: none;\n    font-family: var(--font-heading);\n}\n\n.chameleon-walking-zone:hover::after {\n    opacity: 1;\n}\n\n/* Estados de debugging (removível em produção) */\n.chameleon-debug-mode .chameleon-walking-zone {\n    border: 2px dashed rgba(94, 234, 212, 0.3);\n}\n\n.chameleon-debug-mode .chameleon-walking-zone::after {\n    content: \"🔧 Modo Debug Ativo\";\n    opacity: 1;\n    color: #ff6b9d;\n}\n\n/* Efeitos de partículas ambiente */\n@keyframes ambient-glow {\n    0% {\n        opacity: 0.8;\n        filter: brightness(1);\n    }\n    50% {\n        opacity: 1;\n        filter: brightness(1.1);\n    }\n    100% {\n        opacity: 0.9;\n        filter: brightness(1.05);\n    }\n}\n\n/* Animações de contexto */\n@keyframes subtle-pulse {\n    0%, 100% {\n        box-shadow: \n            inset 0 2px 4px rgba(94, 234, 212, 0.05),\n            0 2px 8px rgba(94, 234, 212, 0.1);\n    }\n    50% {\n        box-shadow: \n            inset 0 2px 6px rgba(94, 234, 212, 0.08),\n            0 4px 12px rgba(94, 234, 212, 0.15);\n    }\n}\n\n/* Estado ativo quando camaleão está \"caçando\" */\n.chameleon-walking-zone.hunting-mode {\n    background: linear-gradient(135deg, \n        rgba(255, 107, 157, 0.08) 0%, \n        rgba(255, 23, 68, 0.05) 50%,\n        rgba(94, 234, 212, 0.08) 100%);\n    animation: hunting-pulse 0.8s ease-in-out infinite alternate;\n}\n\n@keyframes hunting-pulse {\n    0% {\n        box-shadow: \n            inset 0 2px 4px rgba(255, 107, 157, 0.1),\n            0 4px 12px rgba(255, 107, 157, 0.15);\n    }\n    100% {\n        box-shadow: \n            inset 0 2px 6px rgba(255, 107, 157, 0.15),\n            0 6px 16px rgba(255, 107, 157, 0.2);\n    }\n}\n\n/* Responsividade aprimorada */\n@media (max-width: 768px) {\n    .chameleon-walking-zone {\n        height: 60px;\n        margin: var(--space-4) 0;\n    }\n    \n    .chameleon-walking-zone::after {\n        font-size: 8px;\n        top: 3px;\n        left: 8px;\n    }\n}\n\n@media (max-width: 480px) {\n    .chameleon-walking-zone {\n        height: 50px;\n        border-radius: var(--radius-lg);\n    }\n    \n    .chameleon-walking-zone::after {\n        display: none; /* Remove texto em telas muito pequenas */\n    }\n}\n\n/* Efeitos especiais para interações */\n.chameleon-walking-zone.excited {\n    animation: excited-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n@keyframes excited-bounce {\n    0% {\n        transform: scale(1);\n        filter: brightness(1);\n    }\n    25% {\n        transform: scale(1.05);\n        filter: brightness(1.2) saturate(1.3);\n    }\n    50% {\n        transform: scale(1.08);\n        filter: brightness(1.4) saturate(1.5);\n    }\n    75% {\n        transform: scale(1.02);\n        filter: brightness(1.1) saturate(1.2);\n    }\n    100% {\n        transform: scale(1);\n        filter: brightness(1);\n    }\n}\n\n/* Otimizações de acessibilidade */\n@media (prefers-reduced-motion: reduce) {\n    .chameleon-walking-zone,\n    .chameleon-walking-zone::before,\n    .chameleon-walking-zone::after {\n        animation: none !important;\n        transition: none !important;\n    }\n    \n    .chameleon-walking-zone::after {\n        content: \"🦎 Camaleão (animações reduzidas)\";\n        opacity: 0.7;\n    }\n}\n\n/* Alto contraste */\n@media (prefers-contrast: high) {\n    .chameleon-walking-zone {\n        background: rgba(94, 234, 212, 0.2);\n        border: 2px solid #14b8a6;\n    }\n    \n    .chameleon-walking-zone:hover {\n        background: rgba(94, 234, 212, 0.3);\n        border-color: #0d9488;\n    }\n}\n\n/* Print styles */\n@media print {\n    .chameleon-walking-zone {\n        display: none !important;\n    }\n}\n\n/* Estados especiais para desenvolvimento */\n@media (max-width: 1024px) and (min-width: 769px) {\n    .chameleon-walking-zone {\n        height: 70px;\n    }\n}\n\n/* Efeitos de loading inicial */\n.chameleon-walking-zone.loading {\n    background: linear-gradient(90deg, \n        rgba(94, 234, 212, 0.05) 0%, \n        rgba(94, 234, 212, 0.1) 50%, \n        rgba(94, 234, 212, 0.05) 100%);\n    background-size: 200% 100%;\n    animation: loading-shimmer 2s ease-in-out infinite;\n}\n\n@keyframes loading-shimmer {\n    0% {\n        background-position: -200% 0;\n    }\n    100% {\n        background-position: 200% 0;\n    }\n}\n\n/* Efeito quando camaleão está \"pensando\" */\n.chameleon-walking-zone.thinking {\n    position: relative;\n}\n\n.chameleon-walking-zone.thinking::before {\n    animation: thinking-dots 1.5s ease-in-out infinite;\n}\n\n@keyframes thinking-dots {\n    0%, 20% {\n        opacity: 0.3;\n        transform: scale(0.8);\n    }\n    50% {\n        opacity: 0.8;\n        transform: scale(1.1);\n    }\n    80%, 100% {\n        opacity: 0.4;\n        transform: scale(0.9);\n    }\n}\n\n/* Indicador de performance */\n.chameleon-walking-zone[data-fps=\"low\"]::after {\n    content: \"🦎 Modo Performance\";\n    color: rgba(255, 193, 7, 0.8);\n}\n\n.chameleon-walking-zone[data-fps=\"high\"]::after {\n    content: \"🦎 Ultra Qualidade\";\n    color: rgba(76, 175, 80, 0.8);\n}"