/* =========================================================
   Peter Rabbit LP animation
   ========================================================= */

/* 横から入る要素がページ全体の横スクロールを発生させないようにする */
.c-section-01 {
  overflow: hidden;
}

/* バスはセクション下端をまたいで表示するため、縦方向を切らない */
.c-section-02 {
  overflow: visible;
  z-index: 2;
}

.c-section-02 .anim-bus {
  z-index: 10;
}

/* 初期状態：JavaScriptが動作する場合のみ非表示にする */
.js-animation-ready .anim-peter {
  /* IntersectionObserverが本来の配置位置を判定できるよう、待機中は移動させない */
  opacity: 0;
  transform: none;
  will-change: transform, opacity;
}

.js-animation-ready .anim-leaf01,
.js-animation-ready .anim-leaf02,
.js-animation-ready .anim-leaf03,
.js-animation-ready .anim-text01,
.js-animation-ready .anim-text02 {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.96);
  will-change: transform, opacity;
}

/* ピーター：画面外の左から、少し弾むようにひょこっと登場 */
.anim-peter.is-animated {
  animation: peterPeek 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes peterPeek {
  0% {
    opacity: 0;
    transform: translate3d(-110%, 0, 0) rotate(-2deg);
  }
  68% {
    opacity: 1;
    transform: translate3d(7%, 0, 0) rotate(1deg);
  }
  84% {
    transform: translate3d(-3%, 0, 0) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

/* 植物：柔らかく浮かび上がる */
.anim-leaf01.is-animated,
.anim-leaf02.is-animated,
.anim-leaf03.is-animated {
  animation: leafAppear 1.25s ease-out forwards;
}

/* 2枚の葉にわずかな時間差を付ける */
.anim-leaf02.is-animated {
  animation-delay: 0.16s;
}

@keyframes leafAppear {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.92) rotate(-2deg);
  }
  65% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1.015) rotate(0.5deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
}

/* テキスト：植物の後から時間差で表示 */
.anim-text01.is-animated,
.anim-text02.is-animated {
  animation: textAppear 1.1s ease-out 0.72s forwards;
}

@keyframes textAppear {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* バス：c-section-02が見えたら、画面外からコトコト進み続ける */
.js-animation-ready .anim-bus {
  /* バスが画面右端に見えている状態から走行を開始する */
  --bus-start-position: 0px;
  opacity: 0;
  will-change: right, transform, opacity;
}

.anim-bus.is-animated {
  /*
   * 横移動と上下の揺れを最初から同時に開始。
   * 左へ消えたら待機せず、すぐ右外から再スタートする。
   */
  opacity: 1;
  animation-name: busTravel, busRattle;
  animation-duration: 28s, 0.48s;
  animation-timing-function: linear, steps(2, end);
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: both, both;
}

/* 画面右端から左の画面外まで、一定速度でゆっくり移動 */
@keyframes busTravel {
  0% {
    right: var(--bus-start-position);
    opacity: 1;
  }
  100% {
    right: 105vw;
    opacity: 1;
  }
}

/* 小刻みに上下し、わずかに傾くことで「コトコト感」を出す */
@keyframes busRattle {
  0% {
    transform: translate3d(0, 1px, 0) rotate(0.25deg);
  }
  25% {
    transform: translate3d(0, -3px, 0) rotate(-0.4deg);
  }
  50% {
    transform: translate3d(0, 2px, 0) rotate(0.35deg);
  }
  75% {
    transform: translate3d(0, -2px, 0) rotate(-0.25deg);
  }
  100% {
    transform: translate3d(0, 1px, 0) rotate(0.25deg);
  }
}

/* 動きを減らす設定を利用しているユーザーには静止表示 */
@media (prefers-reduced-motion: reduce) {
  .js-animation-ready .anim-peter,
  .js-animation-ready .anim-bus,
  .js-animation-ready .anim-leaf01,
  .js-animation-ready .anim-leaf02,
  .js-animation-ready .anim-leaf03,
  .js-animation-ready .anim-text01,
  .js-animation-ready .anim-text02 {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}