.animated-text {
            position: relative;
            font-size: 24px;
            line-height: 1.5;
            color: rgba(128, 128, 128, 0.171); /* Start with white text (invisible) */
            margin-bottom: 20px;
        }

        /* Create animated mask for each line */
        .animated-text::before,
        .animated-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            overflow: hidden;
            white-space: pre-wrap;
            animation-duration: 1.8s;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }

        .animated-text::before {
            color: #000000; /* Grey color */
            animation-name: fillText;
            animation-delay: 0.2s;
        }

        .animated-text::after {

            transition: background-color 0.5s;
        }

        .animated-text::after {
                content: "";
                position: absolute;
                inset: 0;
                background-color: transparent;
                pointer-events: none;
                z-index: 99;
                color: #000; /* Black color */
                animation-name: fillText;
                animation-delay: 0.8s;
                transition: background-color 0.3s;
        }

        .animated-text.dim::after {
            background-color: #f0f0f0b4;
        }

        @keyframes fillText {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }

        /* Andy Kohler styling */
        .name-highlight {
            color: rgba(128, 128, 128, 0.171); /* Start with white text (invisible) */
            position: relative;
            cursor: pointer;
            z-index: 203;
            animation: highlightFill 1.8s forwards;
            animation-delay: 0.8s; /* Match animated-text::after delay */
        }

        @keyframes highlightFill {
            0% {
                color: rgba(219, 37, 83, 0.2); /* Faded */
                text-decoration: none;
            }
            99% {
                text-decoration: none;
            }
            100% {
                color: #DB2553; /* Final highlight color */
                text-decoration: underline;
            }
        }
        /* Windows XP style tooltip */
        .tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #c0c0c0;
            border-top: 2px solid #ffffff;
            border-left: 2px solid #ffffff;
            border-right: 2px solid #808080;
            border-bottom: 2px solid #808080;
            border-radius: 0;
            padding: 8px 12px;
            font-size: 0.8em;
            color: #000;
            white-space: nowrap;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
            box-shadow: 1px 1px 0px #000000;
            margin-bottom: 8px;
            max-width: 45em;
            min-width: 20em;
            height: auto;
            text-align: left;
            white-space: normal;
            visibility: hidden;
            pointer-events: none;
        }
        /* Tooltip arrow */

        .name-highlight:hover > .tooltip {
            opacity: 1;
            visibility: visible;
        }

        .name-highlight:hover {
            position: relative;
            z-index: 100;
        }

        .animated-text.faded::after {
            transition: background-color 0.5s;
            content: "";
            position: absolute;
            inset: 0;
            background-color: #f0f0f08a;
            pointer-events: none; /* Allows interaction with underlying elements */
            z-index: 99; /* Below tooltip (z-index: 1000) and .name-highlight (z-index: 101) */
        }

        .animated-text:has(.name-highlight:hover) .name-highlight {
            opacity: 1;
            z-index: 101;
        }