/* htmx View Transitions */
@keyframes fade-in {
  from { opacity: 0; }
}

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

@keyframes slide-from-right {
  from { transform: translateX(90px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-90px); }
}

::view-transition-old(page-transition) {
  animation: 400ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
             1000ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(page-transition) {
  animation: 800ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
             1000ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

#page-container,
#project-content {
  view-transition-name: page-transition;
}

/* Fallback für Browser ohne View Transitions API */
#page-container.htmx-swapping,
#project-content.htmx-swapping {
  opacity: 0;
  transition: opacity 500ms ease-out;
}

#page-container.htmx-added,
#project-content.htmx-added {
  opacity: 0;
}

#page-container,
#project-content {
  opacity: 1;
  transition: opacity 500ms ease-out;
}

/* Prevent browser scroll anchoring during swaps */
#page-container.htmx-swapping,
#project-content.htmx-swapping {
  overflow-anchor: none;
}

/* Filter transition for project list */
.project-item {
  opacity: 1;
  transition: opacity 260ms ease;
}

.project-item.is-filter-hidden {
  opacity: 0;
}
html {
  scrollbar-gutter: stable;
}