/* =========================================================
   TOP SLIDESHOW
========================================================= */

.topslide {
  --crossfade-time: 1.5s;

  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}


/* =========================================================
   Scene
========================================================= */

.ts-scene {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity var(--crossfade-time) ease,
    visibility 0s linear var(--crossfade-time);
}


/* 表示対象 */
.ts-scene.is-active {
  visibility: visible;

  transition:
    opacity var(--crossfade-time) ease,
    visibility 0s linear 0s;
}


/* 完全表示 */
.ts-scene.is-visible {
  opacity: 1;
}


/* =========================================================
   共通レイヤー
========================================================= */

.ts-bg,
.ts-acc,
.ts-car,
.ts-contents {
  position: absolute;
}


/* ---------------------------------------------------------
   [1] Background
--------------------------------------------------------- */

.ts-bg {
  z-index: 1;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;

  /* 初期状態 */
  filter:
    blur(10px)
    brightness(1);
}


/* ---------------------------------------------------------
   [2] Accessory
--------------------------------------------------------- */

.ts-acc {
  z-index: 2;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;

  opacity: 0;
}


/* ---------------------------------------------------------
   [3] Car
--------------------------------------------------------- */

.ts-car {
  z-index: 3;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  opacity: 0;
}


/* ---------------------------------------------------------
   [4] Contents
--------------------------------------------------------- */

.ts-contents {
  z-index: 10;

  left: 8%;
  top: 50%;

  transform: translateY(-50%);

  opacity: 0;
  visibility: hidden;

  color: #fff;
}


.ts-contents h2,
.ts-contents p {
  margin: 0;
  opacity: 0;
}


.ts-contents h2 {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 400;
  font-family: var(--font-en);
  line-height: 1.2;
}


.ts-contents p {
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 400;
  font-family: var(--font-en);
  line-height: 1.2;
}


/* =========================================================
   ANIMATION

   0.00 ～ 1.00s
   ts-bg：ぼかし状態

   1.00 ～ 1.50s
   ts-bg：ぼかし解除 + brightness

   1.60s
   ts-car開始

   1.75s
   ts-acc / ts-contents / h2開始

   2.00s
   p開始

   2.25s
   ts-acc / h2完了

   2.50s
   p完了・全アニメーション完了

   ↓

   3秒停止

   ↓

   次のスライドへクロスフェード
========================================================= */


/* ---------------------------------------------------------
   展開1：背景
   0.00 ～ 1.50秒
--------------------------------------------------------- */

.ts-scene.is-active .ts-bg {
  animation:
    tsBgReveal 1.5s linear forwards;
}


@keyframes tsBgReveal {

  /* 0 ～ 1秒：ぼかし状態 */
  0%,
  66.667% {
    filter:
      blur(10px)
      brightness(1);
  }


  /* 変化途中 */
  83.333% {
    filter:
      blur(5px)
      brightness(1.5);
  }


  /* 1.5秒：通常状態 */
  100% {
    filter:
      blur(0)
      brightness(1);
  }

}


/* ---------------------------------------------------------
   展開2：車
   1.60秒から0.15秒
--------------------------------------------------------- */

.ts-scene.is-active .ts-car {
  animation:
    tsCarFade 0.15s ease 1.6s forwards;
}


@keyframes tsCarFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* ---------------------------------------------------------
   展開3：アクセサリ
   1.75 ～ 2.25秒
--------------------------------------------------------- */

.ts-scene.is-active .ts-acc {
  animation:
    tsAccFade 0.5s ease 1.75s forwards;
}


@keyframes tsAccFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* ---------------------------------------------------------
   展開4：文字コンテンツ
   1.75秒から
--------------------------------------------------------- */

.ts-scene.is-active .ts-contents {
  animation:
    tsContentsShow 0.01s linear 1.75s forwards;
}


@keyframes tsContentsShow {

  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }

}


/* ---------------------------------------------------------
   h2
   1.75 ～ 2.25秒
--------------------------------------------------------- */

.ts-scene.is-active .ts-contents h2 {
  animation:
    tsTextFade 0.5s ease 1.75s forwards;
}


/* ---------------------------------------------------------
   p
   2.00 ～ 2.50秒
--------------------------------------------------------- */

.ts-scene.is-active .ts-contents p {
  animation:
    tsTextFade 0.5s ease 2s forwards;
}


@keyframes tsTextFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* =========================================================
   PC
   1025px以上
========================================================= */

@media screen and (min-width: 1025px) {

  .topslide {
    aspect-ratio: 16 / 9;
  }

  .ts-contents {
    left: 8%;
    width: 45%;
  }

}


/* =========================================================
   TABLET
   769px ～ 1024px
========================================================= */

@media screen and (min-width: 769px) and (max-width: 1024px) {

  .topslide {
    aspect-ratio: 16 / 9;
  }

  .ts-contents {
    left: 6%;
    width: 60%;
  }

}


/* =========================================================
   MOBILE
   768px以下
========================================================= */

@media screen and (max-width: 768px) {

  .topslide {
    aspect-ratio: 3 / 4;
  }

  .ts-contents {
    left: 7%;
    top: 20%;

    width: 100%;

    transform: none;
  }

  .ts-contents h2 {
    font-size: 16px;
  }

  .ts-contents p {
    margin-top: 12px;
    font-size: 28px;
  }

}