/* Tiny Tomato Games — MAGNETIC micro-interactions
   - buttons & pill controls pull subtly toward the cursor + tactile press
   - a soft highlight tracks the cursor across primary buttons
   - links draw an underline on hover
   All gated to fine-pointer + motion-safe via JS (these styles are inert
   until the JS adds the hooks / inline transforms). */

/* drawn underline for nav + text links */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.6, 0, 0.15, 1);
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.contact-mail a { border-bottom: 0; position: relative; }
.contact-mail a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: color-mix(in oklab, var(--accent) 70%, var(--muted));
  transform: scaleX(0.18); transform-origin: left center; opacity: 0.6;
  transition: transform 0.3s cubic-bezier(0.6, 0, 0.15, 1), opacity 0.3s;
}
.contact-mail a:hover::after { transform: scaleX(1); opacity: 1; }

@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .magnetic { will-change: transform; transition: transform 0.2s cubic-bezier(0.33, 0.8, 0.3, 1); }
  .btn.magnetic { position: relative; overflow: hidden; }
  /* cursor-tracking highlight on primary buttons */
  .btn.magnetic .btn-shine {
    position: absolute; left: var(--mx, 50%); top: var(--my, 50%);
    width: 150px; height: 150px; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 62%);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    mix-blend-mode: soft-light;
  }
  .btn.magnetic.ghost .btn-shine { background: radial-gradient(circle, color-mix(in oklab, var(--accent) 45%, transparent), transparent 62%); }
  .btn.magnetic:hover .btn-shine { opacity: 1; }
}
