/* Image Animations for Vigthoria Operator */

/* Floating animation for affiliate image */
@keyframes floatImage {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 20px rgba(0, 150, 255, 0.3));
    }
    25% {
        transform: translateY(-8px) scale(1.01) rotate(-1deg);
        filter: drop-shadow(0 0 25px rgba(0, 150, 255, 0.4));
    }
    50% {
        transform: translateY(0) scale(1.03);
        filter: drop-shadow(0 0 30px rgba(0, 150, 255, 0.5));
    }
    75% {
        transform: translateY(8px) scale(1.01) rotate(1deg);
        filter: drop-shadow(0 0 25px rgba(0, 150, 255, 0.4));
    }
}

/* Glowing effect for images */
@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(0, 195, 255, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(0, 195, 255, 0.6));
    }
}

/* Animation classes that can be applied to images */
.animate-float {
    animation: floatImage 8s ease-in-out infinite;
}

.animate-glow {
    animation: glowPulse 4s ease-in-out infinite;
}

.animate-scale {
    transition: transform 0.3s ease-in-out;
}

.animate-scale:hover {
    transform: scale(1.05);
}

/* Special animation for the affiliate-graphic */
.affiliate-image img {
    animation: floatImage 8s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform, filter;
}

/* Add depth to images with 3D effects */
.image-3d-effect {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.image-3d-effect img {
    transition: transform 0.5s ease;
}

.image-3d-effect:hover img {
    transform: rotateY(10deg) rotateX(5deg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .affiliate-image img {
        animation-duration: 6s; /* Slightly faster on mobile */
    }
}