/* CSS-Only Page Transitions using View Transitions API */

/* Enable view transitions for same-origin cross-document navigations */
@view-transition {
  navigation: auto;
}

/* Browsers without View Transitions ignore these declarations and keep normal navigation. */

.header {
  view-transition-name: site-header;
}

.footer {
  view-transition-name: site-footer;
}

#content {
  view-transition-name: main-content;
}

/* Dynamic hero image transition mapped from inline CSS variable */
.image img {
  view-transition-name: var(--vt-name);
}

/* Prevent black backdrop flash during transition and match user themes */
::view-transition {
  background-color: transparent;
}

/* Disable browser default root slide-up/fade animations */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
}

::view-transition-group(root) {
  background-color: transparent;
}

/* Disable size/position morph animation on the main content container to prevent sliding/stretching */
::view-transition-group(main-content) {
  animation: none !important;
}

/* Lengthen and smooth out all morph transitions (like the hero images) */
::view-transition-group(*) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- KEYFRAMES --- */

/* Core fade animations */
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- TRANSITIONS MAPS --- */

/* Keep both halves of the crossfade synchronized so the page background never shows through. */
::view-transition-old(main-content) {
  animation: fade-out 0.2s ease-in-out both;
}
::view-transition-new(main-content) {
  animation: fade-in 0.2s ease-in-out both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
  }
}