/* ------------------------------
   フッター
------------------------------ */

.ss-footer {
  position: relative;

  min-height: 86svh;

  overflow: hidden;

  margin: 0;
  padding: 0;

  background: #86d1d4;
  color: #fff;

  /*
    このフッターが画面に入った位置を
    アニメーションの基準にする
  */
  view-timeline-name: --ss-footer;
  view-timeline-axis: block;
}


/* ------------------------------
   フッター上部テキスト
------------------------------ */

.ss-footer__copy {
  position: relative;
  z-index: 2;

  max-width: 760px;

  padding: 8vw;
}


.ss-footer__copy small {
  font-size: 12px;

  letter-spacing: 0.16em;

  opacity: 0.65;
}


.ss-footer__copy h2 {
  margin: 20px 0 0;

  font-size: clamp(
    48px,
    7vw,
    100px
  );

  line-height: 0.95;

  font-weight: 500;

  letter-spacing: -0.055em;
}


/* ------------------------------
   商品画像
------------------------------ */

.ss-footer-product {
  position: absolute;

  z-index: 1;

  /*
    横方向センター
  */
  left: 50%;

  /*
    最後はフッター下端にぴったり着地
  */
  bottom: 0;

  width: min(
    48vw,
    560px
  );

  margin: 0;

  pointer-events: none;

  /*
    常にセンター基準
  */
  transform: translateX(-50%);

  /*
    拡大縮小の基準を画像下部にする
  */
  transform-origin: 50% 100%;
}


/* 商品画像そのもの */

.ss-footer-product img {
  display: block;

  width: 100%;
  height: auto;
}


/* ------------------------------
   スクロールアニメーション
------------------------------ */

@supports (animation-timeline: view()) {

  .ss-footer-product {

    opacity: 0;

    /*
      最初はかなり下に隠しておく
    */
    transform:
      translateX(-50%)
      translateY(72%)
      scale(0.86);

    animation:
      ss-product-rise
      linear
      both;

    /*
      ss-footer のスクロール位置に連動
    */
    animation-timeline:
      --ss-footer;

    /*
      フッターが画面に入り始めてから
      72%ほど進んだところで完成
    */
    animation-range:
      entry 0%
      cover 72%;
  }


  @keyframes ss-product-rise {

    0% {

      opacity: 0;

      transform:
        translateX(-50%)
        translateY(72%)
        scale(0.86);
    }


    18% {

      opacity: 0.18;

    }


    48% {

      opacity: 0.72;

      transform:
        translateX(-50%)
        translateY(26%)
        scale(0.95);
    }


    78% {

      opacity: 1;

      /*
        少し行きすぎることで
        せり上がる勢いを出す
      */
      transform:
        translateX(-50%)
        translateY(2.5%)
        scale(1.015);
    }


    100% {

      opacity: 1;

      /*
        最終位置
        横センター
        フッター下端に着地
      */
      transform:
        translateX(-50%)
        translateY(0)
        scale(1);
    }

  }

}


/* ------------------------------
   フッター最下部
------------------------------ */

.ss-footer__bottom {
  position: absolute;

  z-index: 3;

  left: 8vw;
  right: 8vw;

  bottom: 28px;

  display: flex;

  justify-content:
    space-between;

  gap: 20px;

  padding-top: 18px;

  font-size: 12px;

  letter-spacing: 0.08em;
}


/* ------------------------------
   スマホ
------------------------------ */

@media (max-width: 700px) {

  .ss-footer {

    min-height: 82svh;

  }


  .ss-footer__copy {

    padding:
      12vw
      7vw;

  }


  .ss-footer-product {

    /*
      スマホではかなり大きくする
    */
    width: 88vw;

  }


  .ss-footer__bottom {

    left: 7vw;
    right: 7vw;

    bottom: 18px;

  }

}


/* ------------------------------
   動きを減らす設定
------------------------------ */

@media (
  prefers-reduced-motion:
  reduce
) {

  .ss-footer-product {

    animation: none !important;

    opacity: 1 !important;

    transform:
      translateX(-50%) !important;
  }

}