/* One motion system; no animation library or perpetual loops. */
:root { --motion-ease: cubic-bezier(.22,.7,.2,1); }
nav a, nav button { position: relative; padding-block: 8px; }
nav a::after, nav button::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--accent-hover); transform: scaleX(0);
  transform-origin: left; pointer-events: none;
}
nav .active::after, nav a:hover::after, nav button:hover::after,
nav a:focus-visible::after, nav button:focus-visible::after { transform: scaleX(1); }
.track { position: relative; border-radius: 5px; }
.track.playing { box-shadow: inset 3px 0 var(--accent-hover); }
.player::before {
  content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg,transparent,var(--accent-hover),transparent);
  opacity: 0; pointer-events: none;
}
.player.is-playing::before { opacity: 1; }
.primary { position: relative; overflow: hidden; isolation: isolate; }
.primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg,transparent 25%,#ffffff25 50%,transparent 75%);
  transform: translateX(-120%);
}
@keyframes keem-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes keem-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes keem-toast-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .brand-banner, .hero-copy > *, .feature, .section-top, .filters, .track, .license-strip, footer {
    transition: opacity .55s var(--motion-ease) var(--reveal-delay,0ms),
      translate .55s var(--motion-ease) var(--reveal-delay,0ms);
  }
  .reveal-pending { opacity: 0; translate: 0 16px; }
  .primary, .round, .price, .chip, .outline, .bag, .license-card button {
    transition: transform .18s var(--motion-ease), background-color .18s ease,
      border-color .18s ease, color .18s ease, box-shadow .18s ease;
  }
  nav a, nav button { transition: color .18s ease; }
  nav a::after, nav button::after { transition: transform .22s var(--motion-ease); }
  .primary span, .art, .license-card { transition: transform .22s var(--motion-ease), border-color .22s ease; }
  .primary::after { transition: transform .65s var(--motion-ease); }
  .brand-banner img { transition: transform 1s var(--motion-ease); }
  .cover { transition: transform .5s var(--motion-ease); }
  .player::before { transition: opacity .3s ease; }
  dialog[open] { animation: keem-dialog-in .22s var(--motion-ease); }
  dialog[open]::backdrop { animation: keem-fade-in .2s ease; }
  .toast { animation: keem-toast-in .22s var(--motion-ease); }
  .primary:focus-visible::after { transform: translateX(120%); }
  @media (hover: hover) and (pointer: fine) {
    .primary:hover, .price:hover, .outline:hover, .bag:hover { transform: translateY(-2px); box-shadow: 0 7px 22px #0004; }
    .primary:hover::after { transform: translateX(120%); }
    .primary:hover span { transform: translate(2px,-2px); }
    .round:hover { transform: scale(1.06); }
    .chip:hover { transform: translateY(-1px); }
    .track:hover .art { transform: scale(1.04); }
    .license-card:hover { transform: translateY(-3px); border-color: var(--accent-hover); }
    .brand-banner:hover img { transform: scale(1.025); }

  }
  button:not(:disabled):active, .primary:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; translate: none; }
}