::view-transition-old(main-view) { animation: 0.3s cubic-bezier(0.4, 0, 1, 1) both fade-out; }
::view-transition-new(main-view) { animation: 0.5s cubic-bezier(0, 0, 0.2, 1) both slide-up; }
@keyframes fade-out { to { opacity: 0; transform: scale(0.98); filter: blur(4px); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(30px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes kinetic-text {
  0% { opacity: 0; transform: translateY(50px) scale(0.9); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.hero-name { animation: kinetic-text linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }

@keyframes reveal-card {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.scroll-reveal { animation: reveal-card linear both; animation-timeline: view(); animation-range: entry 5% cover 20%; }

@keyframes parallax-banner {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(40%) scale(1.1); }
}
.gh-banner { animation: parallax-banner linear both; animation-timeline: scroll(nearest); }

.gh-profile { position: relative; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s; border-radius: 12px; overflow: hidden; background: rgba(25, 25, 30, 0.4); border: 1px solid var(--border); }
.gh-profile:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 20px rgba(86, 156, 214, 0.15); }