/* Motion — highlight sweep */
html:not(.tco-ui-theme-dark) [data-motion="highlight"] h1,
html:not(.tco-ui-theme-dark) [data-motion="highlight"] h2,
html:not(.tco-ui-theme-dark) [data-motion="highlight"] h3,
html:not(.tco-ui-theme-dark) [data-motion="highlight"] h4,
html:not(.tco-ui-theme-dark) [data-motion="highlight"] h5,
html:not(.tco-ui-theme-dark) [data-motion="highlight"] h6,
html:not(.tco-ui-theme-dark) [data-motion="highlight"] p,
html:not(.tco-ui-theme-dark) [data-motion="highlight"] span,
html:not(.tco-ui-theme-dark) [data-motion="highlight"] li {
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 100%);
    background-size: 0% 40%;
    background-repeat: no-repeat;
    background-position: 0 90%;
    transition-property: background-size, color, text-shadow !important;
    transition-duration: 0.6s !important;
    transition-timing-function: ease-out !important;
    display: inline !important;
}
html:not(.tco-ui-theme-dark) [data-motion="highlight"].is-visible h1,
html:not(.tco-ui-theme-dark) [data-motion="highlight"].is-visible h2,
html:not(.tco-ui-theme-dark) [data-motion="highlight"].is-visible h3,
html:not(.tco-ui-theme-dark) [data-motion="highlight"].is-visible h4,
html:not(.tco-ui-theme-dark) [data-motion="highlight"].is-visible h5,
html:not(.tco-ui-theme-dark) [data-motion="highlight"].is-visible h6,
html:not(.tco-ui-theme-dark) [data-motion="highlight"].is-visible p,
html:not(.tco-ui-theme-dark) [data-motion="highlight"].is-visible span,
html:not(.tco-ui-theme-dark) [data-motion="highlight"].is-visible li {
    background-size: 100% 40% !important;
}

/* Motion — text wipe */
html:not(.tco-ui-theme-dark) [data-motion="reveal"] .x-text-content,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] .x-text-content-text,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] h1,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] h2,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] h3,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] h4,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] h5,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] h6,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] p,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] span,
html:not(.tco-ui-theme-dark) [data-motion="reveal"] li {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.6s ease-out;
}
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible .x-text-content,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible .x-text-content-text,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible h1,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible h2,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible h3,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible h4,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible h5,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible h6,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible p,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible span,
html:not(.tco-ui-theme-dark) [data-motion="reveal"].is-visible li {
    clip-path: inset(0 0% 0 0);
}