/* ============================================================
   FILUXE Hero Slider — SNKRDUNK 風格
   比例 --hero-ratio（預設 16:9）、桌機 3 張並排、置中吸附、黑色箭頭、無圓點
   ============================================================ */
.hero-slider{position:relative;width:100%;overflow:hidden;background:#fff}
.hero-track{display:flex;will-change:transform;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-slide{flex:0 0 100%;display:block;-webkit-user-drag:none}
.hero-img{width:100%;aspect-ratio:var(--hero-ratio,16/9);object-fit:cover;object-position:center;display:block;background:#ececec;opacity:0;transition:opacity .5s ease}
.hero-img.loaded{opacity:1}
.hero-img-mob{display:none}
@media(max-width:767px){.hero-img-desk{display:none}.hero-img-mob{display:block;aspect-ratio:var(--hero-ratio,16/9)}}

.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:30px;height:30px;background:transparent;border:0;color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 10px;padding:0}
.hero-arrow:hover{color:#090f207f}
.hero-arrow svg{width:30px;height:30px}
.hero-prev{left:0}
.hero-next{right:0}

/* 底部自動進度條（過場動畫） */
.hero-progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:rgba(0,0,0,.10);z-index:6}
.hero-progress-bar{display:block;height:100%;width:0;background:#000;transform-origin:left center}
@keyframes herofill{from{width:0}to{width:100%}}

.hero-loading{position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.35)}
.hero-slider.is-loading .hero-loading{display:flex}
.hero-loading-spinner{width:30px;height:30px;border:3px solid #e5e5e5;border-top-color:#111;border-radius:50%;animation:herospin .8s linear infinite}
@keyframes herospin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-track{transition:none}}