/* =============================================
   Scroll Progress Bar
   แถบแสดง progress การเลื่อนหน้าเว็บ
   ใช้สีม่วงตามแบบ FMS
   ============================================= */

.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #89287f 0%, #5271ff 50%, #89287f 100%);
  background-size: 200% 100%;
  z-index: 9999;
  transition: width 0.15s ease-out;
  animation: gradient-shift 3s ease infinite;
  box-shadow: 0 2px 8px rgba(137, 40, 127, 0.4);
}

/* Animation สำหรับไล่สีแบบ gradient */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* เพิ่ม glow effect ที่ปลายแถบ */
.scroll-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
  animation: shimmer 2s infinite;
  pointer-events: none;
}

/* Animation สำหรับ shimmer effect */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ===== Variations ===== */

/* แบบไม่มี animation (ถ้าต้องการประหยัด performance) */
.scroll-progress-bar.simple {
  background: linear-gradient(90deg, #89287f 0%, #5271ff 100%);
  animation: none;
}

.scroll-progress-bar.simple::after {
  display: none;
}

/* แบบ solid color */
.scroll-progress-bar.solid {
  background: #89287f;
  animation: none;
}

.scroll-progress-bar.solid::after {
  display: none;
}

/* แบบเส้นบางกว่า */
.scroll-progress-bar.thin {
  height: 2px;
}

/* แบบเส้นหนากว่า */
.scroll-progress-bar.thick {
  height: 6px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .scroll-progress-bar {
    height: 3px;
  }
  
  .scroll-progress-bar::after {
    width: 50px;
  }
}

@media (max-width: 576px) {
  .scroll-progress-bar {
    height: 2px;
  }
  
  .scroll-progress-bar::after {
    display: none; /* ปิด shimmer ในมือถือเพื่อประหยัด performance */
  }
}

/* ===== Header Adjustment ===== */
/* ถ้า header เป็น sticky ให้เว้นพื้นที่สำหรับ progress bar */
.header.sticky-top {
  top: 4px;
}

/* ===== Print Style ===== */
@media print {
  .scroll-progress-bar {
    display: none !important;
  }
}