@keyframes highlight-reveal {
    to {
        background-size: 100% 100%;
    }
}

body.wp-child-theme-hectoria {
    & .light-orange-highlighted {
        color: var(--orange);
        background-image: linear-gradient(120deg, var(--light-orange) 0%, var(--light-orange) 100%);
        background-repeat: no-repeat;
        background-size: 0% 100%;
        background-position: 0 0;
        
        &.visible {
            animation: highlight-reveal 0.8s ease-out forwards;
        }
    }

    & .dark-orange-highlighted {
        color: white;
        background-image: linear-gradient(120deg, var(--orange) 0%, var(--orange) 100%);
        background-repeat: no-repeat;
        background-size: 0% 100%;
        background-position: 0 0;
        
        &.visible {
            animation: highlight-reveal 0.8s ease-out forwards;
        }
    }

    & .light-blue-highlighted {
        background-image: linear-gradient(120deg, var(--light-blue) 0%, var(--light-blue) 100%);
        background-repeat: no-repeat;
        background-size: 0% 100%;
        background-position: 0 0;
        
        &.visible {
            animation: highlight-reveal 0.8s ease-out forwards;
        }
    }

    & .dark-blue-highlighted {
        color: white;
        background-image: linear-gradient(120deg, var(--dark-blue) 0%, var(--dark-blue) 100%);
        background-repeat: no-repeat;
        background-size: 0% 100%;
        background-position: 0 0;
        
        &.visible {
            animation: highlight-reveal 0.8s ease-out forwards;
        }
    }

    & .black-highlighted {
        color: white;
        background-image: linear-gradient(120deg, var(--black) 0%, var(--black) 100%);
        background-repeat: no-repeat;
        background-size: 0% 100%;
        background-position: 0 0;
        
        &.visible {
            animation: highlight-reveal 0.8s ease-out forwards;
        }
    }

    & .light-gold-highlighted {
        background-image: linear-gradient(120deg, var(--light-gold) 0%, var(--light-gold) 100%);
        background-repeat: no-repeat;
        background-size: 0% 100%;
        background-position: 0 0;
        
        &.visible {
            animation: highlight-reveal 0.8s ease-out forwards;
        }
    }

    & .gold-highlighted {
        color: white;
        background-image: linear-gradient(120deg, var(--gold) 0%, var(--gold) 100%);
        background-repeat: no-repeat;
        background-size: 0% 100%;
        background-position: 0 0;
        
        &.visible {
            animation: highlight-reveal 0.8s ease-out forwards;
        }
    }

    & .typo-h1 {
        font-family: "Hanken Grotesk";
        font-size: 60px;
        font-weight: 700;
        line-height: 70px;
        letter-spacing: -1px;
        margin: 0;

        @media (max-width: 1024px) {
            font-size: 50px;
            line-height: 60px;
        }

        @media (max-width: 767px) {
            font-size: 40px;
            line-height: 50px;
        }
    }

    & .typo-h2 {
        font-family: "Hanken Grotesk";
        font-size: 48px;
        font-weight: 700;
        line-height: 58px;
        letter-spacing: -1px;
        margin: 0;
    }

    & .typo-h3 {
        font-family: "Hanken Grotesk";
        font-size: 32px;
        font-weight: 600;
        line-height: 38px; 
        letter-spacing: -0.5px;
        margin: 0;
    }

    & .typo-h4 {
        font-family: "Hanken Grotesk";
        font-size: 20px;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: -0.3px;
        margin: 0;
    }

    & .typo-h6 {
        font-family: Outfit;
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
        margin: 0;
    }

    & .typo-text-xs {
        font-family: "Google Sans Flex";
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
    }

    & .typo-text-xs-med {
        font-family: "Google Sans Flex";
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
    }

    & .typo-text-s {
        font-family: "Google Sans Flex";
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
    }

    & .typo-text-s-semi-b {
        font-family: "Google Sans Flex";
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
    } 

    & .typo-text-m {
        font-family: "Google Sans Flex";
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
    }

    & .typo-text-l {
        font-family: "Google Sans Flex";
        font-size: 18px;
        font-weight: 400;
        line-height: 30px;
    }

    & .typo-text-l-semi-b {
        font-family: "Google Sans Flex";
        font-size: 18px;
        font-weight: 600;
        line-height: 30px;
    }

    & .typo-surtitre {
        font-family: Outfit;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
}