/* css/toppic.css
   CyberMareBar.png の上に Trans*.png をぴったり重ねる
   既存の hero の z-index 構造:
     hero::before (bg) = 0
     toppic-layer      = 0.8
     hero__overlay     = 1
     hero__inner       = 2
*/

.toppic-layer{
  position: absolute;
  inset: 0;
  z-index: 0.8;
  pointer-events: none;
}

.toppic-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 背景と同じ “cover” でピッタリ */
  object-position: center;
  opacity: 0;
  transition: opacity 500ms ease;
}

/* 表示中 */
.toppic-img.is-on{
  opacity: 1;
}

/* ===== 初回描画からチラ見え防止（headで is-day / is-night を付与） ===== */
/* 昼はTransを絶対に出さない */
html.is-day .toppic-img[data-toppic]{ opacity: 0 !important; }
/* 夜はoffice画像（今回 .hero::before で昼画像を出すので、念のための保険） */
html.is-night .toppic-img[data-office]{ opacity: 0 !important; }