/* Pearl Visual Theme Styles */

.pearl {
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    transform-origin: center center;
    position: relative;
    overflow: hidden;
}

/* Solid Color Pearl */
.pearl-solid {
    background: 
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 25%, rgba(200,220,255,0.6) 50%, rgba(100,150,200,0.5) 75%, rgba(50,100,150,0.4) 100%);
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.3),
        0 0 20px rgba(255,255,255,0.4),
        inset -8px -8px 20px rgba(0,0,0,0.2),
        inset 8px 8px 20px rgba(255,255,255,0.6),
        inset 0 0 30px rgba(200,220,255,0.3);
}

/* Swirl Pattern Pearl */
.pearl-swirl {
    background: 
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 15%, transparent 30%),
        conic-gradient(from 0deg at 50% 50%, 
            rgba(255,100,150,0.8) 0deg,
            rgba(100,150,255,0.8) 90deg,
            rgba(150,255,100,0.8) 180deg,
            rgba(255,200,100,0.8) 270deg,
            rgba(255,100,150,0.8) 360deg);
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.3),
        0 0 20px rgba(255,255,255,0.4),
        inset -8px -8px 20px rgba(0,0,0,0.2),
        inset 8px 8px 20px rgba(255,255,255,0.6),
        inset 0 0 30px rgba(255,255,255,0.2);
}

/* Cat's Eye Pearl */
.pearl-catseye {
    background: 
        radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 15%, transparent 35%),
        radial-gradient(ellipse at 50% 70%, rgba(50,100,150,0.6) 0%, rgba(100,150,200,0.4) 50%, transparent 100%),
        linear-gradient(135deg, 
            rgba(255,255,255,0.9) 0%,
            rgba(200,220,255,0.7) 25%,
            rgba(100,150,200,0.6) 50%,
            rgba(200,220,255,0.7) 75%,
            rgba(255,255,255,0.9) 100%);
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.3),
        0 0 20px rgba(255,255,255,0.4),
        inset -8px -8px 20px rgba(0,0,0,0.2),
        inset 8px 8px 20px rgba(255,255,255,0.6),
        inset 0 0 30px rgba(200,220,255,0.3);
}

.pearl::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 30%;
    width: 40%;
    height: 40%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

@keyframes pearl-roll {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pearl-birth {
    from {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

@keyframes pearl-end {
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    to {
        opacity: 0;
        transform: scale(0) rotate(180deg);
    }
}

.aurora-pulse.pearl {
    animation: pearl-pulse 2.5s ease-in-out infinite;
}

@keyframes pearl-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 4px 12px rgba(0,0,0,0.3),
            0 0 24px rgba(255,255,255,0.5),
            inset -8px -8px 20px rgba(0,0,0,0.2),
            inset 8px 8px 20px rgba(255,255,255,0.65),
            inset 0 0 35px rgba(200,220,255,0.4);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 
            0 7px 20px rgba(0,0,0,0.4),
            0 0 35px rgba(255,255,255,0.7),
            inset -11px -11px 28px rgba(0,0,0,0.28),
            inset 11px 11px 28px rgba(255,255,255,0.85),
            inset 0 0 45px rgba(200,220,255,0.6);
    }
}

.aurora-animate.pearl {
    animation: pearl-animate 4s ease-in-out infinite;
}

@keyframes pearl-animate {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(25px, -20px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 25px) scale(0.9);
    }
    75% {
        transform: translate(20px, 20px) scale(1.05);
    }
}

/* Enhanced styling for colored pearls */
.pearl[style*="background"] {
    opacity: 0.95 !important;
    box-shadow: 
        0 5px 15px rgba(0,0,0,0.35),
        0 0 25px rgba(255,255,255,0.5),
        inset -9px -9px 22px rgba(0,0,0,0.22),
        inset 9px 9px 22px rgba(255,255,255,0.7),
        inset 0 0 35px rgba(200,220,255,0.4);
}

.pearl[style*="background"]::before {
    opacity: 1;
    background: radial-gradient(ellipse, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
}