/* Top Hero: 自動クロスフェード + 停止/送りの操作UI。Swiperには依存しない。 */
.top-hero {
  /* 画像が重なって切り替わる時間。切替周期はjs/home-hero.jsで管理する。 */
  --top-hero-fade-duration: 1000ms;
  /* 箱は写真の比率（素材は 16:9）で、画面の高さを上限にする（2026-10-17 ユーザー判断。写真が見切れるのが最悪）。
     - 画面のほうが縦長（狭い窓・縦向きのタブレット）: 箱が写真の高さで止まり、写真は切れない。Hero の下に次の節が見える
       （以前は画面の高さいっぱいに cover で敷き、800×1000 では写真の横が半分以上切れていた）
     - 画面のほうが横長（PC の窓のほとんど）: 画面の高さで止まり、写真の上下が少し切れる（1440×790 で 2.5%）
     790px 以下の縦長の画面では、全スライドの作品にスマホ用の画像があれば 3:4 に替える（下の top-hero--mobile-portrait）。
     overlay 版面では top_header_style.css が !important で高さを auto に戻すので、比率と上限はこの変数で持つ。 */
  --top-hero-ratio: 16 / 9;
  --top-hero-max-height: 100vh;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--top-hero-ratio);
  max-height: var(--top-hero-max-height);
  margin: 0;
  overflow: hidden;
  background: var(--color-bg);
}

@supports (height: 1svh) {
  .top-hero {
    --top-hero-max-height: 100svh;
  }
}

/* 790px 以下の縦長の画面では、全スライドに紐づけた作品にスマホ用の画像（Works 詳細のヒーローの縦4：横3）があれば
   3:4 にする（2026-10-21 ユーザー判断。それまではスライドごとの正方形。inc/top-hero.php・home.php の <picture> の source と同じ条件）。
   1枚でも欠ければ横長のまま（切り替わるたびに高さが変わらないように）。
   791px 以上の縦長（縦向きのタブレット・狭い窓）は横長の写真のまま箱を写真に合わせる。 */
@media (max-width: 790px) and (max-aspect-ratio: 1/1) {
  .top-hero.top-hero--mobile-portrait {
    --top-hero-ratio: 3 / 4;
  }
}

.top-hero-slideshow,
.top-hero-slides,
.top-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.top-hero-slideshow {
  opacity: 0;
  transition: opacity var(--dur-slow) ease-in-out;
  /* 横の指の動きはスワイプ送り（js/home-hero.js）に渡し、縦スクロールとピンチはブラウザに残す。
     pinch-zoom を解さないブラウザでは2行目ごと捨てられるので、1行目を残しておく。 */
  touch-action: pan-y;
  touch-action: pan-y pinch-zoom;
}

.top-hero.is-ready .top-hero-slideshow {
  opacity: 1;
}

.top-hero-slide {
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--top-hero-fade-duration) ease,
    visibility 0s linear var(--top-hero-fade-duration);
}

.top-hero-slide.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

/* スマホ用画像を出し分けるときは a と img の間に <picture> が入る（home.php）。
   img の height: 100% が効くよう、器として同じ寸法を持たせる。 */
.top-hero-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.top-hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.top-hero-project-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* 写真の全面のリンク。外側に引く既定の輪は Hero の縁で切れて見えず、インク色は暗い写真に沈むので、
   内側に UI と同じ色で引く（Works 一覧のタイルと同じく内側へ寄せる）。 */
.top-hero-project-link:focus-visible {
  outline-color: var(--top-hero-ui-ink);
  outline-offset: calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)));
}

.top-hero-preloader {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  transition: opacity var(--dur-slow) ease-in-out;
}

.top-hero-loading-spinner {
  width: 60px;
  height: 60px;
  border: 3px solid rgb(255 255 255 / 30%);
  border-top-color: #646464;
  border-radius: 50%;
  animation: topHeroSpin 1s linear infinite;
}

@keyframes topHeroSpin {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 790px) {
  /* 先に器の比率を確定し、各画像を全面へ敷く。画像固有の縦横比は
     Hero高に影響しないため、連続resize中も白い隙間が生じない。 */
  /* 横向きのスマホなどで写真が画面より高くなっても、上限で切らない（はみ出した分はスクロールで見る）。 */
  .top-hero {
    --top-hero-max-height: none;
    min-height: 0;
  }

  .top-hero-slide::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    pointer-events: none;
  }
}

/* ---- Hero の操作UI --------------------------------------------------------
   全面Heroなので、ホバーで出し入れする方式は成立しない（ページ最上部で100vhを
   占めるため、カーソルが画面内にある限りHeroは常にホバー状態になる）。
   左右へ操作子を浮かべる案も、写真の主題に重なるため見送った。

   下端に細い進行線を敷き、スライド1枚を1区画として表す。
   右下にあったスクロール導線の縦線は、この横線と角で接して枠のように見えるため外した。
   現在の区画が周期をかけて満ちるので、動いていることと止まっていることが
   線そのものから読める。区画を押せばその写真へ直接移れる。
   サイト内で既に使っている「伸びる線」（スクロール導線）と語彙を揃えている。

   色と面の処理は未確定。下の4変数だけを差し替えれば全体が変わるようにしてある。
   配置も暫定で、Top の作り直しで版面が決まったら見直す。 */
.top-hero {
  --top-hero-ui-ink: #ffffff;
  --top-hero-ui-track: rgb(255 255 255 / 30%);
  --top-hero-ui-shadow: 0 1px 3px rgb(0 0 0 / 30%);
  --top-hero-ui-pad: transparent;
}

.top-hero-controls {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.top-hero-controls > * {
  pointer-events: auto;
}

/* 停止は線の起点側に置く。操作は左下、スクロール導線は右下で住み分ける。 */
.top-hero-toggle {
  position: absolute;
  bottom: 18px;
  left: 20px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--top-hero-ui-pad);
  color: var(--top-hero-ui-ink);
  cursor: pointer;
  filter: drop-shadow(var(--top-hero-ui-shadow));
  place-items: center;
}

.top-hero-toggle::before,
.top-hero-toggle::after {
  grid-area: 1 / 1;
  width: 3px;
  height: 12px;
  background: currentColor;
  content: "";
}

.top-hero-toggle::before {
  transform: translateX(-3.5px);
}

.top-hero-toggle::after {
  transform: translateX(3.5px);
}

.top-hero-toggle.is-paused::before {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 11px solid currentColor;
  background: none;
  transform: translateX(2px);
}

.top-hero-toggle.is-paused::after {
  display: none;
}

/* 1つが1枚。現在の1つだけを塗る。全幅の線はデザイン上 野暮ったいという判断で
   2026-09-18 にドットへ替えた。件数が多いと横へ伸びるので、枚数側で調整する前提。

   画面中央に揃える。左右の余白は停止ボタンの幅ぶん左右対称に空けるので、
   中央寄せのまま停止ボタンと重ならない（左右が非対称だと中央がずれる）。 */
.top-hero-progress {
  position: absolute;
  right: 68px;
  bottom: 18px;
  left: 68px;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.top-hero-progress__step {
  display: grid;
  width: 24px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  place-items: center;
}

/* 本文写真のカルーセルと同じ6pxの丸。現在位置は塗りで示す。 */
.top-hero-progress__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--top-hero-ui-track);
  box-shadow: var(--top-hero-ui-shadow);
  transition: background-color var(--dur-fast) var(--ease);
}

.top-hero-progress__step.is-current .top-hero-progress__dot {
  background: var(--top-hero-ui-ink);
}

/* ⚠️ Works 詳細のカルーセル（`.work-one__carousel-progress-item`）と扱いを揃える。
   ホバーは**塗りが現在位置と同じ色になるだけ**で、大きさは変えない。
   片方だけ動かすと、同じ形のドットが場所によって違う反応をすることになる。 */
@media (hover: hover) and (pointer: fine) {
  .top-hero-progress__step:hover .top-hero-progress__dot {
    background: var(--top-hero-ui-ink);
  }
}

.top-hero-toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--top-hero-ui-ink);
  outline-offset: 2px;
}

/* こちらも Works 側に合わせ、輪の内側へ寄せる。 */
.top-hero-progress__step:focus-visible {
  outline: 2px solid var(--top-hero-ui-ink);
  outline-offset: -4px;
}

@media (prefers-contrast: more) {
  .top-hero {
    --top-hero-ui-track: rgb(255 255 255 / 60%);
    --top-hero-ui-shadow: 0 1px 4px rgb(0 0 0 / 70%);
  }
}

@media (forced-colors: active) {
  .top-hero {
    --top-hero-ui-ink: ButtonText;
    --top-hero-ui-track: ButtonFace;
    --top-hero-ui-shadow: none;
  }
}

/* モバイルはHeroが16:9で浅く（390px幅なら219px）、操作UIの占める割合が大きくなる。
   記号と操作帯を詰めて、写真に対する比率を下げる（正方形のときも同じ寸法を使う）。
   区画は1つ19px前後になり押し分けは粗くなるが、隣へ送る用途では成立する。 */
@media screen and (max-width: 790px) {
  .top-hero-toggle {
    bottom: 6px;
    left: 8px;
    width: 28px;
    height: 28px;
  }

  .top-hero-toggle::before,
  .top-hero-toggle::after {
    width: 2px;
    height: 9px;
  }

  .top-hero-toggle::before {
    transform: translateX(-2.5px);
  }

  .top-hero-toggle::after {
    transform: translateX(2.5px);
  }

  .top-hero-toggle.is-paused::before {
    border-top-width: 4.5px;
    border-bottom-width: 4.5px;
    border-left-width: 8px;
    transform: translateX(1.5px);
  }

  /* 枚数が多いとドットの列が 390px 幅に収まらないため、幅を詰める。
     1つ18pxはタップの推奨最小（24px）を下回る。枚数の調整が入るまでの暫定。 */
  .top-hero-progress {
    right: 44px;
    bottom: 6px;
    left: 44px;
    height: 28px;
  }

  .top-hero-progress__step {
    width: 18px;
  }
}