/*
 * 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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LOADER ANIMATIONS
 * Premium, modern loader animations for Blueprint Gamma
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Circle spinner - smooth rotation with gradient arc */
@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Dots - smooth scale and fade pulse */
@keyframes loader-dot {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Bars - wave effect with height scaling */
@keyframes loader-bar {
  0%, 100% {
    transform: scaleY(0.4);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Pulse - expanding rings that fade out */
@keyframes loader-pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Spinner (iOS-style) - blade fade animation */
@keyframes loader-spinner-fade {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

/* Utility classes for loader animations */
.animate-loader-spin {
  animation: loader-spin 1s linear infinite;
}

.animate-loader-dot {
  animation: loader-dot 1.4s ease-in-out infinite;
}

.animate-loader-bar {
  animation: loader-bar 1.2s ease-in-out infinite;
}

.animate-loader-pulse-ring {
  animation: loader-pulse-ring 1.5s ease-out infinite;
}

.animate-loader-spinner-fade {
  animation: loader-spinner-fade 1.2s linear infinite;
}