/* Short entrances and direct interaction feedback. No continuous movement. */
.hero-art::before {
  content:'';
  position:absolute;
  inset:8% -5%;
  z-index:-3;
  border-radius:50%;
  background:radial-gradient(ellipse, color-mix(in srgb,var(--accent-primary) 14%,transparent),transparent 68%);
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference) {
  .button { transition:background .2s,transform .25s,box-shadow .25s; }
  .button > span,.card-open,.portfolio-grid a > span { transition:transform .3s cubic-bezier(.22,1,.36,1); }
  .portfolio-grid > a { transition:transform .3s,border-color .3s,background .3s; }
  .rail-controls button { transition:transform .2s,border-color .2s; }
  .rail-controls button:active { transform:scale(.92); }
  dialog[open] { animation:dialog-enter .25s cubic-bezier(.22,1,.36,1); }
  dialog[open]::backdrop { animation:backdrop-enter .2s ease-out; }
  @media (hover:hover) and (pointer:fine) {
    .primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px color-mix(in srgb,var(--accent-primary) 22%,transparent); }
    .button:hover > span,.portfolio-grid a:hover > span { transform:translate(2px,-2px); }
    .story-card:hover .card-open { transform:rotate(45deg); }
    .portfolio-grid > a:hover { transform:translateY(-5px); background:var(--bg-elevated); }
    .rail-controls button:hover { transform:translateY(-2px); }
  }
  .button:active { transform:scale(.98); }
}
@keyframes dialog-enter { from { opacity:0; translate:0 12px; scale:.985; } to { opacity:1; translate:0 0; scale:1; } }
@keyframes backdrop-enter { from { opacity:0; } to { opacity:1; } }