/* Brief entrance motion and restrained interaction feedback. */
@media (prefers-reduced-motion: no-preference) {
  .sound-panel { animation: studio-enter 900ms cubic-bezier(.2,.75,.25,1) both; }
  .floating-note { animation: note-settle 1100ms 250ms cubic-bezier(.2,.75,.25,1) backwards; }
  .genre { transition: translate 300ms ease, box-shadow 300ms ease; }
  .genre-graphic { transition: transform 450ms cubic-bezier(.2,.75,.25,1); }
  .button { transition: background 200ms ease, transform 250ms ease, box-shadow 250ms ease; }
  .button span, .text-link span { display: inline-block; transition: transform 250ms ease; }
  nav a { position: relative; }
  nav a::after { content: ''; position: absolute; bottom: -7px; left: 0; width: 100%; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 250ms ease; }
  nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
  .button:hover, .button:focus-visible { box-shadow: 0 7px 25px #ff243b26; }
  .button:hover span, .button:focus-visible span { transform: translate(2px,-2px); }
  .text-link:hover span { transform: translateY(3px); }
  details[open] p { animation: answer-enter 250ms ease-out; }
  .join-message:not([hidden]) { animation: answer-enter 300ms ease-out; }
  @media (hover: hover) and (pointer: fine) {
    .genre:hover { translate: 0 -6px; box-shadow: 0 18px 35px #0004; }
    .genre:hover .genre-graphic { transform: rotate(-7deg) scale(1.07); }
  }
}
@keyframes studio-enter { from { opacity: 0; transform: translateY(25px) rotate(-1deg); } to { opacity: 1; transform: translateY(0) rotate(-3deg); } }
@keyframes note-settle { from { opacity: 0; translate: 0 15px; } to { opacity: 1; translate: 0 0; } }
@keyframes answer-enter { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}