/* Shared motion contract. Layout and content work without animation support. */
:root { --motion-fast: 140ms; --motion-normal: 220ms; --motion-page: 280ms; --motion-ease: cubic-bezier(.2,.75,.25,1); --motion-release: cubic-bezier(.16,1,.3,1); }
dialog[open]::backdrop { animation: prospere-backdrop-in var(--motion-normal) ease-out both; }
@keyframes prospere-backdrop-in { from { background-color: transparent; backdrop-filter: blur(0); } }
.navigation-drawer[data-closing]::backdrop { animation: prospere-backdrop-out var(--motion-normal) ease-in both; }
@keyframes prospere-backdrop-out { to { background-color: transparent; backdrop-filter: blur(0); } }
#refresh-button[aria-busy="true"] svg { animation: prospere-refresh .9s linear infinite; }
@keyframes prospere-refresh { to { transform: rotate(360deg); } }
.content[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"] { cursor: progress; }
.button, .icon-button, .nav-link, .interactive, .mobile-menu-link, .landing-button, summary { -webkit-tap-highlight-color: transparent; }
/* Only the internal app opts in. WAAPI owns press scale; CSS keeps color/focus. */
:is(#app-view, #modal)[data-interaction-motion] :is(button, a[href], summary):active { transform: none; }
:is(#app-view, #modal)[data-interaction-motion] :is(button, a[href], summary, label) > svg,
:is(#app-view, #modal)[data-interaction-motion] :is(.nav-icon, .home-action-icon, .shortcut-icon, .admin-route-icon, .area-illustration, .illustration-sheet) svg,
:is(#app-view, #modal)[data-interaction-motion] svg[data-icon] { transform-origin: center; transform-box: view-box; }
/* Image layers add depth without changing card layout. */
#content [data-card-motion] { transition: transform var(--motion-normal) var(--motion-release), border-color var(--motion-fast) ease-out, box-shadow var(--motion-normal) ease-out; }
#content .home-welcome[data-card-motion]::before { inset: -20px; transform: translate3d(var(--card-x, 0px), calc(var(--card-y, 0px) + var(--card-scroll, 0px)), 0); transition: transform var(--motion-normal) ease-out; }
#content .event-list-card[data-card-motion] .event-card-poster { overflow: hidden; }
#content .event-list-card[data-card-motion] .event-cover-image { transform: translate3d(var(--card-x, 0px), calc(var(--card-y, 0px) + var(--card-scroll, 0px)), 0) scale(1.09); transition: transform var(--motion-normal) ease-out; }
#content .home-event-artwork { overflow: hidden; aspect-ratio: 2 / 1; border-radius: 10px; }
#content .home-event-artwork .home-event-cover { height: 100%; border-radius: 0; transform: translate3d(var(--card-x, 0px), calc(var(--card-y, 0px) + var(--card-scroll, 0px)), 0) scale(1.09); transition: transform var(--motion-normal) ease-out; }
#content .member-directory-card[data-card-motion] .avatar { overflow: hidden; }
#content .member-directory-card[data-card-motion] .avatar img { transform: translate3d(calc(var(--card-x, 0px) * .5), calc(var(--card-y, 0px) * .5), 0) scale(1.14); transition: transform var(--motion-normal) ease-out; }
@media (hover: hover) and (pointer: fine) {
  #content [data-card-motion]:not(.home-welcome) { transform: perspective(1100px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)); }
  #content [data-card-motion]:not(.home-welcome):is(:hover, :focus-within) { transform: perspective(1100px) translateY(-3px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
  #content .event-list-card[data-card-motion]:is(:hover, :focus-within) .event-cover-image { transform: translate3d(var(--card-x, 0px), calc(var(--card-y, 0px) + var(--card-scroll, 0px)), 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0s !important; }
  #content [data-card-motion], #content .home-welcome[data-card-motion]::before,
  #content [data-card-motion] .event-cover-image, #content [data-card-motion] .avatar img,
  #content [data-card-motion] .company-mark img { transform: none !important; }
}