/* Sfondi Animati Neutri per EasyPresence */

/* Sfondo Base Neutro */
.animated-bg-base {
    background: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.animated-bg-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(52, 152, 219, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(149, 165, 166, 0.05) 0%, transparent 50%);
    animation: moveBaseBackground 25s ease-in-out infinite;
}

/* Sfondo Dipendente - Blu Professionale */
.animated-bg-dipendente {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.animated-bg-dipendente::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 75%, rgba(33, 150, 243, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(25, 118, 210, 0.08) 0%, transparent 50%);
    animation: moveDipendenteBackground 20s ease-in-out infinite;
}

/* Sfondo Responsabile - Verde Corporativo */
.animated-bg-responsabile {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.animated-bg-responsabile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 70%, rgba(76, 175, 80, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 60% 40%, rgba(56, 142, 60, 0.08) 0%, transparent 50%);
    animation: moveResponsabileBackground 25s ease-in-out infinite;
}

/* Sfondo Superuser - Grigio Chiaro Tecnologico */
.animated-bg-superuser {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.animated-bg-superuser::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 70%, rgba(97, 97, 97, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(117, 117, 117, 0.08) 0%, transparent 50%);
    animation: moveSuperuserBackground 30s ease-in-out infinite;
}

/* Elementi Fluttuanti */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.floating-elements div {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: floatElements 18s infinite ease-in-out;
}

.floating-elements div:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.floating-elements div:nth-child(2) {
    width: 120px;
    height: 120px;
    top: 60%;
    left: 70%;
    animation-delay: 6s;
}

.floating-elements div:nth-child(3) {
    width: 60px;
    height: 60px;
    top: 30%;
    left: 80%;
    animation-delay: 12s;
}

/* Animazioni */
@keyframes moveBaseBackground {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-15px) translateY(-10px); }
    50% { transform: translateX(20px) translateY(15px); }
    75% { transform: translateX(-10px) translateY(20px); }
}

@keyframes moveDipendenteBackground {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-20px) translateY(-15px); }
    50% { transform: translateX(25px) translateY(10px); }
    75% { transform: translateX(-15px) translateY(25px); }
}

@keyframes moveResponsabileBackground {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-18px) translateY(-22px); }
    50% { transform: translateX(22px) translateY(18px); }
    75% { transform: translateX(-25px) translateY(20px); }
}

@keyframes moveSuperuserBackground {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-12px) translateY(-28px); }
    50% { transform: translateX(30px) translateY(15px); }
    75% { transform: translateX(-20px) translateY(25px); }
}

@keyframes floatElements {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    33% { transform: translateY(-30px) translateX(20px) rotate(120deg); }
    66% { transform: translateY(15px) translateX(-15px) rotate(240deg); }
}

/* Layout container con z-index */
.content-container {
    position: relative;
    z-index: 1;
}

/* Mobile: Estendi sfondo fino alla navbar inferiore */
@media (max-width: 1199.98px) {
    .animated-bg-superuser {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0)) !important;
        min-height: 100vh !important;
    }
}