/* Effetti Hover Avanzati per le Card dei Servizi */

/* Stato base delle card - transizioni fluide */
html body .services-enterprise .service-enterprise-card {
    transform: translateY(0) scale(1) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.1) !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

/* Effetto hover principale - Card si solleva */
html body .services-enterprise .service-enterprise-card:hover {
    transform: translateY(-20px) scale(1.05) !important;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 15px 30px rgba(59, 130, 246, 0.3),
        0 5px 15px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    z-index: 100 !important;
    border: 2px solid rgba(59, 130, 246, 0.6) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Effetto speciale per la card AI centrale */
html body .services-enterprise .service-enterprise-card.ai-card:hover {
    transform: translateY(-25px) scale(1.08) !important;
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 20px 40px rgba(99, 148, 255, 0.4),
        0 10px 20px rgba(99, 148, 255, 0.3),
        0 0 40px rgba(99, 148, 255, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
    z-index: 150 !important;
    border: 3px solid rgba(99, 148, 255, 0.8) !important;
    background: rgba(99, 148, 255, 0.2) !important;
}

/* Effetto glow sull'icona durante hover */
html body .services-enterprise .service-enterprise-card:hover .service-enterprise-icon {
    transform: scale(1.2) rotate(5deg) !important;
    box-shadow: 
        0 0 25px rgba(59, 130, 246, 0.6),
        0 0 40px rgba(59, 130, 246, 0.4),
        0 8px 20px rgba(59, 130, 246, 0.3) !important;
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%) !important;
    transition: all 0.3s ease !important;
}

/* Effetto speciale icona AI */
html body .services-enterprise .service-enterprise-card.ai-card:hover .service-enterprise-icon {
    transform: scale(1.3) rotate(-5deg) !important;
    box-shadow: 
        0 0 35px rgba(99, 148, 255, 0.8),
        0 0 50px rgba(99, 148, 255, 0.6),
        0 10px 25px rgba(99, 148, 255, 0.4) !important;
    background: linear-gradient(135deg, #6394FF 0%, #3B82F6 50%, #8B5CF6 100%) !important;
}

/* Effetto testo brillante durante hover */
html body .services-enterprise .service-enterprise-card:hover h3 {
    color: #ffffff !important;
    text-shadow: 
        0 0 20px rgba(59, 130, 246, 0.6),
        0 0 30px rgba(59, 130, 246, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
    transition: all 0.3s ease !important;
}

/* Effetto testo AI speciale */
html body .services-enterprise .service-enterprise-card.ai-card:hover h3 {
    background: linear-gradient(135deg, #ffffff, #6394FF, #ffffff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 
        0 0 25px rgba(99, 148, 255, 0.8),
        0 0 35px rgba(99, 148, 255, 0.6) !important;
}

/* Effetto paragrafo durante hover */
html body .services-enterprise .service-enterprise-card:hover p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important;
    transition: all 0.3s ease 0.1s !important;
}

/* Effetto features animate */
html body .services-enterprise .service-enterprise-card:hover .service-enterprise-features span {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* Ritardo progressivo per l'effetto features */
html body .services-enterprise .service-enterprise-card:hover .service-enterprise-features span:nth-child(1) {
    transition-delay: 0.1s !important;
}

html body .services-enterprise .service-enterprise-card:hover .service-enterprise-features span:nth-child(2) {
    transition-delay: 0.2s !important;
}

html body .services-enterprise .service-enterprise-card:hover .service-enterprise-features span:nth-child(3) {
    transition-delay: 0.3s !important;
}

/* Effetto features per AI card */
html body .services-enterprise .service-enterprise-card.ai-card:hover .service-enterprise-features span {
    background: rgba(99, 148, 255, 0.4) !important;
    border-color: rgba(99, 148, 255, 0.8) !important;
    box-shadow: 0 8px 20px rgba(99, 148, 255, 0.4) !important;
}

/* Effetto backdrop blur potenziato durante hover */
html body .services-enterprise .service-enterprise-card:hover {
    backdrop-filter: blur(25px) !important;
}

/* Effetto ondulazione dal centro durante hover */
html body .services-enterprise .service-enterprise-card::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%) !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.6s ease !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

html body .services-enterprise .service-enterprise-card:hover::after {
    width: 300px !important;
    height: 300px !important;
}

/* Disattiva gli effetti idle durante hover */
html body .services-enterprise .service-enterprise-card:hover {
    animation: none !important;
}

/* Effetto ripple per AI card */
html body .services-enterprise .service-enterprise-card.ai-card::after {
    background: radial-gradient(circle, rgba(99, 148, 255, 0.15) 0%, transparent 70%) !important;
}

/* Transizione fluida al termine del hover */
html body .services-enterprise .service-enterprise-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body .services-enterprise .service-enterprise-card .service-enterprise-icon,
html body .services-enterprise .service-enterprise-card h3,
html body .services-enterprise .service-enterprise-card p,
html body .services-enterprise .service-enterprise-card .service-enterprise-features span {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Responsive - Riduce intensità effetti su dispositivi mobili */
@media (max-width: 768px) {
    html body .services-enterprise .service-enterprise-card:hover {
        transform: translateY(-10px) scale(1.02) !important;
        box-shadow: 
            0 15px 30px rgba(0, 0, 0, 0.3),
            0 8px 15px rgba(59, 130, 246, 0.2) !important;
    }
    
    html body .services-enterprise .service-enterprise-card.ai-card:hover {
        transform: translateY(-12px) scale(1.04) !important;
    }
    
    html body .services-enterprise .service-enterprise-card:hover .service-enterprise-icon {
        transform: scale(1.1) rotate(3deg) !important;
    }
}

/* Disabilita effetti per utenti che preferiscono reduced motion */
@media (prefers-reduced-motion: reduce) {
    html body .services-enterprise .service-enterprise-card:hover {
        transform: none !important;
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.3),
            0 4px 10px rgba(59, 130, 246, 0.2) !important;
    }
    
    html body .services-enterprise .service-enterprise-card:hover .service-enterprise-icon {
        transform: scale(1.05) !important;
    }
}

/* Effetti di saltellamento per card di sfondo quando una è in hover */

/* Quando una card è in hover, le altre iniziano a saltellare */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card:not(:hover) {
    animation: background-bounce 1.5s ease-in-out infinite !important;
    transform: scale(0.95) !important;
    opacity: 0.7 !important;
    filter: blur(1px) !important;
    z-index: 5 !important;
}

/* Regole speciali per le card dietro (bottom-left e bottom-right) - più visibili */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-left:not(:hover),
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-right:not(:hover) {
    transform: scale(0.98) translateY(-15px) !important;
    opacity: 0.85 !important;
    filter: blur(0.5px) !important;
    z-index: 20 !important;
    animation: background-bounce-enhanced 1.5s ease-in-out infinite !important;
}

/* Regole speciali per le card in alto (top-left e top-right) - più visibili */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-left:not(:hover),
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-right:not(:hover) {
    transform: scale(0.98) translateY(-20px) !important;
    opacity: 0.85 !important;
    filter: blur(0.5px) !important;
    z-index: 25 !important;
    animation: background-bounce-top 1.5s ease-in-out infinite !important;
}

/* Animazione potenziata per le card dietro */
@keyframes background-bounce-enhanced {
    0%, 100% {
        transform: translateY(-15px) scale(0.98) !important;
    }
    25% {
        transform: translateY(-20px) scale(0.99) !important;
    }
    50% {
        transform: translateY(-12px) scale(0.97) !important;
    }
    75% {
        transform: translateY(-18px) scale(0.98) !important;
    }
}

/* Animazione specifica per le card in alto */
@keyframes background-bounce-top {
    0%, 100% {
        transform: translateY(-20px) scale(0.98) !important;
    }
    25% {
        transform: translateY(-25px) scale(0.99) !important;
    }
    50% {
        transform: translateY(-17px) scale(0.97) !important;
    }
    75% {
        transform: translateY(-23px) scale(0.98) !important;
    }
}

/* Animazione di saltellamento per le card di sfondo */
@keyframes background-bounce {
    0%, 100% {
        transform: translateY(0) scale(0.95) !important;
    }
    25% {
        transform: translateY(-5px) scale(0.96) !important;
    }
    50% {
        transform: translateY(2px) scale(0.94) !important;
    }
    75% {
        transform: translateY(-3px) scale(0.95) !important;
    }
}

/* Ritardi diversi per ogni card per effetto più naturale */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-left:not(:hover) {
    animation-delay: 0s !important;
}

html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-right:not(:hover) {
    animation-delay: 0.2s !important;
}

html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-left:not(:hover) {
    animation-delay: 0.4s !important;
}

html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-right:not(:hover) {
    animation-delay: 0.6s !important;
}

/* Effetto speciale per la card AI quando le altre sono in hover */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.ai-card:not(:hover) {
    animation: ai-background-pulse 2s ease-in-out infinite !important;
    animation-delay: 0.3s !important;
    transform: scale(1.02) !important;
    opacity: 0.8 !important;
}

/* Animazione speciale per AI card di sfondo */
@keyframes ai-background-pulse {
    0%, 100% {
        transform: translateY(0) scale(1.02) !important;
        box-shadow: 
            0 8px 25px rgba(99, 148, 255, 0.2),
            0 4px 12px rgba(99, 148, 255, 0.1) !important;
    }
    25% {
        transform: translateY(-8px) scale(1.04) !important;
        box-shadow: 
            0 12px 35px rgba(99, 148, 255, 0.3),
            0 6px 18px rgba(99, 148, 255, 0.15) !important;
    }
    50% {
        transform: translateY(3px) scale(1.01) !important;
        box-shadow: 
            0 6px 20px rgba(99, 148, 255, 0.25),
            0 3px 10px rgba(99, 148, 255, 0.12) !important;
    }
    75% {
        transform: translateY(-5px) scale(1.03) !important;
        box-shadow: 
            0 10px 30px rgba(99, 148, 255, 0.28),
            0 5px 15px rgba(99, 148, 255, 0.13) !important;
    }
}

/* Effetto "chiamata attenzione" sulle icone delle card di sfondo */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card:not(:hover) .service-enterprise-icon {
    animation: icon-attention 1s ease-in-out infinite alternate !important;
}

/* Icone più visibili per le card dietro */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-left:not(:hover) .service-enterprise-icon,
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-right:not(:hover) .service-enterprise-icon {
    animation: icon-attention-enhanced 1s ease-in-out infinite alternate !important;
}

/* Icone più visibili per le card in alto */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-left:not(:hover) .service-enterprise-icon,
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-right:not(:hover) .service-enterprise-icon {
    animation: icon-attention-enhanced 1s ease-in-out infinite alternate !important;
}

@keyframes icon-attention {
    from {
        transform: scale(1) rotate(0deg) !important;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2) !important;
    }
    to {
        transform: scale(1.1) rotate(-2deg) !important;
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
    }
}

@keyframes icon-attention-enhanced {
    from {
        transform: scale(1.05) rotate(0deg) !important;
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
    }
    to {
        transform: scale(1.15) rotate(-3deg) !important;
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6) !important;
    }
}

/* Effetto "respirazione" sui titoli delle card di sfondo */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card:not(:hover) h3 {
    animation: text-breathe 2s ease-in-out infinite !important;
}

/* Titoli più visibili per le card dietro */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-left:not(:hover) h3,
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-right:not(:hover) h3 {
    animation: text-breathe-enhanced 2s ease-in-out infinite !important;
}

/* Titoli più visibili per le card in alto */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-left:not(:hover) h3,
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-right:not(:hover) h3 {
    animation: text-breathe-enhanced 2s ease-in-out infinite !important;
}

@keyframes text-breathe {
    0%, 100% {
        opacity: 0.7 !important;
        text-shadow: 0 1px 3px rgba(59, 130, 246, 0.2) !important;
    }
    50% {
        opacity: 0.9 !important;
        text-shadow: 0 2px 6px rgba(59, 130, 246, 0.4) !important;
    }
}

@keyframes text-breathe-enhanced {
    0%, 100% {
        opacity: 0.9 !important;
        text-shadow: 0 2px 6px rgba(59, 130, 246, 0.4) !important;
        transform: translateY(-2px) !important;
    }
    50% {
        opacity: 1 !important;
        text-shadow: 0 3px 8px rgba(59, 130, 246, 0.6) !important;
        transform: translateY(-4px) !important;
    }
}

/* Effetto pulsazione sui features delle card di sfondo */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card:not(:hover) .service-enterprise-features span {
    animation: feature-pulse 1.8s ease-in-out infinite !important;
}

@keyframes feature-pulse {
    0%, 100% {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }
    50% {
        background: rgba(59, 130, 246, 0.15) !important;
        border-color: rgba(59, 130, 246, 0.3) !important;
    }
}

/* Ritardi progressivi per i features */
html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card:not(:hover) .service-enterprise-features span:nth-child(1) {
    animation-delay: 0.1s !important;
}

html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card:not(:hover) .service-enterprise-features span:nth-child(2) {
    animation-delay: 0.3s !important;
}

html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card:not(:hover) .service-enterprise-features span:nth-child(3) {
    animation-delay: 0.5s !important;
}

/* Transizione fluida quando si smette di fare hover */
html body .services-enterprise .service-enterprise-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Reset animazioni quando non c'è hover sul grid */
html body .services-enterprise .services-enterprise-grid:not(:hover) .service-enterprise-card {
    animation: none !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: blur(0) !important;
    z-index: 10 !important;
}

/* Assicura che la card in hover sia sempre sopra */
html body .services-enterprise .service-enterprise-card:hover {
    z-index: 200 !important;
    animation: none !important;
}

/* Responsive - riduce intensità su mobile */
@media (max-width: 768px) {
    html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card:not(:hover) {
        animation: background-bounce-mobile 2s ease-in-out infinite !important;
        transform: scale(0.98) !important;
        opacity: 0.8 !important;
        filter: blur(0.5px) !important;
    }      /* Card dietro più visibili anche su mobile */
    html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-left:not(:hover),
    html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-bottom-right:not(:hover) {
        transform: scale(0.99) translateY(-8px) !important;
        opacity: 0.9 !important;
        filter: blur(0.3px) !important;
        z-index: 20 !important;
        animation: background-bounce-mobile-enhanced 2s ease-in-out infinite !important;
    }/* Card in alto più visibili anche su mobile */
    html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-left:not(:hover),
    html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card.card-top-right:not(:hover) {
        transform: scale(0.99) translateY(-10px) !important;
        opacity: 0.9 !important;
        filter: blur(0.3px) !important;
        z-index: 25 !important;
        animation: background-bounce-mobile-top 2s ease-in-out infinite !important;
    }
    
    @keyframes background-bounce-mobile {
        0%, 100% {
            transform: translateY(0) scale(0.98) !important;
        }
        50% {
            transform: translateY(-3px) scale(0.99) !important;
        }
    }
      @keyframes background-bounce-mobile-enhanced {
        0%, 100% {
            transform: translateY(-8px) scale(0.99) !important;
        }
        50% {
            transform: translateY(-12px) scale(1.0) !important;
        }
    }
      @keyframes background-bounce-mobile-top {
        0%, 100% {
            transform: translateY(-10px) scale(0.99) !important;
        }
        50% {
            transform: translateY(-14px) scale(1.0) !important;
        }
    }
}

/* Disabilita effetti per reduced motion */
@media (prefers-reduced-motion: reduce) {
    html body .services-enterprise .services-enterprise-grid:hover .service-enterprise-card:not(:hover) {
        animation: none !important;
        opacity: 0.7 !important;
        transform: scale(0.95) !important;
    }
}