/**
 * Alygen Orb Frontend Styles
 */

/* Base orb container */
.alygen-orb-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Base orb element */
.alygen-orb {
    position: absolute;
    width: 100px; /* Default size, will be overridden by JS */
    height: 100px; /* Default size, will be overridden by JS */
    border-radius: 50%;
    background: #3498db; /* Default color, will be overridden by JS */
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Ensure blend mode works correctly */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    isolation: isolate;
    will-change: transform, opacity, mix-blend-mode;
    /* Reset properties that might affect blend mode */
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

/* Follow cursor effect */
.alygen-orb-container.follow-cursor {
    transition: all 0.1s ease-out;
}

/* Rotation animation */
@keyframes orbRotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.alygen-orb.rotation-effect {
    animation: orbRotation 4s infinite linear;
}

/* Pulse animation */
@keyframes orbPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.alygen-orb.pulse-effect {
    animation: orbPulse 2s infinite ease-in-out;
}

/* Mirror effect */
.alygen-orb.mirror-effect::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50%;
    opacity: 0.3;
    transform: scaleY(-1);
    filter: blur(2px);
    z-index: -1;
}

/* Saber effect */
.alygen-orb.saber-effect {
    position: relative;
    overflow: visible;
}

.alygen-orb.saber-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 2px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    transform: translate(-50%, -50%);
    opacity: 0.7;
    animation: saberGlow 3s infinite ease-in-out;
}

@keyframes saberGlow {
    0%, 100% { 
        width: 200%;
        opacity: 0.7;
    }
    50% { 
        width: 300%;
        opacity: 1;
    }
}

/* Space for future effects */

/* Glow effect */
.alygen-orb.glow-effect {
    box-shadow: 
        0 0 20px currentColor,
        0 0 40px currentColor,
        0 0 60px currentColor,
        0 0 80px rgba(255, 255, 255, 0.5);
    animation: intenseGlow 2s infinite alternate;
}

@keyframes intenseGlow {
    0% { 
        filter: brightness(1) saturate(1);
        box-shadow: 
            0 0 20px currentColor,
            0 0 40px currentColor,
            0 0 60px currentColor,
            0 0 80px rgba(255, 255, 255, 0.5);
    }
    100% { 
        filter: brightness(1.5) saturate(1.5);
        box-shadow: 
            0 0 30px currentColor,
            0 0 60px currentColor,
            0 0 90px currentColor,
            0 0 120px rgba(255, 255, 255, 0.8);
    }
}

/* Waves effect */
.alygen-orb.waves-effect {
    animation: waveDistortion 4s infinite ease-in-out;
}

@keyframes waveDistortion {
    0%, 100% { 
        border-radius: 50%;
        transform: scale(1);
    }
    25% { 
        border-radius: 45% 55% 48% 52% / 52% 45% 55% 48%;
        transform: scale(1.02);
    }
    50% { 
        border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%;
        transform: scale(0.98);
    }
    75% { 
        border-radius: 48% 52% 55% 45% / 55% 48% 52% 45%;
        transform: scale(1.01);
    }
}

/* Frosted Glass Effect */
.alygen-orb.frosted-glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Corrigido de -webkit-backpack-filter */
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    /* Garantir compatibilidade com blend mode */
    isolation: isolate;
    position: relative;
    z-index: 1;
    /* Forçar aceleração de hardware */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    /* Garantir que o blend mode funcione */
    mix-blend-mode: normal;
}

/* Garantir que os efeitos de overlay não interfiram no blend mode */
.alygen-orb::before,
.alygen-orb::after {
    mix-blend-mode: inherit !important;
}

/* Reset de blend mode em elementos internos que podem herdar incorretamente */
.alygen-orb * {
    mix-blend-mode: normal !important;
}

/* Visual Presets */

/* Default preset */
.alygen-orb.preset-default {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Neon preset */
.alygen-orb.preset-neon {
    background: linear-gradient(135deg, #00f5ff 0%, #ff00ff 100%);
    box-shadow: 
        0 0 20px currentColor,
        0 0 40px currentColor,
        0 0 60px currentColor,
        0 4px 15px rgba(0, 245, 255, 0.3);
    animation: neonFlicker 2s infinite alternate;
}

@keyframes neonFlicker {
    0%, 100% { 
        filter: brightness(1) saturate(1);
    }
    50% { 
        filter: brightness(1.2) saturate(1.3);
    }
}

/* Galaxy preset */
.alygen-orb.preset-galaxy {
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #9b59b6 25%, #3498db 50%, #000000 100%);
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.5),
        0 0 60px rgba(155, 89, 182, 0.3),
        0 4px 20px rgba(52, 152, 219, 0.2);
    position: relative;
}

.alygen-orb.preset-galaxy::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: galaxyTwinkle 3s infinite ease-in-out;
}

@keyframes galaxyTwinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Fire preset */
.alygen-orb.preset-fire {
    background: radial-gradient(circle at 50% 80%, #ff6b35 0%, #f7931e 30%, #ff4500 60%, #8b0000 100%);
    box-shadow: 
        0 0 25px #ff6b35,
        0 0 50px #f7931e,
        0 4px 20px rgba(255, 107, 53, 0.4);
    animation: fireFlicker 1.5s infinite ease-in-out alternate;
}

@keyframes fireFlicker {
    0% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% { 
        transform: scale(1.02) rotate(1deg);
        filter: brightness(1.1);
    }
    50% { 
        transform: scale(0.98) rotate(-1deg);
        filter: brightness(0.9);
    }
    75% { 
        transform: scale(1.01) rotate(0.5deg);
        filter: brightness(1.05);
    }
    100% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

/* Water preset */
.alygen-orb.preset-water {
    background: radial-gradient(circle at 30% 30%, #87ceeb 0%, #00bfff 40%, #0080ff 70%, #003d82 100%);
    box-shadow: 
        0 0 25px rgba(0, 191, 255, 0.6),
        0 0 50px rgba(0, 128, 255, 0.4),
        0 4px 20px rgba(135, 206, 235, 0.3);
    animation: waterRipple 4s infinite ease-in-out;
}

@keyframes waterRipple {
    0%, 100% { 
        border-radius: 50%;
        transform: scale(1);
    }
    25% { 
        border-radius: 45% 55% 50% 50%;
        transform: scale(1.02);
    }
    50% { 
        border-radius: 50% 50% 45% 55%;
        transform: scale(0.98);
    }
    75% { 
        border-radius: 55% 45% 50% 50%;
        transform: scale(1.01);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .alygen-orb-container {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@media (max-width: 480px) {
    .alygen-orb-container {
        transform: translate(-50%, -50%) scale(0.6);
    }
}

/* Accessibility - Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .alygen-orb,
    .alygen-orb::before,
    .alygen-orb::after {
        animation: none !important;
        transition: none !important;
    }
    
    .alygen-orb-container.follow-cursor {
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .alygen-orb {
        border: 2px solid currentColor;
    }
}

/* Blur effect utility */
.alygen-orb.blur-light {
    filter: blur(2px);
}

.alygen-orb.blur-medium {
    filter: blur(5px);
}

.alygen-orb.blur-heavy {
    filter: blur(10px);
}

/* Performance optimizations */
.alygen-orb-container,
.alygen-orb,
.alygen-orb::before,
.alygen-orb::after {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Hide orb when printing */
@media print {
    .alygen-orb-container {
        display: none !important;
    }
}