/**********************************************************************/
/* FadeHero.css
/**********************************************************************/

[data-fh-wrapper] {

  isolation: isolate;
  height: 100vh;
  overflow: hidden;

  --fh-fade: 3000ms;
  --fh-duration: 6000ms;
  --fh-attract-ratio: 1.2;

}

/* reveal: フェードイン用レイヤー */
.fh-layer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  z-index: -2;
  opacity: 0;
}

.fh-layer.fh-active {
  z-index: -1;
  opacity: 1;
  transition: opacity var(--fh-fade, 1000ms) ease;
}

/* 退場: フェードアウトなし。次のレイヤーが重なるまで表示を維持 */
.fh-layer.fh-behind {
  z-index: -2;
  opacity: 1;
}

/* attract: 画像アニメーション用インナー */
.fh-attract {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ================================================
   Attract アニメーション ― ここを自由に編集
   ================================================ */

@keyframes fh-slide-left {
  from { transform: translateX(3%)  scale(1.06); }
  to   { transform: translateX(-3%) scale(1.06); }
}
@keyframes fh-slide-right {
  from { transform: translateX(-3%) scale(1.06); }
  to   { transform: translateX(3%)  scale(1.06); }
}
@keyframes fh-slide-top {
  from { transform: translateY(3%)  scale(1.06); }
  to   { transform: translateY(-3%) scale(1.06); }
}
@keyframes fh-slide-bottom {
  from { transform: translateY(-3%) scale(1.06); }
  to   { transform: translateY(3%)  scale(1.06); }
}
@keyframes fh-zoom-in {
  from { transform: scale(1);    }
  to   { transform: scale(1.08); }
}
@keyframes fh-zoom-out {
  from { transform: scale(1.08); }
  to   { transform: scale(1);    }
}

.fh-attract.fh-slide-left {
  animation-name: fh-slide-left;
  animation-duration: calc(var(--fh-duration, 5000ms) * var(--fh-attract-ratio, 1.2));
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.fh-attract.fh-slide-right {
  animation-name: fh-slide-right;
  animation-duration: calc(var(--fh-duration, 5000ms) * var(--fh-attract-ratio, 1.2));
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.fh-attract.fh-slide-top {
  animation-name: fh-slide-top;
  animation-duration: calc(var(--fh-duration, 5000ms) * var(--fh-attract-ratio, 1.2));
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.fh-attract.fh-slide-bottom {
  animation-name: fh-slide-bottom;
  animation-duration: calc(var(--fh-duration, 5000ms) * var(--fh-attract-ratio, 1.2));
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.fh-attract.fh-zoom-in {
  animation-name: fh-zoom-in;
  animation-duration: calc(var(--fh-duration, 5000ms) * var(--fh-attract-ratio, 1.2));
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.fh-attract.fh-zoom-out {
  animation-name: fh-zoom-out;
  animation-duration: calc(var(--fh-duration, 5000ms) * var(--fh-attract-ratio, 1.2));
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}