.elemento {
    width: 80%;
    margin: 100px auto;
    padding: 50px;
    background-color: #f0f0f0;
    text-align: center;
    font-size: 24px;
    border: 1px solid #ccc;
}

body{
    transition: all 0.5s ease-out;
}
/* Stili di base per tutti gli elementi con 'data-effect' */
[data-effect]:not([data-no_opacity_effect]) {
    opacity: 0;
    transition: all 0.5s ease-out;
}

/* Stato attivo quando la classe 'active' è presente */
[data-effect].active:not([data-effect="discovery-from-top"])  {
    opacity: 1;
}

/* Effetto fade-in (nessun ulteriore stile necessario) */

/* Effetto slide-up */
[data-effect="slide-up"] {
    transform: translateY(80px);
}

[data-effect="slide-up"].active {
    transform: translateY(0);
}

/* Effetto slide-down */
[data-effect="slide-down"] {
    transform: translateY(-80px);
}

[data-effect="slide-down"].active {
    transform: translateY(0);
}

/* Effetto slide-left */
[data-effect="slide-left"] {
    transform: translateX(-80px);
}
[data-effect="slide-left"].active {
    transform: translateX(0);
}

/* Effetto slide-right */
[data-effect="slide-right"] {
    transform: translateX(80px);
}
[data-effect="slide-right"].active {
    transform: translateX(0);
}

/* Effetto zoom-in */
[data-effect="zoom-in"] {
    transform: scale(0.8);
}

[data-effect="zoom-in"].active {
    transform: scale(1);
}

/* Effetto go to full_width */
[data-effect="full-width"] {
    width: var(--wdef); /* chiaramente definito nella index.css (cambia in base al sito) */
    margin: auto;
    transition: all 0.5s ease-out;
}

[data-effect="full-width"].active {
    width: 100%;
}


/* Effetto change-color */
body:has([data-effect="change_color"].dark.active) {
    background-color: #062336;
}
body:has([data-effect="change_color"].light.active) {
    background-color: #0A3D5E;
}

/* Effetto discovery-from-top */
[data-effect="discovery-from-top"]{
    position: relative;
    overflow: hidden;
}
[data-effect="discovery-from-top"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue);
    transform: translateY(0);
    transition: transform 1s ease-out;
    z-index: 1;
}
[data-effect="discovery-from-top"].active::before {
    transform: translateY(100%);
}

/* Effetto go up */
[data-effect="letter_up"]{
    opacity: 0;
}
[data-effect="letter_up"].active{
    opacity: 1;
}
[data-effect="letter_up"] span{
    display: inline-block;
    transform: translateY(20px);
    opacity: 0;
}
[data-effect="letter_up"].active span{
    animation: letter_up 0.5s forwards;
}
@keyframes letter_up {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}