:root {
    --tenato-motion-duration: 600ms;
    --tenato-motion-distance: 24px;
    --tenato-motion-stagger: 70ms;
    --tenato-motion-interaction: 180ms;
    --tenato-motion-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Section-level values affect entrances only, not buttons or disclosures. */
[data-tenato-motion-speed="fast"] { --tenato-motion-duration: 400ms; }
[data-tenato-motion-speed="standard"] { --tenato-motion-duration: 600ms; }
[data-tenato-motion-speed="slow"] { --tenato-motion-duration: 800ms; }

.button.button {
    transition: background-color var(--tenato-motion-interaction), border-color var(--tenato-motion-interaction), color var(--tenato-motion-interaction);
}

/* These classes are added only after JS has registered an offscreen target. */
@media (prefers-reduced-motion: no-preference) {
    .tenato-motion-pending {
        opacity: 0;
    }

    .tenato-motion-enter {
        animation: tenato-enter var(--tenato-motion-duration) var(--tenato-motion-easing) backwards;
        animation-delay: calc(var(--tenato-motion-delay, 0) * var(--tenato-motion-stagger));
    }

    @keyframes tenato-enter {
        from { opacity: 0; transform: translateY(var(--tenato-motion-distance)); }
        to { opacity: 1; transform: translateY(0); }
    }

    .tenato-motion-pending:focus-within,
    .tenato-motion-enter:focus-within {
        opacity: 1;
        animation: none;
    }

    .button.button--arrow > svg {
        transition: transform var(--tenato-motion-interaction) var(--tenato-motion-easing);
    }

    .button.button--arrow:focus-visible > svg {
        transform: translateX(3px);
    }

    /* Only answer text enters; existing accordion layout/state stays intact. */
    .accordion__item.is-active .accordion__text > .text {
        animation: tenato-disclosure var(--tenato-motion-interaction) ease-out;
    }

    @keyframes tenato-disclosure {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .button.button--arrow:hover > svg { transform: translateX(3px); }
}

@media (max-width: 767px) {
    :root {
        --tenato-motion-duration: 500ms;
        --tenato-motion-distance: 16px;
        --tenato-motion-stagger: 40ms;
    }
    [data-tenato-motion-speed="fast"] { --tenato-motion-duration: 350ms; }
    [data-tenato-motion-speed="standard"] { --tenato-motion-duration: 500ms; }
    [data-tenato-motion-speed="slow"] { --tenato-motion-duration: 650ms; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    .carousel__item.is-active .carousel__image > img {
        animation: tenato-disclosure var(--tenato-motion-interaction) ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Include existing navigation/feature motion, without changing the demo. */
    .header.header,
    .hamruger .hamruger__inner,
    .hamruger.hamruger::before,
    .hamruger.hamruger::after,
    .nav__item.nav__item::before,
    .button.button,
    .accordion__expand.accordion__expand::before,
    .carousel__top.carousel__top::before,
    .carousel__image.carousel__image {
        transition: none;
    }
}

@media print {
    .tenato-motion-pending { opacity: 1 !important; }
    .tenato-motion-enter,
    .accordion__item.is-active .accordion__text > .text,
    .carousel__item.is-active .carousel__image > img { animation: none !important; }
}