/* View Transitions CSS */
/* Shared axis transition (Material Design inspired) */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slide-from-right {
  from { transform: translateX(30px); }
  to { transform: translateX(0); }
}

@keyframes slide-to-left {
  from { transform: translateX(0); }
  to { transform: translateX(-30px); }
}

@keyframes slide-from-left {
  from { transform: translateX(-30px); }
  to { transform: translateX(0); }
}

@keyframes slide-to-right {
  from { transform: translateX(0); }
  to { transform: translateX(30px); }
}

/* Default cross-fade transition for root */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
}

/* Shared axis transition for forward navigation */
html:active-view-transition-type(forward) {
  &::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
               300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }
  &::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
               300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

/* Shared axis transition for backward navigation */
html:active-view-transition-type(backward) {
  &::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
               300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
  }
  &::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
               300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
  }
}

/* Navigation bar stays in place with cross-fade */
::view-transition-group(nav) {
  animation-duration: 300ms;
}

::view-transition-old(nav),
::view-transition-new(nav) {
  animation: 300ms ease-in-out both;
}

/* Section cards animate with staggered effect */
.section-card {
  view-transition-name: none;
}

/* Hero content transition */
::view-transition-group(hero) {
  animation-duration: 400ms;
}

::view-transition-old(hero),
::view-transition-new(hero) {
  animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile-specific transitions */
@media (max-width: 768px) {
  html:active-view-transition-type(forward) {
    &::view-transition-old(root) {
      animation: 300ms ease-out both fade-out,
                 300ms ease-out both slide-to-left;
    }
    &::view-transition-new(root) {
      animation: 300ms ease-out both fade-in,
                 300ms ease-out both slide-from-right;
    }
  }
  
  html:active-view-transition-type(backward) {
    &::view-transition-old(root) {
      animation: 300ms ease-out both fade-out,
                 300ms ease-out both slide-to-right;
    }
    &::view-transition-new(root) {
      animation: 300ms ease-out both fade-in,
                 300ms ease-out both slide-from-left;
    }
  }
}