/* ============================================================
   BKPS Banner Slider (React) — สไลด์แบนเนอร์หน้าแรก
   ธีมสีชมพู-แสด (sunset) โทนตื่นเต้น ดึงดูดสายตา
   ============================================================ */

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.bkps-banner {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 3 / 2;
  margin: 16px auto 0;
  border-radius: 20px;
  overflow: hidden;
  background: #1c0712;
  outline: none;
  isolation: isolate;
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, .3), 0 10px 26px -16px rgba(255, 47, 126, .22);
  opacity: 0;
  transform: translateY(24px) scale(.98);
  animation: bkpsBannerIn .9s cubic-bezier(.22, 1, .36, 1) .05s forwards;
}

@keyframes bkpsBannerIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* กรอบไล่สีบางๆ รอบขอบ หมุนช้าๆ นุ่มนวล — สีเน้นชมพู-แสดแบบพรีเมียม ไม่จัดจ้านเกินไป */
.bkps-banner::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: 21px;
  background: conic-gradient(from var(--angle, 0deg), #ff2f7e, #ff7a30, #ffce54, #ff5f6d, #ff2f7e);
  opacity: .65;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 3;
  animation: bkpsSpinBorder 18s linear infinite;
  pointer-events: none;
}
@keyframes bkpsSpinBorder {
  to { --angle: 360deg; }
}

/* เงาไล่สีด้านล่าง ช่วยให้ badge/ปุ่ม/แถบด้านล่างอ่านง่ายบนภาพสว่าง */
.bkps-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 3, 12, .6) 0%, rgba(20, 3, 12, 0) 30%, rgba(20, 3, 12, 0) 72%, rgba(20, 3, 12, .28) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ---------- สไลด์ + Ken Burns zoom ---------- */
.bkps-banner__track {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.1s ease, box-shadow .4s ease;
  border-radius: inherit;
  box-sizing: border-box;
}
.bslide--active {
  opacity: 1;
  z-index: 2;
  border: 1.5px solid rgba(255, 47, 158, .4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 47, 158, .12);
}
.bslide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bslide--active img {
  animation: bkpsKenBurns 6.4s ease-out forwards;
  transform-origin: center;
}
@keyframes bkpsKenBurns {
  0%   { transform: scale(1.14) translate3d(1.4%, -1%, 0); }
  100% { transform: scale(1.02) translate3d(0, 0, 0); }
}

/* ---------- ป้ายมุมซ้ายบน ---------- */
.bkps-banner__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(20, 3, 12, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset;
}

/* ---------- ปุ่มเลื่อนซ้าย-ขวา ---------- */
.bkps-banner__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  transition: background .3s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.bkps-banner__nav svg { width: 20px; height: 20px; }
.bkps-banner__nav:hover {
  background: linear-gradient(135deg, #ff2f7e, #ff7a30);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 10px 24px -8px rgba(255, 47, 126, .45);
}
.bkps-banner__nav:active { transform: translateY(-50%) scale(.94); }
.bkps-banner__nav--prev { left: 18px; }
.bkps-banner__nav--next { right: 18px; }

/* ---------- ประกายไฟตอนกดปุ่ม ---------- */
.spark-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.spark-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #ffce54);
  transform: translate(-50%, -50%);
  animation: bkpsSparkFly .6s ease-out forwards;
}
@keyframes bkpsSparkFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); }
}

/* ---------- แถบล่าง: progress bar + ตัวนับ ---------- */
.bkps-banner__footer {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bkps-banner__progress {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .25);
  overflow: hidden;
}
.bkps-banner__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff2f7e, #ff7a30);
  animation: bkpsProgressFill 6s linear forwards;
}
@keyframes bkpsProgressFill {
  from { width: 0%; }
  to   { width: 100%; }
}
.bkps-banner.is-paused .bkps-banner__progress-fill {
  animation-play-state: paused;
}
.bkps-banner__counter {
  flex: none;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  background: rgba(20, 3, 12, .4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .bkps-banner { border-radius: 18px; margin-top: 8px; }
  .bkps-banner__nav { width: 40px; height: 40px; }
  .bkps-banner__nav svg { width: 16px; height: 16px; }
  .bkps-banner__nav--prev { left: 10px; }
  .bkps-banner__nav--next { right: 10px; }
  .bkps-banner__badge { font-size: 11px; padding: 6px 12px; top: 10px; left: 10px; }
  .bkps-banner__footer { left: 12px; right: 12px; bottom: 10px; }
  .bkps-banner__counter { font-size: 11px; padding: 3px 8px; }
}

/* ---------- เคารพผู้ใช้ที่ปิดแอนิเมชัน ---------- */
.bkps-banner--reduced { animation: none; opacity: 1; transform: none; }
.bkps-banner--reduced::before { animation: none; }
.bkps-banner--reduced .bslide { transition: opacity .4s ease; }
.bkps-banner--reduced .bslide--active img { animation: none; }
.bkps-banner--reduced .bkps-banner__badge { animation: none; }
.bkps-banner--reduced .bkps-banner__progress-fill { animation: none; width: 100%; }