/* =====================================================
   motion.css — 訪問者を楽しませるアニメーション(js/motion.js とセット)
   ・JSが動いたときだけ html.tf-motion が付き、演出が有効になる
     (JSが止まっても文字や画像が消えたままにならない)
   ・既存アニメーションと重ならないよう transform ではなく
     translate / scale の個別プロパティを使う
   ・「視差効果を減らす」設定の端末では全て無効
   ===================================================== */

/* ---------- 上部のスクロール進捗バー ---------- */
.tf-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #C5A059, #E8C875 60%, #C5A059);
  box-shadow: 0 0 10px rgba(232, 200, 117, .7);
  z-index: 10000;
  pointer-events: none;
}

/* ---------- 見出し:下からせり上がる ---------- */
html.tf-motion .tf-rv-head {
  clip-path: inset(0 0 100% 0);
  translate: 0 28px;
  transition: clip-path 1s cubic-bezier(.2, .8, .2, 1), translate 1s cubic-bezier(.2, .8, .2, 1);
}
html.tf-motion .tf-rv-head.tf-in {
  clip-path: inset(-10% -10% -20% -10%);
  translate: 0 0;
}

/* ---------- 画像:カーテンが開くように現れ、少し寄る ---------- */
html.tf-motion .tf-rv-img {
  clip-path: inset(0 100% 0 0);
  scale: 1.12;
  transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1), scale 1.8s cubic-bezier(.2, .8, .2, 1);
}
html.tf-motion .tf-rv-img.tf-in {
  clip-path: inset(0 0 0 0);
  scale: 1;
}

/* ---------- カード:順番にふわっと浮かび上がる ---------- */
html.tf-motion .tf-rv-card {
  opacity: 0;
  translate: 0 48px;
  transition: opacity .8s ease, translate .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--tf-delay, 0s);
}
html.tf-motion .tf-rv-card.tf-in {
  opacity: 1;
  translate: 0 0;
}

/* ---------- PC:カードにマウスを乗せると浮く ---------- */
@media (hover: hover) and (pointer: fine) {
  html.tf-motion .tf-hover {
    transition: translate .35s cubic-bezier(.2, .8, .2, 1), scale .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, opacity .8s ease;
  }
  html.tf-motion .tf-hover:hover {
    translate: 0 -8px;
    scale: 1.015;
    box-shadow: 0 22px 48px rgba(26, 42, 58, .16), 0 0 0 1px rgba(197, 160, 89, .35);
  }
  /* ボタンがカーソルに少し吸い寄せられる */
  html.tf-motion .tf-magnet {
    transition: translate .25s cubic-bezier(.2, .8, .2, 1);
  }
}

/* ---------- 見出しのマーカー線が左から引かれる ---------- */
html.tf-motion .tf-rv-head .sm-hl,
html.tf-motion .tf-rv-head mark {
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1.1s cubic-bezier(.2, .8, .2, 1) .5s;
}
html.tf-motion .tf-rv-head.tf-in .sm-hl,
html.tf-motion .tf-rv-head.tf-in mark {
  background-size: 100% 100%;
}

/* ---------- ボタンに光が走る ---------- */
.tf-shine {
  position: relative;
  overflow: hidden;
}
.tf-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: tfShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tfShine {
  0%, 60% { left: -60%; }
  100% { left: 140%; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tf-progress,
  .tf-shine::after { display: none; }
  html.tf-motion .tf-rv-head,
  html.tf-motion .tf-rv-img,
  html.tf-motion .tf-rv-card {
    clip-path: none;
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }
}