/* Load after style.css. All selectors are temporary markers owned by experience.js.
   The module removes them on animation finish/cancel and never alters layout. */
:where(.experience-active) {
  will-change: translate, opacity;
}

:where(.experience-active[data-experience='turn']) {
  outline: 1px solid transparent;
  outline-offset: 3px;
}

:where(.experience-active[data-experience='reject']) {
  outline: 1px solid rgba(195, 145, 117, .6);
  outline-offset: 3px;
}

/* Existing selected/hover/focus styling remains the permanent visual feedback.
   JS also checks this preference because CSS alone cannot stop Web Animations. */
body.reduced-motion :where(.experience-active) {
  will-change: auto;
}
body.reduced-motion :where(.experience-active[data-experience='turn'], .experience-active[data-experience='reject']) {
  outline-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  :where(.experience-active) { will-change: auto; }
  :where(.experience-active[data-experience='turn'], .experience-active[data-experience='reject']) {
    outline-color: transparent;
  }
}