/* Shippalet High-Tech Kinetic Page Transitions */

/* Top glowing cyan progress loader */
#shippalet-loader-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #00d1ff, #38bdf8, #00e5ff);
  box-shadow: 0 0 12px #00d1ff, 0 0 24px #00e5ff;
  z-index: 999999;
  pointer-events: none;
  transition: width 240ms cubic-bezier(0.1, 0.8, 0.2, 1), opacity 200ms ease;
  opacity: 0;
}

#shippalet-loader-bar.loading {
  opacity: 1;
  width: 75%;
}

#shippalet-loader-bar.loaded {
  opacity: 1;
  width: 100%;
}

#shippalet-loader-bar.fade-out {
  opacity: 0;
}

/* Page Entrance & Exit Styles */
body {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(3px);
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1), transform 350ms cubic-bezier(0.16, 1, 0.3, 1), filter 350ms ease;
}

body.is-loaded {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0px) !important;
}

body.is-leaving {
  opacity: 0 !important;
  transform: translateY(-12px) scale(0.995) !important;
  filter: blur(3px) !important;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1), filter 220ms ease !important;
  pointer-events: none;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  body {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  #shippalet-loader-bar {
    display: none !important;
  }
}