/* View Transitions API Styles */

/* Assign view-transition-name to elements for named transitions */
.nav-links {
  view-transition-name: nav;
}

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

/* Root transition - entire page */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out forwards;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-out forwards;
}

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

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

/* Navigation transition - morph nav */
::view-transition-old(nav) {
  animation: nav-slide-out 0.3s ease-out forwards;
}

::view-transition-new(nav) {
  animation: nav-slide-in 0.3s ease-out forwards;
}

@keyframes nav-slide-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-10px); opacity: 0; }
}

@keyframes nav-slide-in {
  from { transform: translateX(10px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Content slide up */
::view-transition-old(main) {
  animation: content-out 0.25s ease-out forwards;
}

::view-transition-new(main) {
  animation: content-in 0.4s ease-out forwards;
}

@keyframes content-out {
  from {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) translateZ(0);
  }
}

@keyframes content-in {
  from {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

/* Loading state */
.page-loading {
  cursor: wait;
}

.page-loading main {
  opacity: 0.7;
}

/* Fallback for browsers without View Transitions */
@supports not (view-transition-name: none) {
  /* Standard fade transition */
  main {
    animation: standard-fade 0.3s ease-out;
  }

  @keyframes standard-fade {
    from { opacity: 0; transform: translateY(10px) translateZ(0); }
    to { opacity: 1; transform: translateY(0) translateZ(0); }
  }
}

/* Mobile optimization - smoother animations on touch devices */
@media (pointer: coarse) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.2s;
  }

  ::view-transition-old(main),
  ::view-transition-new(main) {
    animation-duration: 0.2s;
  }

  ::view-transition-old(nav),
  ::view-transition-new(nav) {
    animation-duration: 0.2s;
  }

  @keyframes content-out {
    from {
      opacity: 1;
      transform: translateY(0) translateZ(0);
    }
    to {
      opacity: 0;
      transform: translateY(-10px) translateZ(0);
    }
  }

  @keyframes content-in {
    from {
      opacity: 0;
      transform: translateY(10px) translateZ(0);
    }
    to {
      opacity: 1;
      transform: translateY(0) translateZ(0);
    }
  }
}

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

/* Root transition - entire page */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out forwards;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-out forwards;
}

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

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

/* Navigation transition - morph the nav */
::view-transition-old(nav) {
  animation: nav-slide-out 0.3s ease-out forwards;
}

::view-transition-new(nav) {
  animation: nav-slide-in 0.3s ease-out forwards;
}

@keyframes nav-slide-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-10px); opacity: 0; }
}

@keyframes nav-slide-in {
  from { transform: translateX(10px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Content slide up */
::view-transition-old(main) {
  animation: content-out 0.25s ease-out forwards;
}

::view-transition-new(main) {
  animation: content-in 0.4s ease-out forwards;
}

@keyframes content-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes content-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading state */
.page-loading {
  cursor: wait;
}

.page-loading main {
  opacity: 0.7;
}

/* Fallback for browsers without View Transitions */
@supports not (view-transition-name: none) {
  /* Standard fade transition */
  main {
    animation: standard-fade 0.3s ease-out;
  }

  @keyframes standard-fade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}