@charset "utf-8";

/* --- ポスター拡大用の設定 --- */

/* 拡大時の背景（オーバーレイ） */
.poster-overlay {
  display: none; /* 通常時は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* 背景を暗く */
  z-index: 10000; /* 最前面 */
  cursor: zoom-out;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  touch-action: none;
}

/* 拡大表示される画像 */
.poster-overlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  /* マウス位置の初期値（中央） */
  --x: 0;
  --y: 0;

  /* 
     scale(2) で2倍に拡大。
     translate(calc(var(--x) * -100%), calc(var(--y) * -100%)) 
     これにより、マウスを右に50px動かすと、画像は左に100px相当スライドするような
     ダイナミックな動きになります。
  */
  transform: scale(2) translate(calc(var(--x) * -100%), calc(var(--y) * -100%));
  
  /* 追従の滑らかさ。0.1s～0.15sくらいが心地よいです */
  transition: transform 0.2s ease-out; 
  pointer-events: none; /* 画像がマウスイベントを邪魔しないように */
}

/* 拡大機能が有効な画像のマウスカーソル */
.poster {
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.poster:hover {
  transform: scale(1.02); /* 少しだけ浮かせてクリックできることを示す */
}