/* BEYOND田町・三田店 — トップビューの演出（見た目は変えず、出方だけを足す）
   - アニメーション終了後の状態＝元のデザイン。JS が無くても最終状態で表示される
   - prefers-reduced-motion: reduce では一切動かない */

/* 「会費だけ払う」に引くマーカー（静止時も表示） */
.fvm-mark {
  position: relative;
  z-index: 0;
}
.fvm-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0.42em;
  right: 0.42em;
  bottom: 0.04em;
  height: 0.32em;
  background: var(--color-gold-light, #ffe7d8);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  /* 写真：わずかにズームアウトして落ち着く（画像は最初から描画＝LCP に影響させない） */
  .fvm-photo {
    animation: fvm-settle 1.8s var(--ease-luxe, cubic-bezier(0.32, 0.72, 0, 1)) both;
  }
  /* タグ：1つずつポンと出る */
  .fvm-tags .kw {
    animation: fvm-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(0.2s + var(--i, 0) * 0.12s);
  }
  /* 見出し：下からせり上がる */
  .fvm-rise {
    animation: fvm-rise 0.9s var(--ease-luxe, cubic-bezier(0.32, 0.72, 0, 1)) both;
    animation-delay: var(--d, 0.45s);
  }
  /* マーカーを左から引く */
  .fvm-mark::after {
    animation: fvm-mark 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1.15s both;
  }
  /* リード・統計：順にふわっと */
  .fvm-fade {
    animation: fvm-fade 0.9s var(--ease-luxe, cubic-bezier(0.32, 0.72, 0, 1)) both;
    animation-delay: var(--d, 0.9s);
  }
}

[data-fvm-count] {
  font-variant-numeric: tabular-nums;
}

@keyframes fvm-settle {
  from {
    scale: 1.08;
  }
}
@keyframes fvm-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes fvm-rise {
  from {
    opacity: 0;
    transform: translateY(0.45em);
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(-20% 0 -20% 0);
  }
}
@keyframes fvm-mark {
  from {
    transform: scaleX(0);
  }
}
@keyframes fvm-fade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* 選ばれる理由のタイトル：モバイルは画面幅に合わせて少しだけ伸縮し、360〜414px で1行に収める
   （768px 以上は既存の md:text-xl のまま） */
@media (max-width: 767px) {
  .fvr-title {
    font-size: clamp(22px, 6.7vw, 28px);
  }
}