/* No hidden starting state: the complete page also works without motion.js. */
.dt-writing-line {
    display:inline-block;
    white-space:pre-wrap;
}
@media(prefers-reduced-motion:no-preference) {
    [data-motion-pending="true"] { opacity:0; }
    .dt-writing-pending .dt-writing-line {
        clip-path:inset(-20% 100% -20% -8%);
    }
    .product-tabs button {
        transition:background-color .22s ease, color .22s ease;
    }
    .value-card.dt-card-pending { opacity:0; }
    .value-card.dt-card-revealed {
        animation:dt-card-appear .36s ease-out var(--dt-card-delay) backwards;
    }
    .value-copy.dt-copy-pending>:is(h3,.text-link),
    .value-copy.dt-copy-pending li { opacity:0; }
    .value-copy.dt-copy-revealed>:is(h3,.text-link),
    .value-copy.dt-copy-revealed li {
        animation:dt-card-appear .3s ease-out calc(var(--dt-card-delay) + var(--dt-copy-delay)) backwards;
    }
    @keyframes dt-card-appear { from { opacity:0; } to { opacity:1; } }
    .steps.dt-journey { --dt-step-clip:inset(0 100% 0 0); }
    .steps.dt-journey>li.dt-step-pending>:is(.step-icon,h3,p) { opacity:0; }
    .steps.dt-journey>li.dt-step-pending::after { clip-path:var(--dt-step-clip); }
    .steps.dt-journey>li.dt-step-revealed>:is(.step-icon,h3,p) {
        animation:dt-step-appear .28s ease-out var(--dt-step-delay) backwards;
    }
    .steps.dt-journey>li.dt-step-revealed::after {
        animation:dt-step-connect .42s cubic-bezier(.22,1,.36,1) calc(var(--dt-step-delay) + .12s) backwards;
    }
    @keyframes dt-step-appear { from { opacity:0; } to { opacity:1; } }
    @keyframes dt-step-connect { from { clip-path:var(--dt-step-clip); } to { clip-path:inset(0); } }
    /* The ink sits on top of each existing shape/rotation. */
    .dt-ink-draw:is(.module-note,.gp-hero-note,.gp-how-note)::after {
        transform-origin:left center;
        animation:dt-ink-line .65s cubic-bezier(.2,.8,.2,1) both;
    }
    .dt-ink-draw:is(.flow-arrow,.gp-drawn-arrow,.ml-drawn-arrow) path {
        stroke-dasharray:1;
        animation:dt-ink-stroke .7s cubic-bezier(.2,.8,.2,1) both;
    }
    .hero-tagline.dt-ink-draw>svg {
        transform-origin:left center;
        animation:dt-ink-line .65s cubic-bezier(.2,.8,.2,1) both;
    }
    .steps>li.dt-line-draw::after,
    .gp-steps>li.dt-line-draw::after,
    .ml-steps>li.dt-line-draw::after,
    .ar-steps>li.dt-line-draw::after {
        transform-origin:left center;
        animation:dt-ink-line .6s cubic-bezier(.2,.8,.2,1) 60ms both;
    }
    @keyframes dt-ink-line { from{scale:0 1} to{scale:1 1} }
    @keyframes dt-ink-stroke { from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
    @keyframes dt-ink-vertical { from{scale:1 0} to{scale:1 1} }
    @media(max-width:760px) {
        .value-card { --dt-card-delay:0ms!important; }
        .steps.dt-journey { --dt-step-clip:inset(0 0 100% 0); }
        .steps.dt-journey>li { --dt-step-delay:0ms!important; }
        .steps>li.dt-line-draw::after,.ar-steps>li.dt-line-draw::after {
            transform-origin:center top;
            animation-name:dt-ink-vertical;
        }
    }
}

/* Small responses to deliberate input; no floating or looping elements. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    .marketing-hero-page a:is(.button,.text-link,.mp-text-link) .action-icon,
    .marketing-hero-page .ar-choice-link .action-icon {
        transition:translate .22s cubic-bezier(.22,1,.36,1);
    }
    .marketing-hero-page a:is(.button,.text-link,.mp-text-link):hover .action-icon {
        translate:3px -1px;
    }
    .marketing-hero-page :is(.palette,.op-colors,.sp-colors) button {
        transition:scale .18s ease;
    }
    .marketing-hero-page :is(.palette,.op-colors,.sp-colors) button:hover { scale:1.08; }
    .marketing-hero-page .ar-choice:hover .ar-choice-link .action-icon { translate:3px -2px; }
}
@media print {
    [data-motion] { opacity:1!important; translate:none!important; scale:none!important; rotate:none!important; animation:none!important; }
    .steps.dt-journey>li>* { opacity:1!important; animation:none!important; }
    .steps.dt-journey>li::after { clip-path:none!important; animation:none!important; }
    .value-card[data-motion="value-card"],
    .value-card[data-motion="value-card"] * { opacity:1!important; animation:none!important; }
    .dt-writing-line { clip-path:none!important; }
}