/**
 * BUMPd View Transitions Styles
 * Custom transitions using the View Transitions API
 */

@layer utilities {

/* Default transition: fade */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-duration-md);
  animation-timing-function: var(--motion-ease-standard);
}

::view-transition-old(root) {
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

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

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

/* Forward transition: slide from right */
:root[data-transition-type="forward"]::view-transition-old(root) {
  animation-name: slide-out-left;
}

:root[data-transition-type="forward"]::view-transition-new(root) {
  animation-name: slide-in-right;
}

@keyframes slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-20%);
    opacity: 0;
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(20%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Backward transition: slide from left */
:root[data-transition-type="backward"]::view-transition-old(root) {
  animation-name: slide-out-right;
}

:root[data-transition-type="backward"]::view-transition-new(root) {
  animation-name: slide-in-left;
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(20%);
    opacity: 0;
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-20%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Zoom transition for modals/overlays */
:root[data-transition-type="zoom"]::view-transition-old(root) {
  animation-name: zoom-out;
}

:root[data-transition-type="zoom"]::view-transition-new(root) {
  animation-name: zoom-in;
}

@keyframes zoom-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

@keyframes zoom-in {
  from {
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Smooth transition for navigation elements */
::view-transition-group(nav),
::view-transition-group(header),
::view-transition-group(footer) {
  animation-duration: var(--motion-duration-sm);
}

/* Prevent flash during transition */
::view-transition-image-pair(root) {
  isolation: auto;
}

/* Optimize for performance */
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-fill-mode: both;
}

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

} /* End @layer utilities */