/* ==========================================================================
   ANIMATION.CSS - Pure CSS Animations, Keyframes, Glow, Blink & Hover
   ========================================================================== */

/* Mega-Menu Selection Highlight Animation */
.mega-menu-target-active {
    animation: blinkGlowZoom 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes blinkGlowZoom {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 210, 255, 0);
    }
    20% {
        transform: scale(1.03);
        box-shadow: 0 0 30px rgba(0, 210, 255, 0.8);
        border-color: #00d2ff;
    }
    40% {
        opacity: 0.5;
    }
    60% {
        opacity: 1;
        transform: scale(1.03);
        box-shadow: 0 0 35px rgba(255, 107, 0, 0.9);
        border-color: #ff6b00;
    }
    80% {
        transform: scale(1.01);
    }
    100% {
        transform: scale(1);
        box-shadow: var(--card-shadow);
    }
}

/* Card Hover Zoom & Border Glow */
.tech-box {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.3s ease, 
                border-color 0.3s ease;
}

.tech-box:hover {
    transform: translateY(-5px) scale(1.015);
    border-color: var(--accent-blue);
    box-shadow: 0 12px 30px var(--accent-glow);
}

/* Home Icon Pulse & Glow */
.home-icon {
    margin-right: 5px;
    color: #ff6b00;
    animation: homeIconGlow 2s infinite ease-in-out;
}

@keyframes homeIconGlow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(255, 107, 0, 0.5));
    }
    50% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 8px rgba(255, 107, 0, 1));
    }
}

/* Heartbeat & Price Glow Animation */
.heartbeat-glow {
    animation: heartbeatGlow 1.8s infinite;
}

@keyframes heartbeatGlow {
    0% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 107, 0, 0.4);
    }
    14% {
        transform: scale(1.08);
        text-shadow: 0 0 25px rgba(255, 107, 0, 0.9);
    }
    28% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 107, 0, 0.4);
    }
    42% {
        transform: scale(1.05);
        text-shadow: 0 0 20px rgba(255, 107, 0, 0.8);
    }
    70% {
        transform: scale(1);
    }
}

/* Rotating Circle Text */
@keyframes rotateCircle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes heartbeat {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
}

/* Floating Tech Background Icons */
.floating-tech-icons {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.tech-icon {
    position: absolute;
    color: var(--accent-blue);
    opacity: 0.15;
    font-size: 2rem;
    animation: floatIcon 12s infinite linear;
}

.ti-1 { top: 10%; left: 10%; animation-duration: 10s; }
.ti-2 { top: 20%; left: 80%; animation-duration: 14s; }
.ti-3 { top: 70%; left: 15%; animation-duration: 11s; }
.ti-4 { top: 60%; left: 85%; animation-duration: 13s; }
.ti-5 { top: 40%; left: 50%; animation-duration: 9s; }
.ti-6 { top: 80%; left: 60%; animation-duration: 15s; }
.ti-7 { top: 15%; left: 40%; animation-duration: 12s; }
.ti-8 { top: 30%; left: 25%; animation-duration: 16s; }
.ti-9 { top: 85%; left: 30%; animation-duration: 10s; }
.ti-10 { top: 50%; left: 90%; animation-duration: 14s; }

@keyframes floatIcon {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

/* Button Glow Pulse */
.btn-glow {
    background: linear-gradient(135deg, #ff6b00, #ff8c00);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.5);
    animation: btnPulse 2s infinite;
}

@keyframes btnPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 107, 0, 0.5); }
    50% { box-shadow: 0 0 30px rgba(255, 107, 0, 0.9); }
}

/* Sub-service Badge Borders */
.badge-border-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.badge-border {
    font-size: 0.72rem;
    font-family: var(--tech-font);
    padding: 3px 8px;
    border: 1px solid var(--accent-blue);
    border-radius: 3px;
    color: var(--accent-blue);
    background: rgba(0, 98, 204, 0.05);
}