/**
 * WP Instant — Frontend Styles
 * File: assets/css/instant.css
 */

/* =========================================================================
   PROGRESS BAR — thin line at top of page (like YouTube / Next.js)
   ========================================================================= */

#wpi-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 999999;
  pointer-events: none;
  display: none;
}

#wpi-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0073aa, #00a0d2, #0073aa);
  background-size: 200% 100%;
  animation: wpi-shimmer 1.5s ease-in-out infinite;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(0, 115, 170, 0.3);
  opacity: 1;
  /* Color is overridden by JS if custom color is set */
}

@keyframes wpi-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================================
   CONTENT ZONE — smooth transitions
   ========================================================================= */

#wp-instant-zone {
  will-change: opacity, transform;
}

/* =========================================================================
   WP ADMIN BAR — style the rebuild button
   ========================================================================= */

#wp-admin-bar-wpi-purge .ab-item {
  cursor: pointer !important;
}

#wp-admin-bar-wpi-purge:hover .ab-item {
  color: #00b9eb !important;
}