/* Button hover animation: rising circle fill (scoped under html.motion, set by motion.js). */
.motion .btn, .motion .circle-btn, .motion .chat-icon, .motion .socials a { position: relative; overflow: hidden; isolation: isolate; }
.btn-fill {
  position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, 55%); z-index: -1; pointer-events: none; will-change: transform;
}
.btn-text { position: relative; display: inline-flex; align-items: center; gap: inherit; transition: color .45s; will-change: transform; }
.btn-primary .btn-fill, .chat-icon .btn-fill { background: var(--ink); }
.btn-ghost .btn-fill, .circle-btn .btn-fill, .socials a .btn-fill { background: var(--accent); }
.motion .btn-ghost:hover, .motion .circle-btn:hover { background: #fff; }
.motion .btn-ghost:hover .btn-text, .motion .circle-btn:hover .btn-text { color: #fff; }
.motion .btn-primary:hover { background: var(--accent); }
.motion .socials a:hover { background: transparent; border-color: var(--accent); }
.motion .btn:active { transform: none; }
.motion .circle-btn:disabled .btn-fill { display: none; }