html.atelier-theme #app[data-interactions] :is(button,a[href],[role="button"]) {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
    box-shadow 220ms ease, scale 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

html.atelier-theme #app[data-interactions] :is(input,textarea,select,.hb-select-trigger) {
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 220ms ease;
}

html.atelier-theme body.home-mode #app .generation-composer,
html.atelier-theme body.home-mode #app .generation-composer::before,
html.atelier-theme body.home-mode #app .generation-composer::after,
html.atelier-theme body.home-mode #app #generation-prompt,
html.atelier-theme body.home-mode #app #generation-prompt::before,
html.atelier-theme body.home-mode #app #generation-prompt::after {
  animation: none;
  transition: none !important;
  transform: none;
  translate: none;
  rotate: none;
  scale: none;
}

html.atelier-theme body.home-mode #app #generation-prompt { border-color: transparent !important; }

html.atelier-theme #app[data-interactions] :is(.topic-suggestion,.account-tile,.course-card) {
  transition: border-color 200ms ease, box-shadow 220ms ease, scale 180ms ease;
}

html.atelier-theme #app[data-interactions] :is(button,a[href],[role="button"]).interaction-pressed {
  scale: .985;
}

html.atelier-theme #app[data-interactions] .interaction-clicked {
  animation: interaction-click 320ms ease-out;
}

html.atelier-theme #main.page-entering {
  animation: interaction-arrival 460ms cubic-bezier(.2,.7,.2,1) both;
}

html.atelier-theme #app[data-interactions] :is(.topic-suggestion,.account-tile,.course-card)[data-interaction-glow] {
  position: relative;
}

html.atelier-theme #app[data-interactions] :is(.topic-suggestion,.account-tile,.course-card)[data-interaction-glow]::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(110deg, transparent 32%, color-mix(in srgb, var(--accent, #973c59) 5%, transparent) 50%, transparent 68%);
  background-size: 220% 100%;
  background-position: var(--interaction-glow-position, 50%) center;
}

html.atelier-theme #app[data-interactions] :is(button,a[href],input,textarea,select,[role="button"]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #973c59) 70%, white);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  html.atelier-theme #app[data-interactions] :is(.topic-suggestion,.account-tile,.course-card):hover {
    box-shadow: 0 9px 26px #292b3609;
  }
}

@keyframes interaction-arrival {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes interaction-click {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #973c59) 16%, transparent); }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

html.atelier-theme body.reduce-motion #app[data-interactions] *,
html.atelier-theme body.reduce-motion #app[data-interactions] *::before,
html.atelier-theme body.reduce-motion #app[data-interactions] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.atelier-theme body.reduce-motion #app[data-interactions] .interaction-pressed { scale: 1; }
html.atelier-theme body.reduce-motion #app[data-interactions] [data-interaction-glow]::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.atelier-theme #app[data-interactions] *,
  html.atelier-theme #app[data-interactions] *::before,
  html.atelier-theme #app[data-interactions] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html.atelier-theme #app[data-interactions] .interaction-pressed { scale: 1; }
  html.atelier-theme #app[data-interactions] [data-interaction-glow]::after { display: none; }
}