/* ============================================================
   トップの見せ場（.shop-hero の中身）＝横に流れるスライダー。
   2026-08-19 本城さん採用。旧「白地＋左に文言＋右に店舗写真」から全面変更。
   ・写真パネルは角なし・隙間なしで地続き。両脇が「次」と「前」。
   ・両脇は白へ溶かさず、白黒にして暗く沈める。真ん中だけ色が戻る。
   ・触るもの（矢印・ボタン・点・小札）は丸い。
   ・写真はゆっくり寄り、文字は順に浮き上がる。指で横に払える。

   このファイルと assets/hero-slider.js は index.html の <head> からだけ読む。
   category.php / product.php / wishlist.php は index の <body> だけを再利用し、
   .shop-hero ブロックごと外すので、これらは読み込まれない。

   下の数値が採用値（2026-08-19）。ここだけ直せば見え方が変わる単一ソース。
   ============================================================ */
.hsl {
  --slide-w: 74vw;        /* 真ん中の写真の幅（両脇に 13vw ずつ覗く） */
  --band-h: 380px;        /* 帯の高さ */
  --side-bright: .85;     /* 両脇の明るさ。小さいほど暗い。2026-09-03 .40→.85（サイト全体が暗く見える、本城さん指摘・案②） */
  --side-sat: 1;          /* 両脇の色。0＝完全な白黒。2026-09-03 0→1（色を戻す） */
  --copy-w: 700px;        /* 文字のかたまりの幅 */
  --h-size: 34px;         /* 見出しの上限の大きさ */
  --dur: 6000ms;          /* 自動送りの間隔 */
  position: relative;
  background: #0b0d11;    /* 帯の地は黒＝写真の下から白が覗かない */
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hsl-viewport { overflow: hidden; touch-action: pan-y; }
.hsl-track {
  display: flex;
  margin-left: calc(50% - var(--slide-w) / 2);
  transition: transform .68s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.hsl.is-dragging .hsl-track { transition: none; }
.hsl.is-dragging { cursor: grabbing; }

.hsl-slide { flex: 0 0 var(--slide-w); position: relative; }
/* JS が動くまでは全部そのままの色＝JS 無効でも1枚目が普通のヒーローとして成立する。 */
.hsl.is-ready .hsl-slide {
  filter: saturate(var(--side-sat)) brightness(var(--side-bright));
  transition: filter .55s ease, opacity .55s ease;
  cursor: pointer;
}
.hsl.is-ready .hsl-slide:hover { filter: saturate(calc(var(--side-sat) + .28)) brightness(calc(var(--side-bright) + .16)); }
.hsl.is-ready .hsl-slide.is-on,
.hsl.is-ready .hsl-slide.is-on:hover { filter: none; cursor: default; }

.hsl-panel { position: relative; height: var(--band-h); overflow: hidden; background: #12151b; }
.hsl-fig { position: absolute; inset: 0; margin: 0; overflow: hidden; }
/* 待機中の写真はわずかに寄った状態が基準。真ん中に来た1枚だけ、そこから
   ゆっくり引いていく。基準＝動きの開始位置なので、切り替わりの瞬間に拡大率が
   飛ばない＝ちらつかない。真ん中から外れた1枚は基準へ戻るのを transition が均す。 */
.hsl-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.hsl-slide.is-on .hsl-img { animation: hslKen 8.4s cubic-bezier(.25, .1, .25, 1) forwards; }
@keyframes hslKen { from { transform: scale(1.06) } to { transform: scale(1) } }

/* 写真を全部暗くするのではなく“文字のある左側だけ”沈める。
   暗がりの幅は写真の幅ではなく「文字のかたまりの幅」に連動＝文字を広げても
   写真がむだに暗くならない。右端は必ず 10% 以上、素の写真を残す。
   2026-09-03 濃さを半分に（.86/.72/.30/.48 → .55/.42/.14/.22）。
   「暗いレイヤーでサイトが暗く見える」本城さん指摘・案②採用。 */
.hsl-fig::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg,
      rgba(7,9,13,.55) 0,
      rgba(7,9,13,.42) min(calc(var(--copy-w) * .50), 40%),
      rgba(7,9,13,.14) min(calc(var(--copy-w) * 1.00), 70%),
      rgba(7,9,13,0)   min(calc(var(--copy-w) * 1.32), 90%)),
    linear-gradient(to top, rgba(7,9,13,.22) 0%, rgba(7,9,13,0) 44%);
}
/* 真ん中と両脇の境目の細い線＝地続きでも「ここまでが主役」が分かる。
   2026-08-20 本城さん採用（C案）：上下がぼやけて真ん中だけ光る作りは
   境目がにじんで見えたため、上から下まで同じ濃さの 1px に変更。 */
.hsl.is-ready .hsl-slide.is-on .hsl-panel::before,
.hsl.is-ready .hsl-slide.is-on .hsl-panel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; z-index: 2;
  background: rgba(255,255,255,.16);
}
.hsl.is-ready .hsl-slide.is-on .hsl-panel::before { left: 0 }
.hsl.is-ready .hsl-slide.is-on .hsl-panel::after { right: 0 }

.hsl-copy {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(24px, 4.2vw, 72px);
  width: min(86%, var(--copy-w));
  color: #fff;
}
/* 小札は丸く。写真の上でも浮かないようガラスを敷く。 */
.hsl-eyebrow {
  align-self: flex-start; margin: 0 0 14px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 10.5px; letter-spacing: .16em; font-weight: 800;
}
/* 新企画の印。小札の頭に黄色の丸札を1つ（2026-10-06 本城さん：台灣足訊が新企画だと伝えたい）。 */
.hsl-new { display: inline-block; margin: -3px 10px -2px -8px; padding: 3px 9px; border-radius: 999px; background: var(--yellow); color: var(--ink); letter-spacing: .08em; font-weight: 700; }
.hsl-h { margin: 0 0 14px; font-size: clamp(22px, 3.4vw, var(--h-size)); line-height: 1.26; letter-spacing: .01em; font-weight: 800; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hsl-h b { color: var(--yellow); font-weight: inherit; }
.hsl-lede { margin: 0; max-width: 100%; font-size: clamp(13.5px, .98vw, 16px); font-weight: 400; line-height: 1.85; letter-spacing: .02em; color: rgba(255,255,255,.9); text-shadow: 0 1px 16px rgba(0,0,0,.35); }
.hsl-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 16px; font-size: 11.5px; font-weight: 400; line-height: 1.7; color: rgba(255,255,255,.8); }
.hsl-meta i { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .6; }
.hsl-act { margin: 22px 0 0 }

/* ボタンは丸々（ピル）。押す手前で少し持ち上がる。 */
.hsl-btn {
  border-radius: 999px; background: #fff; color: var(--ink); border-color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  transition: transform .2s cubic-bezier(.22,.61,.36,1), background .2s ease, box-shadow .2s ease;
}
a.hsl-panel { display: block; color: inherit; text-decoration: none; }
.hsl.is-ready .hsl-slide.is-on a.hsl-panel { cursor: pointer; }
/* 2026-10-05 写真全体がリンクに（本城さん指示）。ボタンは見た目だけ＝写真に乗せたら色が変わる。 */
.hsl-btn:hover, a.hsl-panel:hover .hsl-btn { background: var(--yellow); border-color: var(--yellow); color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.34); }
.hsl-btn:active { transform: translateY(0) }

/* 文字は小札→見出し→本文→補足→ボタンの順に浮き上がる。 */
.hsl.is-ready .hsl-slide.is-on .hsl-copy > * { animation: hslRise .78s cubic-bezier(.22,.61,.36,1) backwards; }
.hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(1) { animation-delay: .06s }
.hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(2) { animation-delay: .14s }
.hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(3) { animation-delay: .22s }
.hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(4) { animation-delay: .30s }
.hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(5) { animation-delay: .38s }
@keyframes hslRise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
/* 自分で送ったとき（矢印・点・払い・両脇を押す）は文字を出直させない＝そのまま置く。
   ひとりでに切り替わるときだけ浮き上がる。2026-08-21 本城さん指摘。 */
.hsl.is-quiet .hsl-slide.is-on .hsl-copy > * { animation: none }

/* 矢印は丸。ガラス調で、乗せると膨らみ山かたちが外へ動く。 */
.hsl-nav {
  position: absolute; top: calc(var(--band-h) / 2); transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,.34);
  display: grid; place-items: center; z-index: 5;
  background: rgba(18,21,27,.34); color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 28px rgba(0,0,0,.28); cursor: pointer;
  transition: transform .24s cubic-bezier(.22,.61,.36,1), background .2s ease, border-color .2s ease;
}
.hsl-nav:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-50%) scale(1.09); }
.hsl-nav svg { width: 20px; height: 20px; transition: transform .24s cubic-bezier(.22,.61,.36,1); }
.hsl-nav--prev { left: calc(50% - var(--slide-w) / 2 - 26px) }
.hsl-nav--next { right: calc(50% - var(--slide-w) / 2 - 26px) }
.hsl-nav--prev:hover svg { transform: translateX(-2px) }
.hsl-nav--next:hover svg { transform: translateX(2px) }

/* 点も丸。伸びる線が残り時間。 */
.hsl-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.hsl-dot {
  position: relative; width: 40px; height: 5px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.34); overflow: hidden; cursor: pointer;
  transition: height .2s ease, width .28s cubic-bezier(.22,.61,.36,1), background .2s ease;
}
.hsl-dot:hover { height: 7px; background: rgba(255,255,255,.5) }
.hsl-dot.is-on { width: 62px }
.hsl-dot::after { content: ""; position: absolute; inset: 0; width: 0; border-radius: 999px; background: #fff; }
.hsl-dot.is-on::after { animation: hslFill var(--dur) linear forwards; }
.hsl.is-paused .hsl-dot.is-on::after { animation-play-state: paused }
.hsl.is-static .hsl-dot.is-on::after { width: 100%; animation: none }
@keyframes hslFill { from { width: 0 } to { width: 100% } }

/* 端まで来て「同じ絵柄の位置へ静かに差し替える」瞬間だけ、色の変化も動きも止める。
   ここを止めないと、同じ写真がもう一度 暗→明 に変わり、文字も出直すので、
   1枚を二重に読み込んだように見える。差し替えが済むまで付いたままにする。 */
/* 差し替えの一瞬だけ、色や大きさの変化を止める（すぐ外す）。 */
.hsl.is-snapping .hsl-track,
.hsl.is-snapping .hsl-slide,
.hsl.is-snapping .hsl-img { transition: none; }
/* 差し替えた1枚は「もう出終わった状態」で置く。次に動くまで出直させない。 */
.hsl.is-snapped .hsl-slide.is-on .hsl-img,
.hsl.is-snapped .hsl-slide.is-on .hsl-copy > * { animation: none; }

/* 動きを減らす設定の人には、寄りも浮き上がりも出さない。 */
@media (prefers-reduced-motion: reduce) {
  .hsl-track { transition: none }
  .hsl-img, .hsl-slide.is-on .hsl-img { animation: none; transition: none; transform: none }
  .hsl.is-ready .hsl-slide.is-on .hsl-copy > * { animation: none }
}


/* 狭い画面（スマホ）は指スライド前提。矢印は消して写真の面積を稼ぐ。
   2026-08-20 本城さん採用：両脇の覗きをやめて1枚を画面いっぱいに。
   覗きが無い＝両脇を暗くする意味も無いので、色も明るさもそのまま。
   真ん中の境目の線も、画面の左右の端に立つだけなので出さない。 */
@media (max-width: 760px) {
  .hsl { --slide-w: 100%; --band-h: 440px; --side-bright: 1; --side-sat: 1; }
  .hsl-nav { display: none }
  .hsl.is-ready .hsl-slide { cursor: default }
  .hsl.is-ready .hsl-slide.is-on .hsl-panel::before,
  .hsl.is-ready .hsl-slide.is-on .hsl-panel::after { display: none }
  .hsl-copy { width: min(92%, 420px); padding: 0 22px; }
  .hsl-lede { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hsl-dots { bottom: 16px }
}

/* 專題報導の入口＝Beyond the Player の2人を左右に並べる（2026-10-05 本城さん採用・案①）。
   見本は hero-article-duo-catalog.html。押した側の記事へ直接飛ぶ。
   人が増えたら .hsl-duo の列を増やすだけ。 */
.hsl-duo { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #0b0d11; }
.hsl-duo-p { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; }
.hsl-slide--duo .hsl-fig::after { background: linear-gradient(to top, rgba(7,9,13,.82), rgba(7,9,13,.35) 45%, rgba(7,9,13,0) 70%); }
.hsl-duo-tag { position: absolute; top: 22px; left: clamp(20px, 2.2vw, 32px); right: 0; z-index: 3; margin: 0; text-align: left; pointer-events: none; }  /* 左寄せ（2026-10-06 本城さん：真ん中揃えにしない）。左端は下の名前（.hsl-duo-tx）に揃える */
.hsl-duo-tag .hsl-eyebrow { display: inline-block; margin: 0; background: rgba(18,21,27,.45); }
.hsl-duo-tx { position: absolute; left: clamp(20px, 2.2vw, 32px); right: 24px; bottom: 56px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
/* 2人とも同じ形：「ATHLETA 簽約選手」の枠 → 名前 → 引用 → 閱讀專訪。最新回は「閱讀最新專訪」の前に小さな檸檬色の NEW だけ（2026-10-07 本城さん）。
   NEW は記事に付ける。名前の横に置くと「新しい簽約選手」と読めてしまうため。
   最新回を左に置く。次の回が出たら新しい人を左へ足し、NEW を移す。 */
.hsl-duo-signed { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 10px 5px 9px; border: 1px solid rgba(255,255,255,.55); border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .14em; }
.hsl-duo-signed .logo { width: 60px; transform: none; color: #fff; }
.hsl-duo-act { display: inline-flex; align-items: center; gap: 8px; }
.hsl-duo-new { padding: 3px 6px; border-radius: 3px; background: var(--yellow); color: var(--ink); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .1em; }
.hsl-duo-nm { margin-bottom: 8px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: .08em; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hsl-duo-qt { margin-bottom: 12px; font-size: 13.5px; font-weight: 400; line-height: 1.7; color: rgba(255,255,255,.9); text-shadow: 0 1px 16px rgba(0,0,0,.35); }
.hsl-duo-go { padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.6); font-size: 13px; font-weight: 700; transition: color .2s ease, border-color .2s ease; }
.hsl-duo-p:hover .hsl-duo-go { color: var(--yellow); border-color: var(--yellow); }
@media (max-width: 760px) {
  .hsl-duo { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .hsl-duo-tag { top: 14px; left: 0; padding-left: 20px; text-align: left; }
  .hsl-duo-tx { left: 20px; bottom: 18px; }
  .hsl-duo-p + .hsl-duo-p .hsl-duo-tx { bottom: 40px; } /* 下の点を避ける */
  .hsl-duo-nm { margin-bottom: 4px; font-size: 24px; }
  .hsl-duo-qt { display: none; }
}