/* 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;
}

/* The typewriter's caret, 2026-09-11. A real element rather than a trailing character,
   so it blinks with CSS and cannot be picked up when somebody selects the heading. Sized
   from the text it sits in, so it matches whatever the heading is set at.

   **The wrapper has NO height and the bar is drawn by a pseudo-element, changed
   2026-09-11.** An inline-block contributes its own margin box to the line box it sits
   in, whatever the line-height around it, so a 1em-tall caret made the line grow the
   moment it appeared and shrink again when it left. On a display heading, where a
   line-height below 1 is normal, that is a visible jump. Reported as exactly that. A
   zero-height wrapper cannot change a line box at all, and the visible bar is positioned
   out of flow, so the caret is now free of the layout entirely.

   Colour comes from --rd-caret-color and falls back to the text, so a heading that
   changes colour takes its caret with it. The JS sets that variable inline from
   data-motion-caret-color, which beats any stylesheet that sets the variable. It does not
   need !important: nothing in a site's CSS targets this pseudo-element, and the fallback
   is a fallback rather than a competing declaration. */
.rd-type-caret {
    position: relative;
    display: inline-block;
    width: 0.08em;
    height: 0;
    margin-left: 0.06em;
    vertical-align: baseline;
}

.rd-type-caret::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.12em;
    width: 100%;
    height: 1em;
    background: var(--rd-caret-color, currentColor);
    /* Longhands rather than the `animation` shorthand, deliberately: the resting
       rule below overrides the duration alone, and a shorthand carrying a var()
       makes every one of its longhands a pending substitution, which is a worse
       thing to reason about than four plain declarations. */
    animation-name: rd-type-caret-blink;
    animation-duration: var(--rd-caret-blink, 1s);
    animation-timing-function: steps(1);
    animation-iteration-count: infinite;
}

/* Blink off. The caret stays exactly where it is, solid. */
.rd-type-caret--steady::before {
    animation-name: none;
    opacity: 1;
}

/* A caret that stays is a permanent element on the page rather than a brief tail, and a
   1s blink that never stops is busier than it needs to be. Slower unless somebody has
   set a speed of their own. */
.rd-type-caret--resting::before {
    animation-duration: var(--rd-caret-blink, 1.2s);
}

.rd-type-caret--fading::before {
    animation: rd-type-caret-out 0.4s ease forwards;
}

@keyframes rd-type-caret-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

@keyframes rd-type-caret-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Nothing types under reduced motion, so nothing should blink either. */
@media (prefers-reduced-motion: reduce) {
    .rd-type-caret { display: none; }
}