/* RPG Character Site — approved micro-interactions
   Compatible with the 2026-10-26 site UI, main 71c1aa1…
   Buttons: gentle hover/press; disclosures: 180ms; dialogs: brief entrance;
   notices: subtle entrance/exit. No moving arcana or pulsing stats.
   Place after /static/style.css in static/index.html.
*/

/* Preserve the original colors, sizes and existing focus outlines. */
button:not(:disabled),
.character-link,
.file-pick,
.arcana-picker-card summary,
.inventory-history-item summary {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    transform 120ms ease,
    opacity 180ms ease,
    visibility 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover,
  .character-link:hover,
  .file-pick:hover {
    filter: brightness(1.075);
  }
}

button:not(:disabled):active {
  transform: translateY(1px);
  filter: brightness(.975);
}

/* Keep stat controls vertically centered, including reduced-motion mode. */
.sheet-stats .stat-step,
.sheet-stats .stat-step:active {
  transform: translateY(-50%) !important;
}

/* Animate revealed content, not the position/order of character arcana. */
details[open] > :not(summary) {
  animation: rpg-expand-in 180ms ease-out both;
}
@keyframes rpg-expand-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Native modal dialogs remain in the browser top layer. */
.dialog[open] {
  animation: rpg-dialog-in 180ms cubic-bezier(.2, .72, .3, 1) both;
}
.dialog[open]::backdrop {
  animation: rpg-backdrop-in 180ms ease-out both;
}
@keyframes rpg-dialog-in {
  from { opacity: 0; transform: translateY(7px) scale(.992); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rpg-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The current app creates notices as .message and .site-toast. */
.message {
  animation: rpg-notice-in 180ms ease-out both;
}
.site-toast {
  animation: rpg-notice-in 180ms ease-out both;
}
.site-toast.is-established:not(.is-leaving) {
  animation: none;
}
.site-toast.is-leaving {
  animation: rpg-notice-out 160ms ease-in forwards;
  pointer-events: none;
}
@keyframes rpg-notice-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rpg-notice-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(5px); }
}

/* Accessibility: respect the user's OS motion preference. */
@media (prefers-reduced-motion: reduce) {
  button,
  .character-link,
  .file-pick,
  .arcana-picker-card summary,
  .inventory-history-item summary,
  details[open] > :not(summary),
  .dialog[open],
  .dialog[open]::backdrop,
  .site-toast,
  .site-toast.is-leaving,
  .message {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}