/* Motion: calm, eased, never on live data. Rules: .claude/skills/the-couturier/references/motion.md
   Everything here switches off under prefers-reduced-motion. */

/* Reveal on scroll: add data-reveal to cards/panels/sections (not to live rows). theme.js hides only elements
   that appear below the fold (.reveal-pending) and removes the class when they scroll into view.
   Without JS nothing is ever hidden. Stagger siblings with style="--reveal-index: n". */
[data-reveal] {
    transition: opacity var(--ap-dur-slow) var(--ap-ease-out), transform var(--ap-dur-slow) var(--ap-ease-out);
    transition-delay: calc(var(--reveal-index, 0) * 60ms);
}
[data-reveal].reveal-pending {
    opacity: 0;
    transform: translateY(var(--ap-rise));
}

/* Page enter: the content fades/rises after each navigation. MainLayout (interactive) and the enhancedload
   listener (static pages) call apTheme.pageEnter(), which restarts it. Never put .page-enter in markup: the
   interactive render replaces the prerendered DOM, which would replay the fade a second after load. */
.page-enter {
    animation: ap-page-enter var(--ap-dur-slow) var(--ap-ease-out) both;
}
@keyframes ap-page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Hover lift for buttons; pressing pushes back. */
.btn:not(.btn-link):not(:disabled):hover, .e-btn:not(.e-flat):not(:disabled):hover { transform: translateY(-1px); }
.btn:not(.btn-link):active, .e-btn:not(.e-flat):active { transform: translateY(0) scale(.98); }

/* Theme switch: a short cross-fade of colours, only while switching (theme.js sets .theme-switching). */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
    transition: background-color var(--ap-dur) var(--ap-ease), border-color var(--ap-dur) var(--ap-ease),
                color var(--ap-dur) var(--ap-ease), fill var(--ap-dur) var(--ap-ease) !important;
}

/* Change highlight for live values (the Curator's "highlight changes briefly"): add .flash-change once. */
.flash-change { animation: ap-flash 1.6s var(--ap-ease) 1; }
@keyframes ap-flash {
    0% { background-color: var(--ap-live-soft); }
    100% { background-color: transparent; }
}

@keyframes ap-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal].reveal-pending { opacity: 1; transform: none; }
    .btn:hover, .e-btn:hover, .card-interactive:hover, a.card:hover { transform: none !important; }
}