/*
 Theme Name:   E-mind Hello Elementor Child for wp-foro
 Theme URI:    https://emind.it/
 Description:  Tema Child per personalizzazioni wpforo con elementor
 Author:       E-mind Srl
 Template:     hello-elementor
 Version:      1.0.0
*/

/*========== HERO ===========*/
#HeroHp {
	position: relative;
	overflow: hidden;
}
#HeroHp::after {
	content: "";
    position: absolute;
    top: 10%;
    right: -5%; 
    width: 550px;
    height: 550px;
    background-image: url('/wp-content/uploads/2026/planet2.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    mix-blend-mode: screen;
    z-index: 1; 
    animation: bigPlanetFloat 12s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bigPlanetFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); filter: drop-shadow(0 0 60px rgba(0, 242, 254, 0.2)); }
}

.css-moving-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #00F2FE;
    border-radius: 50%;
    z-index: 2;
    filter: drop-shadow(0 0 8px #00F2FE);
    pointer-events: none;
}
.node-alpha {
    /* Coordinate accoppiate alla posizione del pianeta grande */
    top: 30%;
    right: 15%;
    motion-path: path("M 100,200 Q 320,80 500,280 T 150,500"); /* La parabola del mockup */
    animation: moveOnOrbit 8s linear infinite;
}

.node-beta {
    top: 30%;
    right: 15%;
    motion-path: path("M 100,200 Q 320,80 500,280 T 150,500");
    animation: moveOnOrbit 11s linear infinite;
    animation-delay: -4s; /* Sfalsato nel tempo */
    width: 4px;
    height: 4px;
    opacity: 0.7;
}

@keyframes moveOnOrbit {
    0% { motion-offset: 0%; }
    100% { motion-offset: 100%; }
}



#HeroHp::before {
    content: "";
    position: absolute;
    bottom: 8%;
    left: 5%; 
    width: 180px;
    height: 180px;
    background-image: url('/wp-content/uploads/2026/planet2.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    mix-blend-mode: screen;
    z-index: 1;
    
    /* Fluttuazione asincrona separata */
    animation: microGloboFloat 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes microGloboFloat {
    0%, 100% { transform: translateY(0px) scale(1); opacity: 0.8; }
    50% { transform: translateY(-10px) scale(0.96); opacity: 0.5; filter: drop-shadow(0 0 25px rgba(0, 242, 254, 0.15)); }
}

@media (max-width: 1024px) {
    /* Su Tablet riposizioniamo gli elementi per evitare sovrapposizioni distruttive con i testi */
    #HeroHp::after {
        width: 400px;
        height: 400px;
        top: 45%;
        right: -10%;
    }
    #HeroHp::before {
        bottom: 2%;
        left: 2%;
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 767px) {
    #HeroHp::after {
        width: 300px;
        height: 300px;
        top: auto;
        bottom: 5%;
        right: 5%;
        opacity: 0.3;
    }
    #HeroHp::before {
        display: none; 
    }
    .css-moving-node {
        display: none;
    }
}


#ContainerSvg {
width: 100%;
    height: 520px;
    background-image: url('/wp-content/uploads/2026/planet.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    mix-blend-mode: screen; /* Fonde lo sfondo nero dell'SVG nell'oscurità del sito */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 2. Effetto Microgravità Globale (Il pianeta oscilla e respira lentamente) */
@keyframes globeMicrogravity {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1.5deg); filter: drop-shadow(0 0 50px rgba(0, 242, 254, 0.2)); }
    100% { transform: translateY(0px) rotate(0deg); }
}
#ContainerSvg {
    animation: globeMicrogravity 10s ease-in-out infinite;
}

/* Traiettoria Parabolica 1 (Assegnata ai nodi Alpha e Beta) */
@keyframes travelOrbitOne {
    0% { motion-offset: 0%; }
    100% { motion-offset: 100%; }
}

.node-alpha {
    motion-path: path("M 100,200 Q 320,80 500,280 T 150,500");
    motion-position: 0%;
    animation: travelOrbitOne 7s linear infinite;
}

.node-beta {
    motion-path: path("M 100,200 Q 320,80 500,280 T 150,500");
    motion-position: 0%;
    /* Ritardo di 3.5 secondi per non sovrapporsi al primo pallino e velocità diversa */
    animation: travelOrbitOne 9s linear infinite;
    animation-delay: -3.5s; 
}

/* Traiettoria Parabolica 2 (Assegnata ai nodi Gamma e Delta) */
@keyframes travelOrbitTwo {
    0% { motion-offset: 100%; }
    100% { motion-offset: 0%; } /* Gira in senso opposto */
}

.node-gamma {
    motion-path: path("M 120,420 Q 350,500 480,260 T 250,100");
    motion-position: 100%;
    animation: travelOrbitTwo 8s linear infinite;
}

.node-delta {
    motion-path: path("M 120,420 Q 350,500 480,260 T 250,100");
    motion-position: 100%;
    animation: travelOrbitTwo 11s linear infinite;
    animation-delay: -4s;
}

/* 4. Effetto Bagliore pulsante sui nodi principali per simulare attività biologica */
.moving-node {
    filter: drop-shadow(0 0 8px #00F2FE);
}

/* Ottimizzazione reattiva per i display Mobile */
@media (max-width: 767px) {
    #ContainerSvg {
        height: 340px;
        margin-top: 40px;
    }
}
/*=============================*/



/*  ==============================
 * dettaglio grafico cornici teal nei box */
.box-benefit {
	position: relative !important;
	z-index: 1 !important;
}
.box-benefit::before {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 12px !important;
    height: 12px !important;
    border-top: 2px solid var(--e-global-color-accent) !important;
    border-left: 2px solid var(--e-global-color-accent) !important;
    pointer-events: none !important;
	z-index: 2 !important;
}

.box-benefit::after {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    right: -1px !important;
    width: 12px !important;
    height: 12px !important;
    border-top: 2px solid var(--e-global-color-accent) !important;
    border-right: 2px solid var(--e-global-color-accent) !important;
    pointer-events: none !important;
	z-index: 2 !important !important;
}