/*TESTO REVAL STYLE
v.1 
homepage, contatti
*/

            .reveal-section {
                min-height: 100%;
                padding-bottom: 10vh;
            }

            .reveal-text {
                font-size: clamp(1.2rem, 2vw, 1.6rem);
                line-height: 1.6;
                max-width: 900px;
                margin: 0 auto;
                text-align: left;
                display: grid;
                width: fit-content;
            }

            .text-chat {
                background-color: #fffdaf;
                border: 1px solid;
                padding: 15px 20px;
                border-radius: 15px 15px 15px 5px;
                margin-bottom: 20px;
                width: fit-content;
                display: inline-table;
            }

            .text-chat-user {
                background-color: #a5ffa0;
                border: 1px solid;
                justify-self: right;
                padding: 15px 20px;
                border-radius: 15px 15px 5px 15px;
                width: fit-content;
                float: right;
            }

            @keyframes reveal {
                from {
                    opacity: 0.15;
                    filter: blur(6px);
                    transform: translateY(12px);
                }

                to {
                    opacity: 1;
                    filter: blur(0);
                    transform: translateY(0);
                }
            }

            .reveal-text>span {
                display: block;
                margin-bottom: 0.75em;

                animation: reveal 1s ease-out both;
                animation-timeline: view();
                will-change: opacity, transform, filter;
            }

            /* range per frase */
            .reveal-text>span:nth-of-type(1) {
                animation-range: cover 10% cover 30%;
            }

            .reveal-text>span:nth-of-type(2) {
                animation-range: cover 18% cover 38%;
            }

            .reveal-text>span:nth-of-type(3) {
                animation-range: cover 26% cover 46%;
            }

            .reveal-text>span:nth-of-type(4) {
                animation-range: cover 34% cover 54%;
            }

            .reveal-text>span:nth-of-type(5) {
                animation-range: cover 45% cover 65%;
            }

            .reveal-text>span:nth-of-type(6) {
                animation-range: cover 50% cover 67%;
            }

            .reveal-text>span:nth-of-type(7) {
                animation-range: cover 57% cover 70%;
            }

            .reveal-text>span:nth-of-type(8) {
                animation-range: cover 67% cover 75%;
            }