/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Concept page
   スクロールに合わせた小さな動き。見た目は Tailwind のクラスで書き、ここには動きだけを置く。
   スクロール連動のアニメーション (animation-timeline) に対応しないブラウザでは動かず、そのまま見える。
   動きを減らす設定の人には動かさない。動かすのは transform と opacity だけ (並びはずれない)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 読んだところまで転がるいちご。動かせるときだけ出す */
.cp-ride {
  display: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ─── 写真: 少し傾いたまま下から入ってきて、まっすぐに落ち着く ───
       画面の下から入りはじめて 8 割ほど見えたところで落ち着く。傾きは写真のある側に合わせる */
    .cp-pop {
      animation: cp-pop linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .cp-pop-left {
      --cp-tilt: -4deg;
    }
    .cp-pop-right {
      --cp-tilt: 4deg;
    }
    @keyframes cp-pop {
      from {
        opacity: 0;
        transform: translateY(48px) rotate(var(--cp-tilt, -3deg)) scale(0.94);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    /* 動きはスクロールの位置で決まるので、開いた時点で画面の下の端にかかる写真は、透けて傾いた途中の姿で止まって見える。
       PC (lg) では見出しを左右に並べるので、想いの原点の写真が最初の画面の下の端に入る (1280×900・1440×900 で半分ほど)。
       そこでは動かさない */
    @media (min-width: 1024px) {
      .cp-pop-not-first-view-on-pc {
        animation: none;
      }
    }

    /* ─── 当日の流れ: 点から次の点への線が、読み進めると上から伸びる ─── */
    .cp-flow-step::before {
      transform-origin: top;
      animation: cp-grow linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 50%;
    }
    @keyframes cp-grow {
      from {
        transform: scaleY(0);
      }
      to {
        transform: scaleY(1);
      }
    }

    /* 点は、その段が画面の下から 4 割ほどまで来たところで「ぽん」と弾む */
    .cp-dot {
      animation: cp-dot linear both;
      animation-timeline: view();
      animation-range: entry 100% cover 40%;
    }
    @keyframes cp-dot {
      0% {
        transform: scale(0);
      }
      70% {
        transform: scale(1.35);
      }
      100% {
        transform: scale(1);
      }
    }

    /* ─── 読んだところまで: ヘッダー (高さ 48px) のすぐ下を、いちごが転がりながら進む ───
       転がる幅は左右に 4px をあけた帯の幅 (100cqw)。100vw にすると常に出るスクロールバー (Windows など) の幅まで入り、
       いちばん下でいちごがスクロールバーの下に隠れる */
    .cp-ride {
      display: block;
      position: fixed;
      top: 52px;
      left: 4px;
      right: 4px;
      z-index: 999; /* ヘッダー (1000) とスマホのメニュー (2000) の下 */
      height: 18px;
      pointer-events: none;
      container-type: inline-size;
    }
    .cp-ride > svg {
      display: block;
      animation: cp-ride linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes cp-ride {
      from {
        transform: translateX(0) rotate(0turn);
      }
      to {
        transform: translateX(calc(100cqw - 18px)) rotate(3turn);
      }
    }
  }
}