/* 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(--highlight-color, var(--brand)) 0%, var(--highlight-color, var(--brand)) 100%);
    background-size: 0% var(--highlight-size, 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% var(--highlight-size, 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);
}

/* Motion — scroll-pin horizontal gallery.
   Shipped here so the layout is right at first paint rather than jumping when
   the JS runs. motion-system.js re-asserts these inline against Cornerstone's
   own rules and sets the outer height from the slide count, which CSS can't
   know on its own. */
html.rd-frontend:not(.tco-ui-theme-dark) [data-motion="scroll-pin"] {
    position: relative;
}
html.rd-frontend:not(.tco-ui-theme-dark) [data-motion="scroll-pin"] > *:first-child,
html.rd-frontend:not(.tco-ui-theme-dark) [data-motion="scroll-pin"] > .rd-pin-track,
html.rd-frontend:not(.tco-ui-theme-dark) [data-motion="scroll-pin"] [data-motion-pin-track] {
    position: sticky;
    top: 0;
    overflow: hidden;
    height: 100vh;
    display: flex;
}
html.rd-frontend:not(.tco-ui-theme-dark) [data-motion="scroll-pin"] > *:first-child > *,
html.rd-frontend:not(.tco-ui-theme-dark) [data-motion="scroll-pin"] > .rd-pin-track > *,
html.rd-frontend:not(.tco-ui-theme-dark) [data-motion="scroll-pin"] [data-motion-pin-track] > * {
    flex: 0 0 auto;
    width: 100vw;
}
html.rd-frontend:not(.tco-ui-theme-dark) [data-motion-pin-progress] {
    transform: scaleX(0);
    transform-origin: left center;
}

/* Motion — remove Cornerstone transition conflicts on animated elements */
html:not(.tco-ui-theme-dark) [data-motion],
html:not(.tco-ui-theme-dark) [data-motion-hover],
html:not(.tco-ui-theme-dark) [data-motion-press] {
    transition: none !important;
}