h1 {
    /* 1. Apply a linear gradient background */
    background-image: linear-gradient(
        to right,
        #e60000, /* Start color */
        #f4b300 50%, /* First color stop (solid part of the sweep) */
        #f4f4f4 50%, /* Second color stop (the "sweep" color) */
        #f4f4f4 /* End color */
    );
    /* 2. Set the background size wider than the text to allow for movement */
    background-size: 200% 100%;
    /* 3. Clip the background to the shape of the text */
    -webkit-background-clip: text;
    background-clip: text;
    /* 4. Make the text color transparent so only the background shows through */
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    /* 5. Set the initial background position */
    background-position: 100% 0;
    /* 6. Add a smooth transition for the hover effect */
    transition: background-position 2s ease-in-out;
}

/* 7. Animate the background position on hover */
h1:hover {
    background-position: 0 0; /* Moves the gradient from right to left */
}

h1.is-active {
    background-position: 0 0; /* Move gradient to start, revealing the sweep */
}