/*
 * Blueprint Gamma - CSS Styles
 *
 * Contains CSS rules that cannot be expressed with Tailwind utilities.
 * Includes styles for navigation view transitions and other Blueprint components.
 *
 * Usage in your application layout:
 *   <%= stylesheet_link_tag "blueprint", "data-turbo-track": "reload" %>
 */

/* Disable default root transition - only transition specific elements */
html {
  view-transition-name: none;
}

/* Apply view-transition-name to the active navigation item's ::after */
.nav-active-item::after {
  view-transition-name: nav-border;
}

/* Control timing for the group (this handles the slide) */
::view-transition-group(nav-border) {
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
}

/* Control timing for old/new snapshots (crossfade) */
::view-transition-old(nav-border) {
  animation: 200ms ease-in-out both fade-out;
}

::view-transition-new(nav-border) {
  animation: 200ms ease-in-out both fade-in;
}

/* Keyframes for fade animations */
@keyframes fade-in {
  from { opacity: 0; }
}

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