/* ==========================================
   PREMIUM ANIMATED ICONS
   Professional icons with modern animations
   Brand colors: #ffd6ff, #e7c6ff, #c8b6ff, #b8c0ff, #bbd0ff
   ========================================== */

/* Icon Base Styles - ALL CENTERED */
.icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Unified Icon Style - Brand Colors */
.glow-icon,
.pulse-icon,
.blob-icon,
.glass-icon,
.gradient-shift-icon,
.neon-icon,
.rotate-border-icon > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: linear-gradient(135deg, #ffd6ff 0%, #c8b6ff 50%, #bbd0ff 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(200, 182, 255, 0.4);
    transition: all 0.3s ease;
}

.glow-icon::before,
.pulse-icon::before,
.blob-icon::before,
.glass-icon::before,
.gradient-shift-icon::before {
    /* Glow effect removed for performance */
    content: none;
}

.glow-icon:hover,
.pulse-icon:hover,
.blob-icon:hover,
.glass-icon:hover,
.gradient-shift-icon:hover {
    transform: translateY(-3px);
}

/* Pulse Ring Animation - Removed for performance */

/* Rotating Border Icon */
.rotate-border-icon {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.rotate-border-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, #ffd6ff 0%, #e7c6ff 25%, #c8b6ff 50%, #b8c0ff 75%, #bbd0ff 100%);
    border-radius: 20px;
    z-index: -1;
    animation: spin-border 4s linear infinite;
    background-size: 300% 300%;
}

@keyframes spin-border {
    0% {
        background-position: 0% 50%;
        transform: rotate(0deg);
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
        transform: rotate(360deg);
    }
}

/* Neon Glow Icon - Updated to brand colors */
@keyframes neon-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(200, 182, 255, 0.4),
            0 0 40px rgba(187, 208, 255, 0.3),
            inset 0 0 20px rgba(200, 182, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(200, 182, 255, 0.6),
            0 0 60px rgba(187, 208, 255, 0.5),
            inset 0 0 30px rgba(200, 182, 255, 0.2);
    }
}

/* Glassmorphism Icon - Simplified */
.glass-icon {
    /* Glass effects removed for performance */
}

/* 3D Flip Icon - Unified */
.flip-icon {
    position: relative;
    width: 80px;
    height: 80px;
    perspective: 1000px;
    margin: 0 auto;
}

.flip-icon-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-icon:hover .flip-icon-inner {
    transform: rotateY(180deg);
}

.flip-icon-front,
.flip-icon-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffd6ff 0%, #c8b6ff 50%, #bbd0ff 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(200, 182, 255, 0.3);
}

.flip-icon-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #e7c6ff 0%, #b8c0ff 100%);
}

/* Bouncing Icon */
.bounce-icon {
    /* Animation removed for performance */
}

/* Gradient Blob Icon - Unified */
.blob-icon {
    border-radius: 20px;
}

/* Gradient Shift Icon - Unified */
.gradient-shift-icon {
    /* Gradient animation removed for performance */
}

/* Particle Icon - Unified (particles removed, using glass effect) */
.particle-icon {
    overflow: visible;
}

@keyframes particle-float {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    50% {
        transform: translateY(30px) scale(0.5);
        opacity: 1;
    }
}

/* Ensure SVG is centered and properly sized */
.glow-icon svg,
.pulse-icon svg,
.blob-icon svg,
.glass-icon svg,
.gradient-shift-icon svg,
.neon-icon svg {
    position: relative;
    z-index: 2;
    display: block;
}

/* Scale Pulse Icon */
.scale-pulse-icon {
    /* Animation removed for performance */
}

/* Shake Icon on Hover */
.shake-icon:hover {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Spin Icon */
.spin-icon {
    animation: spin-continuous 3s linear infinite;
}

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