/* ===========================================================================
   動きの追加（2026-09-18）。参考＝ shpa.co.jp の手触り。
   ・読み込み直後：見出しが行ごとに下から立ち上がる
   ・背景の写真がゆっくり動き続ける／マウスに合わせてわずかに寄る
   ・スクロールの合図が上下に跳ねる
   ・並んだ要素は1つずつ間を置いて出る
   ・ボタンと製品の行は、指を乗せると矢印が滑る
   すべて「動きを減らす」設定の端末では止まる。
   本体の style.css は触らず、このファイルだけで足している。
   =========================================================================== */

/* ---------- 1. 見出しの立ち上がり（行ごと） ---------- */
.mo-line {
  display: block;
  overflow: hidden;
}

.mo-line > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.mo-ready .mo-line > span { transform: none; opacity: 1; }
.mo-line:nth-child(2) > span { transition-delay: 0.13s; }
.mo-line:nth-child(3) > span { transition-delay: 0.26s; }

/* ---------- 2. 背景：3DCGの映像（16秒で一周・継ぎ目なし） ---------- */
.hero-cine .hero-bg .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-cine .hero-bg .hero-fallback { display: none; }

/* 映像が使えない・動きを減らす設定のときは写真に戻す */
@media (prefers-reduced-motion: reduce) {
  .hero-cine .hero-bg .hero-video { display: none; }
  .hero-cine .hero-bg .hero-fallback { display: block; }
}

.hero-cine { --mo-mx: 0; --mo-my: 0; }

.hero-bg {
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.mo-pointer .hero-bg {
  transform: translate3d(calc(var(--mo-mx) * -14px), calc(var(--mo-my) * -10px), 0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mo-pointer .hero-content {
  transform: translate3d(calc(var(--mo-mx) * 5px), calc(var(--mo-my) * 4px), 0);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 3. スクロールの合図 ---------- */
.mo-scroll {
  position: absolute;
  right: clamp(16px, 3.4vw, 54px);
  bottom: clamp(18px, 4vh, 46px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display-en, serif);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.9s ease 1.1s;
}

.mo-ready .mo-scroll { opacity: 0.72; }

.mo-scroll .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple-deep);
  animation: mo-bounce 1.5s ease-in-out infinite alternate;
}

@keyframes mo-bounce {
  from { transform: translateY(-5px); opacity: 0.35; }
  to   { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 700px) {
  .mo-scroll { display: none; }
}

/* ---------- 4. 並んだ要素を1つずつ ---------- */
.mo-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.mo-stagger.is-visible > * { opacity: 1; transform: none; }
.mo-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.mo-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.mo-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.mo-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; }
.mo-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; }

/* ---------- 5. 指を乗せたときの矢印 ---------- */
.btn, .product-row, .text-link { position: relative; }

.btn::after,
.product-row .p-arrow {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover::after,
.product-row:hover .p-arrow { transform: translateX(7px); }

.product-row {
  transition: background-color 0.4s ease, padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-row:hover {
  background-color: rgba(122, 110, 150, 0.06);
  padding-left: 14px;
}

/* ---------- 6. 見出しの金の罫が伸びる ---------- */
.th-line, .sec-rule {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.is-visible .th-line,
.is-visible.th-line,
.is-visible .sec-rule { transform: scaleX(1); }

/* ---------- 動きを減らす設定の端末では全部止める ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo-line > span,
  .mo-stagger > *,
  .mo-scroll { opacity: 1; transform: none; transition: none; }
  .hero-bg img { animation: none; }
  .mo-pointer .hero-bg,
  .mo-pointer .hero-content { transform: none; }
  .mo-scroll .dot { animation: none; }
  .th-line, .sec-rule { transform: none; transition: none; }
}