/**
 * Efectos hover para los servicios
 */

/* VoIP - Ring Ring Effect */
.service-icon-box[data-service="voip"] {
    position: relative !important;
    overflow: visible !important;
    z-index: 100 !important;
}

.service-icon-box[data-service="voip"]::before,
.service-icon-box[data-service="voip"]::after {
    content: '';
    position: absolute;
    border: 3px solid #00ffff;
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 0 10px #00ffff;
}

.service-icon-box[data-service="voip"]::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.service-icon-box[data-service="voip"]::after {
    width: 160%;
    height: 160%;
    top: -30%;
    left: -30%;
}

@keyframes soundWave {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

@keyframes vibrate {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.service-icon-box[data-service="voip"]:hover::before {
    animation: soundWave 1s ease-out infinite !important;
}

.service-icon-box[data-service="voip"]:hover::after {
    animation: soundWave 1s ease-out 0.3s infinite !important;
}

.service-icon-box[data-service="voip"]:hover i {
    animation: vibrate 0.3s ease-in-out infinite !important;
    color: #00ffff !important;
    filter: drop-shadow(0 0 10px #00ffff) !important;
}

/* Mantener animaciones cuando está activo (sin hover) */
.services-grid .service-icon-box[data-service="voip"].active-effect::before {
    animation: soundWave 1s ease-out infinite !important;
    opacity: 0.8 !important;
}

.services-grid .service-icon-box[data-service="voip"].active-effect::after {
    animation: soundWave 1s ease-out 0.3s infinite !important;
    opacity: 0.8 !important;
}

.services-grid .service-icon-box[data-service="voip"].active-effect i {
    animation: vibrate 0.3s ease-in-out infinite !important;
}

/* Asegurar que las ondas se vean cuando está activo */
.service-icon-box[data-service="voip"].active,
.service-icon-box[data-service="voip"].active-effect {
    overflow: visible !important;
    z-index: 100 !important;
}

/* Animaciones para cuando VoIP está activo (clase .active) */
.service-icon-box[data-service="voip"].active::before {
    animation: soundWave 1s ease-out infinite !important;
    opacity: 0.8 !important;
}

.service-icon-box[data-service="voip"].active::after {
    animation: soundWave 1s ease-out 0.3s infinite !important;
    opacity: 0.8 !important;
}

.service-icon-box[data-service="voip"].active i {
    animation: vibrate 0.3s ease-in-out infinite !important;
    color: #00ffff !important;
    filter: drop-shadow(0 0 10px #00ffff) !important;
}

/* Verde cuando está activo con click */
.service-icon-box[data-service="voip"].active::before,
.service-icon-box[data-service="voip"].active::after,
.service-icon-box[data-service="voip"].active-effect::before,
.service-icon-box[data-service="voip"].active-effect::after {
    border-color: #00ff00 !important;
    box-shadow: 0 0 20px #00ff00 !important;
}

.service-icon-box[data-service="voip"].active i,
.service-icon-box[data-service="voip"].active-effect i {
    color: #00ff00 !important;
    filter: drop-shadow(0 0 20px #00ff00) !important;
}

/* Asegurar que las ondas se vean fuera del botón */
.services-grid {
    overflow: visible !important;
    z-index: 50;
}

/* Android - Bounce Effect */
@keyframes appBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    40% {
        transform: translateY(-20px) rotate(-10deg);
    }
    60% {
        transform: translateY(-10px) rotate(10deg);
    }
}

.service-icon-box[data-service="android"]:hover i {
    animation: appBounce 0.8s ease-out !important;
    /* Verde solo cuando está activo, no en hover */
}

.service-icon-box[data-service="android"]:hover {
    /* Sin efecto verde en hover */
}

/* Security - Lock Rotate Effect */
.service-icon-box[data-service="security"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
}

@keyframes shieldPulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes lockRotate {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

.service-icon-box[data-service="security"]:hover::before {
    animation: shieldPulse 1.5s ease-out infinite !important;
}

.service-icon-box[data-service="security"]:hover i {
    animation: lockRotate 0.6s ease-out !important;
}

/* SMTP - Paper Plane Hover - Mismo efecto visual que active */
.service-icon-box[data-service="smtp"]:hover {
    transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1) !important;
    border: 2px solid #00ffff !important;
    box-shadow: 
        0 20px 40px rgba(0, 255, 255, 0.4),
        inset 0 0 10px rgba(0, 255, 255, 0.1) !important;
    background: rgba(0, 40, 80, 0.9) !important;
}

.service-icon-box[data-service="smtp"]:hover i {
    animation: wiggle 0.5s ease-in-out infinite !important;
    color: #00ffff !important;
    filter: drop-shadow(0 0 10px #00ffff) !important;
    text-shadow: 0 0 10px #00ffff !important;
}

/* Wiggle - movimiento pequeño de lado a lado */
@keyframes wiggle {
    0%, 100% { transform: rotateZ(0deg); }
    25% { transform: rotateZ(-5deg); }
    75% { transform: rotateZ(5deg); }
}

.service-icon-box[data-service="smtp"]:hover span {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    font-weight: bold !important;
}

/* Web - Code Brackets Effect */
.service-icon-box[data-service="web"]::before,
.service-icon-box[data-service="web"]::after {
    font-family: monospace;
    position: absolute;
    font-size: 1.5rem;
    color: #00ffff;
    opacity: 0;
    font-weight: bold;
    z-index: 10;
}

.service-icon-box[data-service="web"]::before {
    content: '<';
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.service-icon-box[data-service="web"]::after {
    content: '>';
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes expandBrackets {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes stackFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.service-icon-box[data-service="web"]:hover::before {
    animation: expandBrackets 0.5s ease-out forwards !important;
}

.service-icon-box[data-service="web"]:hover::after {
    animation: expandBrackets 0.5s ease-out forwards !important;
}

.service-icon-box[data-service="web"]:hover i {
    animation: stackFloat 1s ease-in-out infinite !important;
}

/* Intelligence/OSINT - Radar Sweep Effect */
.service-icon-box[data-service="osint"] {
    position: relative !important;
    overflow: visible !important;
}

.service-icon-box[data-service="osint"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(0, 255, 255, 0.4) 30deg,
        transparent 60deg
    );
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

@keyframes radarSweep {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
        opacity: 0;
    }
}

@keyframes locatingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

.service-icon-box[data-service="osint"]:hover::before {
    animation: radarSweep 2s ease-in-out infinite !important;
}

.service-icon-box[data-service="osint"]:hover i {
    animation: locatingPulse 1s ease-in-out infinite !important;
    color: #00ffff !important;
    filter: drop-shadow(0 0 15px #00ffff) !important;
}