/**
 * Cart Animation CSS
 * Bunny brand ambassador cart animation for add-to-cart functionality
 */

/* Animated backdrop blur overlay */
.cart-animation-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 99999998; /* Just below animation but above everything else */
    pointer-events: none;
    transition: all 0.4s ease-in-out;
}

.cart-animation-backdrop.active {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Flying cart animation container - enhanced for better visibility */
.flying-cart-animation {
    position: fixed;
    pointer-events: none;
    z-index: 99999999; /* Higher than backdrop to appear in front */
    width: 120px;  /* Increased from 80px for better visibility */
    height: 120px; /* Increased from 80px for better visibility */
    opacity: 1;   /* Changed from 0 to 1 for visibility */
    transform: scale(1); /* Changed from scale(0.8) to scale(1) */
    transition: none;
    /* Removed all filters and shadows - pure GIF only */
}

.flying-cart-animation img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Removed border-radius and background - pure GIF only */
}

/* Removed trail effect to eliminate green shadow */

@keyframes trailPulse {
    0% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* Animation keyframes for cart flying effect */
@keyframes flyToCart {
    0% {
        opacity: 1;
        transform: scale(0.8) translateX(0) translateY(0);
    }
    20% {
        opacity: 1;
        transform: scale(1) translateX(0) translateY(-20px);
    }
    80% {
        opacity: 1;
        transform: scale(0.6) translateX(var(--target-x)) translateY(var(--target-y));
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateX(var(--target-x)) translateY(var(--target-y));
    }
}

/* Cart shake animation - enhanced for better visibility */
@keyframes cartShake {
    0%, 100% {
        transform: translateX(0) scale(1) rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-6px) scale(1.1) rotate(-2deg);
        color: #27ae60;
        text-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(6px) scale(1.1) rotate(2deg);
        color: #27ae60;
        text-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
    }
}

/* Smooth single cart success animation - combines all effects */
@keyframes cartSuccess {
    0% {
        transform: scale(1);
        color: inherit;
    }
    15% {
        transform: scale(1.2) translateX(-3px);
        color: #27ae60;
        text-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
    }
    30% {
        transform: scale(1.2) translateX(3px);
        color: #27ae60;
        text-shadow: 0 0 10px rgba(39, 174, 96, 0.8);
    }
    45% {
        transform: scale(1.3);
        color: #27ae60;
        text-shadow: 0 0 12px rgba(39, 174, 96, 1);
    }
    60% {
        transform: scale(1.2) translateX(-2px);
        color: #27ae60;
        text-shadow: 0 0 10px rgba(39, 174, 96, 0.8);
    }
    75% {
        transform: scale(1.1) translateX(2px);
        color: #27ae60;
        text-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
    }
    100% {
        transform: scale(1);
        color: inherit;
        text-shadow: none;
    }
}

/* Cart bounce animation - enhanced for better feedback */
@keyframes cartBounce {
    0%, 100% {
        transform: scale(1);
        color: inherit;
    }
    25% {
        transform: scale(1.2);
        color: #27ae60;
        text-shadow: 0 0 10px rgba(39, 174, 96, 0.8);
    }
    50% {
        transform: scale(1.4);
        color: #27ae60;
        text-shadow: 0 0 15px rgba(39, 174, 96, 1);
    }
    75% {
        transform: scale(1.2);
        color: #27ae60;
        text-shadow: 0 0 10px rgba(39, 174, 96, 0.8);
    }
}

/* Cart glow effect - brand-specific teal color */
@keyframes cartGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(27, 123, 137, 0.3);
        color: inherit;
    }
    50% {
        box-shadow: 0 0 25px rgba(27, 123, 137, 0.8);
        color: #1b7b89;
    }
}

/* Apply animations to cart icon */
.cart-icon.cart-shake {
    animation: cartShake 0.5s ease-in-out;
}

.cart-icon.cart-bounce {
    animation: cartBounce 0.3s ease-in-out;
}

.cart-icon.cart-glow {
    animation: cartGlow 0.5s ease-in-out;
}

.cart-icon.cart-success {
    animation: cartSuccess 1.2s ease-in-out;
}

/* Success feedback for add to cart button */
.btn-add-to-cart.success-animation {
    background: #28a745 !important;
    border-color: #28a745 !important;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

.btn-add-to-cart.success-animation::after {
    content: '✓';
    position: absolute;
    right: 10px;
    color: white;
    font-weight: bold;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .flying-cart-animation {
        width: 60px;  /* Slightly smaller on mobile */
        height: 60px;
    }
}

@media (max-width: 480px) {
    .flying-cart-animation {
        width: 50px;  /* Even smaller on very small screens */
        height: 50px;
    }
    
    /* Ensure cart icon animations are visible on mobile with smooth animation */
    .cart-icon.cart-success {
        animation: cartSuccess 1s ease-in-out; /* Slightly faster on mobile */
    }
    
    /* Keep legacy animations for compatibility but make them smoother */
    .cart-icon.cart-shake {
        animation: cartShake 0.6s ease-in-out;
    }
    
    .cart-icon.cart-bounce {
        animation: cartBounce 0.4s ease-in-out;
    }
}

/* Alternative cart icons for different states */
.cart-icon-state {
    transition: all 0.3s ease;
}

.cart-icon-state.adding {
    color: #ffc107;
}

.cart-icon-state.added {
    color: #28a745;
}

/* Enhanced parabolic trajectory animation (more realistic physics) - SLOWER */
@keyframes parabolicFly {
    0% {
        opacity: 1;
        transform: scale(1.2) translate(0, 0) rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: scale(1.1) translate(calc(var(--target-x) * 0.1), calc(var(--target-y) * 0.05 - 30px)) rotate(5deg);
    }
    30% {
        opacity: 1;
        transform: scale(1.0) translate(calc(var(--target-x) * 0.3), calc(var(--target-y) * 0.15 - 40px)) rotate(12deg);
    }
    50% {
        opacity: 1;
        transform: scale(0.9) translate(calc(var(--target-x) * 0.5), calc(var(--target-y) * 0.3 - 35px)) rotate(18deg);
    }
    70% {
        opacity: 1;
        transform: scale(0.7) translate(calc(var(--target-x) * 0.7), calc(var(--target-y) * 0.6 - 20px)) rotate(22deg);
    }
    85% {
        opacity: 1;
        transform: scale(0.5) translate(calc(var(--target-x) * 0.9), calc(var(--target-y) * 0.85 - 8px)) rotate(28deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translate(var(--target-x), var(--target-y)) rotate(35deg);
    }
}

/* New 3-phase animation: Click -> Center (enlarge & stay) -> Cart (shrink & travel) */
@keyframes threePhaseFly {
    /* Phase 1: Move from click position to center of screen and enlarge (0-20%) - 1.2s */
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }
    5% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    20% {
        opacity: 1;
        transform: translate(var(--center-x), var(--center-y)) scale(2.8);
    }
    /* Phase 2: Stay at center enlarged and showcase (20-55%) - 2.1s */
    55% {
        opacity: 1;
        transform: translate(var(--center-x), var(--center-y)) scale(2.8) rotate(0deg);
    }
    /* Phase 3: Travel from center to cart while shrinking (55-100%) - 2.7s */
    85% {
        opacity: 1;
        transform: translate(var(--final-x), var(--final-y)) scale(0.6) rotate(15deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--final-x), var(--final-y)) scale(0.3) rotate(25deg);
    }
}

/* Enhanced flying animation with parabolic trajectory - USES DYNAMIC DURATION */
.flying-cart-animation.parabolic {
    animation: parabolicFly var(--animation-duration, 3000ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Standard flying animation - USES DYNAMIC DURATION */
.flying-cart-animation.flying {
    animation: flyToCart var(--animation-duration, 3000ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* New 3-phase animation with center pause - Total duration: 6 seconds */
.flying-cart-animation.three-phase {
    animation: threePhaseFly var(--animation-duration, 6000ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced center showcase effect during pause */
.flying-cart-animation.three-phase::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27, 123, 137, 0.25) 0%, rgba(27, 123, 137, 0.1) 50%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    animation: centerGlow var(--animation-duration, 6000ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    z-index: -1;
}

@keyframes centerGlow {
    0%, 20% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    30% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    55% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.9;
    }
    65% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

/* Cart badge pulse animation */
.cart-badge.pulse {
    animation: cartBadgePulse 0.6s ease-in-out;
}

@keyframes cartBadgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
        background: #ff6b6b;
    }
}

/* Removed bunny-specific shadow animations */

@keyframes bunnyGlow {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
    25% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
    75% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* Enhanced flying animation with sparkle effect */
.flying-cart-animation.sparkle {
    animation: sparkleTrail 0.8s ease-out infinite;
}

@keyframes sparkleTrail {
    0%, 100% {
        /* Removed all filters and shadows */
    }
    50% {
        /* Removed all filters and shadows */
    }
}