/* View Transitions API — Page transition animations */

/* Default crossfade */
::view-transition-old(root) {
  animation: vt-fade-out 0.25s ease-in forwards;
}
::view-transition-new(root) {
  animation: vt-fade-in 0.3s ease-out 0.05s both;
}

@keyframes vt-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.98); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* Named transition targets — hero morphs between pages */
.hero-avatar img,
.nav-logo {
  view-transition-name: site-logo;
}

::view-transition-old(site-logo) {
  animation: vt-morph-out 0.3s ease-in forwards;
}
::view-transition-new(site-logo) {
  animation: vt-morph-in 0.35s ease-out 0.05s both;
}

@keyframes vt-morph-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.8); }
}
@keyframes vt-morph-in {
  from { opacity: 0; transform: scale(1.2); }
  to   { opacity: 1; transform: scale(1); }
}

/* Navigation bar persists */
.nav {
  view-transition-name: nav-bar;
}
::view-transition-old(nav-bar),
::view-transition-new(nav-bar) {
  animation: none;
  mix-blend-mode: normal;
}

/* Scroll progress persists */
.scroll-progress {
  view-transition-name: scroll-bar;
}
::view-transition-old(scroll-bar),
::view-transition-new(scroll-bar) {
  animation: none;
}

/* Sound toggle persists */
#sound-toggle {
  view-transition-name: sound-btn;
}
::view-transition-old(sound-btn),
::view-transition-new(sound-btn) {
  animation: none;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(site-logo),
  ::view-transition-new(site-logo) {
    animation-duration: 0.01ms !important;
  }
}