/* Enable view transitions for smooth page transitions */
@view-transition {
  navigation: auto;
}

/* Diagonal wipe transition with UA Red */
::view-transition-group(root) {
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  background: #AB0520; /* Arizona Red */
}

/* Old page wipes off diagonally */
::view-transition-old(root) {
  animation: diagonal-wipe-off 1.2s ease-in-out both;
  z-index: 2;
}

/* New page wipes on diagonally */
::view-transition-new(root) {
  animation: diagonal-wipe-on 1.2s ease-in-out both;
  z-index: 1;
}

/* Keyframes for old page - diagonal wipe from top-left to bottom-right */
@keyframes diagonal-wipe-off {
  0% {
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%
    );
  }
  100% {
    clip-path: polygon(
      100% 0%,
      150% 0%,
      150% 50%,
      100% 100%
    );
  }
}

/* Keyframes for new page - diagonal reveal from top-left to bottom-right */
@keyframes diagonal-wipe-on {
  0% {
    clip-path: polygon(
      -50% 0%,
      0% 0%,
      0% 100%,
      -50% 50%
    );
  }
  100% {
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%
    );
  }
}

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