:root{
  --rc-bg:#ffffff;
  --rc-card:#0b0f1a;
  --rc-text:#222;
  --rc-accent:#00a3ff;
  --rc-shadow:0 10px 30px rgba(3,8,20,.35);
  --rc-radius:18px;
}

/* Top progress */
.rc-progress{
  position:relative;
  max-width:min(96vw, 1100px);
  margin:16px auto 10px;
  height:5px;
  background:#101727;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 24px rgba(3,8,20,.2);
}
.rc-progress .bar{
  display:block;
  width:100%;
  height:100%;
  transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg, #3ac8ff, #7a5fff);
}

/* Slider */
.rc-swiper.swiper{
  width:min(96vw, 860px);
  height: 420px;
  margin:14px auto 32px;
  border-radius:var(--rc-radius);
  box-shadow:var(--rc-shadow);
  background:var(--rc-card);
  overflow:clip;
  perspective:1000px;
  transform:perspective(1200px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  transition:transform .14s ease;
  position: relative;
  isolation: isolate;
}

/* Swipe glow sweep */
.rc-swiper .swipe-glow{
  pointer-events:none;
  position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,.18) 25%, rgba(255,255,255,0.0) 55%);
  transform: translateX(-120%);
  opacity:.0;
}
.rc-swiper .swipe-glow.run{
  animation: glow 850ms ease-out forwards;
}
@keyframes glow{
  0%{ transform: translateX(-120%); opacity: .0; }
  25%{ opacity: .22; }
  60%{ opacity: .15; }
  100%{ transform: translateX(120%); opacity:.0; }
}

/* Parallax layers */
.swiper-slide{ position:relative; background:#000; }
.layer-bg{
  position:absolute; inset:0; overflow:hidden; z-index:1;
}
.layer-bg img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12);
  will-change:transform;
  transition: transform .12s linear;
}

/* Soft bottom gradient for readability */
.layer-gradient{
  position:absolute; inset:auto 0 0 0; height:50%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.9) 100%);
  z-index:2;
}

/* Caption */
.slide-caption{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding: clamp(28px, 2vw, 22px) clamp(14px, 2.5vw, 24px);
  color:#fff; font-family:"Kanit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.45;
  background: linear-gradient(180deg, rgba(6,10,18,.0), rgba(6,10,18,.32));
}
.slide-caption .title{
  font-weight:800; font-size:clamp(18px,2.1vw,26px); letter-spacing:.2px;
  text-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.slide-caption .meta{ opacity:.92; margin-top:.35em; font-size:clamp(13px,1.4vw,16px); }

/* Ken Burns directions */
.swiper-slide.kenburns.dir-a.kenburns-on .layer-bg img{ animation: kenA 9s ease-in-out both; }
.swiper-slide.kenburns.dir-b.kenburns-on .layer-bg img{ animation: kenB 9s ease-in-out both; }
@keyframes kenA{
  0%{ transform: scale(1.08) translate3d(0px, 0px, 0); }
  45%{ transform: scale(1.14) translate3d(6px, 4px, 0); }
  100%{ transform: scale(1.20) translate3d(14px, 10px, 0); }
}
@keyframes kenB{
  0%{ transform: scale(1.08) translate3d(0px, 0px, 0); }
  45%{ transform: scale(1.14) translate3d(-6px, 4px, 0); }
  100%{ transform: scale(1.20) translate3d(-14px, 10px, 0); }
}

/* Pagination bullets (pill active) */
.swiper-pagination{ bottom: clamp(10px, 1.6vw, 14px) !important; }
.swiper-pagination-bullet{
  width:10px; height:10px; background:#cfd5e133; opacity:1;
  margin:0 5px !important; border-radius:999px;
  transition:transform .25s ease, background-color .25s ease, width .25s ease;
  border:1px solid rgba(255,255,255,.3);
}
.swiper-pagination-bullet-active{
  background:var(--rc-accent); width:22px; transform:translateY(-1px);
  border-color: transparent;
  box-shadow: 0 0 0 6px rgba(0,163,255,.14);
}

/* Nav arrows */
.swiper-button-next, .swiper-button-prev{
  width:44px; height:44px; border-radius:999px; color:#fff;
  background:rgba(0,0,0,.45); backdrop-filter:saturate(120%) blur(2px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  transition:transform .2s ease, background-color .2s ease, opacity .2s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover{
  transform:scale(1.06); background:rgba(0,0,0,.6);
}
.swiper-button-next:after, .swiper-button-prev:after{ font-size:18px; font-weight:700; }

/* Mobile: hide arrows */
@media (max-width:640px){
  .swiper-button-next, .swiper-button-prev{ display:none; }
  .rc-swiper.swiper{ height: 300px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}