/* LPHP：最初の画面に浮かぶサムネ */
.hfloat {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease 0.5s;
}
.is-ready .hfloat { opacity: 1; }
/* スマホ・動きを減らす設定：最初の画面の中に置く（画面と一緒に流れる） */
.hfloat--flow { position: absolute; }

.hfloat__item {
  position: absolute;
  left: 0; top: 0;
  aspect-ratio: 3 / 2;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.hfloat__drift {
  display: block;
  width: 100%; height: 100%;
  animation: hfloat-drift var(--t, 20s) ease-in-out infinite alternate;
}
.hfloat__drift img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  outline: 1px solid var(--c-line);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.3);
  background: var(--c-bg-2);
}
/* 画面の写真を見せる作品：枠で、写真の右と下の余白を切る（場面の写真と同じ切り方） */
.hfloat__drift--shot { overflow: hidden; border-radius: 6px; outline: 1px solid var(--c-line); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.3); background: #fff; }
.hfloat__drift--shot img { width: 113.6%; max-width: none; height: auto; border-radius: 0; outline: 0; box-shadow: none; }
/* 最初の画面が見えていない間は止める */
.is-off .hfloat__drift { animation-play-state: paused; }
/* ゆっくり漂う（--k は 1 → 0。場面に収まるときに、漂う幅を 0 にする） */
@keyframes hfloat-drift {
  from { transform: translate3d(0, 0, 0) rotate(calc(var(--r, 0deg) * var(--k, 1))); }
  to { transform: translate3d(calc(var(--dx, 1vw) * var(--k, 1)), calc(var(--dy, 1vh) * var(--k, 1)), 0) rotate(calc(var(--r, 0deg) * var(--k, 1) * -1)); }
}

/* タッチの端末：影を小さくする（軽くするため） */
@media (pointer: coarse) {
  .hfloat__drift img, .hfloat__drift--shot { box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.3); }
  .hfloat__drift--shot img { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hfloat { transition: none; }
  .hfloat__drift { animation: none; }
}