/* Shared motion language. Content remains visible if JavaScript is unavailable. */
:root {
    --motion-feedback: 150ms;
    --motion-disclosure: 200ms;
    --motion-enter: 300ms;
    --motion-ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: no-preference) {
    /* All semantic controls share feedback, including unclassed login/unlock
       buttons and controls inserted by HTMX. Page variants own appearance. */
    body.tf-site :is(a,button,summary,input,select,textarea) {
        transition-property: background-color,border-color,color,box-shadow,filter;
        transition-duration: var(--motion-feedback);
        transition-timing-function: ease-out;
    }
    body.tf-site :is(button,.ui-button,.hm-button,.tf-button,.tf-button-ghost,.sc-report-primary,.tf-chrome-cta,.tf-report-rescan) .tf-icon-arrow {
        transition: transform var(--motion-feedback) var(--motion-ease);
    }
    @media (hover: hover) {
        body.tf-site :is(button,.ui-button,.hm-button,.tf-button,.tf-button-ghost,.sc-report-primary,.tf-chrome-cta,.tf-report-rescan):not(:disabled,[aria-disabled="true"]):hover .tf-icon-arrow {
            transform: translateX(2px);
        }
    }
    /* Native details retain keyboard behaviour and still work without JS. Only
       the newly opened body moves, never the summary or surrounding layout. */
    .tf-site details[open] > :not(summary,script,style),
    .tf-site .expandable-content.expanded {
        animation: ui-disclosure-in var(--motion-disclosure) var(--motion-ease);
    }
    .tf-site [data-header-menu][open] > :is(nav,.tf-menu-panel) {
        animation-name: ui-menu-in;
        transform-origin: top;
    }
    .tf-site :is(summary,[aria-expanded]) .ui-disclosure-icon,
    .tf-site summary .sc-disclosure-mark {
        transition: transform var(--motion-disclosure) var(--motion-ease);
    }
}

.tf-site details[open] > summary .ui-disclosure-icon,
.tf-site [aria-expanded="true"] > .ui-disclosure-icon { transform: rotate(180deg); }

@keyframes ui-disclosure-in {
    from { opacity: .6; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ui-menu-in {
    from { opacity: .6; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.tf-client-carousel[data-motion-paused="true"] .tf-client-track { animation-play-state: paused; }

/* One global fallback also covers older components during their migration.
   The SVG illustrations contain their own matching media queries because an
   external image does not inherit this document's animation rules. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .tf-site *, .tf-site *::before, .tf-site *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
@media print {
    .tf-site *, .tf-site *::before, .tf-site *::after {
        animation: none !important;
        transition: none !important;
    }
}