/* ===================================
   CONTACT ICON ATTENTION ANIMATION - FINAL VERSION
   Krishna Lila Traders
   Sequence: Zoom → Back → Vibrate → Pause → Repeat
   =================================== */

/* Main animation: Zoom then Vibrate */
@keyframes contactAttention {
    /* Phase 1: Zoom In (0-15%) */
    0% {
        transform: scale(1) rotate(0deg);
    }
    7.5% {
        transform: scale(1.3) rotate(0deg);
    }
    15% {
        transform: scale(1.3) rotate(0deg);
    }
    
    /* Phase 2: Zoom Out (15-30%) */
    22.5% {
        transform: scale(1) rotate(0deg);
    }
    30% {
        transform: scale(1) rotate(0deg);
    }
    
    /* Phase 3: Vibration (30-60%) */
    32% {
        transform: scale(1) rotate(-5deg);
    }
    34% {
        transform: scale(1) rotate(5deg);
    }
    36% {
        transform: scale(1) rotate(-5deg);
    }
    38% {
        transform: scale(1) rotate(5deg);
    }
    40% {
        transform: scale(1) rotate(-4deg);
    }
    42% {
        transform: scale(1) rotate(4deg);
    }
    44% {
        transform: scale(1) rotate(-3deg);
    }
    46% {
        transform: scale(1) rotate(3deg);
    }
    48% {
        transform: scale(1) rotate(-2deg);
    }
    50% {
        transform: scale(1) rotate(2deg);
    }
    52% {
        transform: scale(1) rotate(-1deg);
    }
    54% {
        transform: scale(1) rotate(1deg);
    }
    56% {
        transform: scale(1) rotate(0deg);
    }
    
    /* Phase 4: Rest (60-100%) */
    60%, 100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Subtle glow during zoom phase only */
@keyframes contactGlow {
    0% {
        filter: brightness(1);
    }
    15% {
        filter: brightness(1.4);
    }
    30% {
        filter: brightness(1);
    }
    30.1%, 100% {
        filter: brightness(1);
    }
}

/* Apply animations to contact icon */
.mobile-nav-item.contact-animate .mobile-nav-icon {
    animation: 
        contactAttention 3s ease-in-out,
        contactGlow 3s ease-in-out;
    transform-origin: center center;
}

/* Performance optimization - hardware acceleration */
.mobile-nav-item.contact-animate .mobile-nav-icon {
    will-change: transform, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Pause state - no animation */
.mobile-nav-item.contact-paused .mobile-nav-icon {
    animation: none;
    transform: scale(1) rotate(0deg);
}

/* Optional: Small notification dot during animation */
.contact-notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .mobile-nav-item.contact-animate .mobile-nav-icon {
        animation: none !important;
        transform: none !important;
    }
    
    .contact-notification-dot {
        animation: none;
    }
}

/* Desktop - only show on mobile/tablet */
@media (min-width: 769px) {
    .mobile-nav-item.contact-animate .mobile-nav-icon {
        animation: none;
    }
    
    /* Simple hover effect for desktop */
    .mobile-nav-item:hover .mobile-nav-icon {
        transform: scale(1.1);
        transition: transform 0.2s ease;
    }
}

/* Tablet - slightly gentler animation */
@media (min-width: 641px) and (max-width: 968px) {
    @keyframes contactAttention {
        0% {
            transform: scale(1) rotate(0deg);
        }
        10% {
            transform: scale(1.2) rotate(0deg);
        }
        20% {
            transform: scale(1) rotate(0deg);
        }
        25% {
            transform: scale(1) rotate(-4deg);
        }
        30% {
            transform: scale(1) rotate(4deg);
        }
        35% {
            transform: scale(1) rotate(-3deg);
        }
        40% {
            transform: scale(1) rotate(3deg);
        }
        45% {
            transform: scale(1) rotate(-2deg);
        }
        50% {
            transform: scale(1) rotate(2deg);
        }
        55% {
            transform: scale(1) rotate(0deg);
        }
        55.1%, 100% {
            transform: scale(1) rotate(0deg);
        }
    }
}

/* Small mobile - more subtle */
@media (max-width: 375px) {
    @keyframes contactAttention {
        0% {
            transform: scale(1) rotate(0deg);
        }
        12% {
            transform: scale(1.18) rotate(0deg);
        }
        24% {
            transform: scale(1) rotate(0deg);
        }
        28% {
            transform: scale(1) rotate(-4deg);
        }
        32% {
            transform: scale(1) rotate(4deg);
        }
        36% {
            transform: scale(1) rotate(-3deg);
        }
        40% {
            transform: scale(1) rotate(3deg);
        }
        44% {
            transform: scale(1) rotate(-2deg);
        }
        48% {
            transform: scale(1) rotate(2deg);
        }
        52% {
            transform: scale(1) rotate(0deg);
        }
        52.1%, 100% {
            transform: scale(1) rotate(0deg);
        }
    }
}

/* Ensure smooth 60fps on all devices */
@media (prefers-reduced-motion: no-preference) {
    .mobile-nav-item.contact-animate .mobile-nav-icon {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
}

/* Fallback for very old browsers */
@supports not (animation: none) {
    .mobile-nav-item.contact-animate .mobile-nav-icon {
        /* No animation, just show static icon */
        transform: scale(1);
    }
}