@media (prefers-reduced-motion: no-preference) {
  main, section, .card, button, .btn { animation: portfolio-enter .42s cubic-bezier(.16,1,.3,1) both; }
  button, .btn { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
  button:hover, .btn:hover { transform: translateY(-2px); filter: saturate(1.08); }
  button:active, .btn:active { transform: scale(.97); }
}
@keyframes portfolio-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-intro { position:relative; isolation:isolate; }
.hero-intro::after { content:""; position:absolute; z-index:-1; width:15rem; height:15rem; right:-4rem; top:-3rem; border-radius:50%; background:radial-gradient(circle, rgba(14,162,113,.16), transparent 70%); animation: lens-breathe 7s ease-in-out infinite alternate; }
.feature-item, .card { box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease; }
.feature-item:hover, .card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.progress-bar { transition:width .7s cubic-bezier(.16,1,.3,1); }
@keyframes lens-breathe { from { transform:scale(.85); opacity:.5; } to { transform:scale(1.1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .hero-intro::after { animation:none; } }