/* Google Preferred Source Button Animations */

/* Fade In Animation */
@keyframes gpswp-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gpswp-animation-fade-in {
    animation: gpswp-fade-in 0.6s ease-out forwards;
}

/* Wiggle Animation */
@keyframes gpswp-wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-3deg);
    }
    75% {
        transform: rotate(3deg);
    }
}

.gpswp-animation-wiggle {
    animation: gpswp-wiggle 0.5s ease-in-out infinite;
    animation-delay: 1s; /* Start after 1 second */
    animation-iteration-count: 3; /* Wiggle 3 times */
}

/* Bounce Animation */
@keyframes gpswp-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.gpswp-animation-bounce {
    animation: gpswp-bounce 1s ease-in-out;
    animation-delay: 0.5s; /* Start after 0.5 seconds */
}

/* Pulse Animation - Heartbeat effect with scale and box-shadow */
@keyframes gpswp-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
        background-color: transparent;
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(66, 133, 244, 0.2);
        background-color: rgba(0, 0, 0, 0.1);
    }
}

.gpswp-animation-pulse {
    animation: gpswp-pulse 1.5s ease-in-out forwards;
    border-radius: 4px;
    display: inline-block;
}

/* Glow Animation - Outer box-shadow that grows and fades */
@keyframes gpswp-glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(66, 133, 244, 0.4),
                    0 0 16px rgba(66, 133, 244, 0.3),
                    0 0 24px rgba(66, 133, 244, 0.2);
    }
    50% {
        box-shadow: 0 0 12px rgba(66, 133, 244, 0.6),
                    0 0 24px rgba(66, 133, 244, 0.4),
                    0 0 36px rgba(66, 133, 244, 0.3);
    }
}

.gpswp-animation-glow {
    animation: gpswp-glow 2s ease-in-out infinite;
    border-radius: 6px;
    display: inline-block;
}

/* Ease It Animation - Smooth ease-in-out with gentle fade and scale */
@keyframes gpswp-ease-it {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gpswp-animation-ease-it {
    animation: gpswp-ease-it 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Nudge Left Animation - Nudges back and forth horizontally */
@keyframes gpswp-nudge-left {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-8px);
    }
    75% {
        transform: translateX(8px);
    }
}

.gpswp-animation-nudge-left {
    animation: gpswp-nudge-left 1.2s ease-in-out 2;
}

/* Scroll Up Spring Animation - Slides up from bottom with spring/bounce effect */
@keyframes gpswp-scroll-up-spring {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    60% {
        transform: translateY(-8px) scale(1.02);
    }
    80% {
        transform: translateY(3px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gpswp-animation-scroll-up-spring {
    animation: gpswp-scroll-up-spring 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gpswp-animation-fade-in {
        animation-duration: 0.4s;
    }
    
    .gpswp-animation-wiggle {
        animation-duration: 0.3s;
    }
    
    .gpswp-animation-bounce {
        animation-duration: 0.8s;
    }
    
    .gpswp-animation-pulse {
        animation-duration: 1.2s;
    }
    
    .gpswp-animation-glow {
        animation-duration: 1.5s;
    }
    
    .gpswp-animation-ease-it {
        animation-duration: 0.6s;
    }
    
    .gpswp-animation-nudge-left {
        animation-duration: 0.5s;
    }
    
    .gpswp-animation-scroll-up-spring {
        animation-duration: 0.7s;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .gpswp-animation-fade-in,
    .gpswp-animation-wiggle,
    .gpswp-animation-bounce,
    .gpswp-animation-pulse,
    .gpswp-animation-glow,
    .gpswp-animation-ease-it,
    .gpswp-animation-nudge-left,
    .gpswp-animation-scroll-up-spring {
        animation: none !important;
    }
}
