/* =========================================================
   YourFit  トップページ アニメーション
   - style.css の「後」に読み込んでください
   - JS が動いていて、かつ「視差効果を減らす」設定でない場合のみ
     初期状態（隠す）が適用されます（html.js-anim）
   ========================================================= */

:root {
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);   /* ゆっくり着地する */
  --ease-in-out-soft: cubic-bezier(.65, 0, .35, 1);
}

/* ---------------------------------------------------------
   1. 曲線ラインの一筆書き（--len は animation.js が自動計算）
   --------------------------------------------------------- */
html.js-anim:not(.is-ready) main .mv .svg-line {
  stroke-dasharray: var(--len, 1500px);
  stroke-dashoffset: var(--len, 1500px);
}

html.js-anim.is-ready main .mv .svg-line {
  animation: mv-line-draw 2.8s var(--ease-in-out-soft) 0s both;
}

@keyframes mv-line-draw {
  from { stroke-dasharray: var(--len, 1500px); stroke-dashoffset: var(--len, 1500px); stroke: #DCD3C6; }
  to   { stroke-dasharray: var(--len, 1500px); stroke-dashoffset: 0;                   stroke: #EBE6E0; }
}

/* ---------------------------------------------------------
   2. アーチ写真・左下の写真：下からふわっと
   --------------------------------------------------------- */
html.js-anim main .mv-img--right {
  opacity: 0;
  transform: translateY(40px);
}
html.js-anim.is-ready main .mv-img--right {
  animation: mv-fade-up 1.5s var(--ease-out-soft) .2s both;
}

/* 左下の写真：ふわっと浮かぶ */
html.js-anim main .mv-img--left {
  opacity: 0;
  transform: translateY(40px);
}
html.js-anim.is-ready main .mv-img--left {
  animation: mv-fade-up 1.5s var(--ease-out-soft) .7s both;
}

/* ---------------------------------------------------------
   3. テキスト：ぼかしから鮮明に／ロゴ・飾り文字は左から書くように
   --------------------------------------------------------- */
html.js-anim main .mv__lead {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
}
html.js-anim.is-ready main .mv__lead {
  animation: mv-text-in 1.5s var(--ease-out-soft) .8s both;
}

html.js-anim main .mv h1 img {
  clip-path: inset(0 100% 0 0);
}
html.js-anim.is-ready main .mv h1 img {
  animation: mv-wipe 1.7s var(--ease-in-out-soft) .95s both;
}

html.js-anim main .mv-img--decoration {
  clip-path: inset(0 100% 0 0);
}
html.js-anim.is-ready main .mv-img--decoration {
  animation: mv-wipe 2.2s var(--ease-in-out-soft) 1.5s both;
}

/* 下部の情報（アクセス・営業時間・予約）：順番にふわっと */
html.js-anim main .mv__footer__list li {
  opacity: 0;
  transform: translateY(14px);
}
html.js-anim.is-ready main .mv__footer__list li {
  animation: mv-fade-up-sm 1s var(--ease-out-soft) both;
}
html.js-anim.is-ready main .mv__footer__list li:nth-child(1) { animation-delay: 1.9s; }
html.js-anim.is-ready main .mv__footer__list li:nth-child(2) { animation-delay: 2.05s; }
html.js-anim.is-ready main .mv__footer__list li:nth-child(3) { animation-delay: 2.2s; }

/* キャンペーンバッジ：最後にそっと登場（回転などの動きは付けません） */
html.js-anim main .mv-img--notice {
  opacity: 0;
  scale: .92;
}
html.js-anim.is-ready main .mv-img--notice {
  animation: mv-pop 1.3s var(--ease-out-soft) 2.3s both;
}

@keyframes mv-fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mv-fade-up-sm {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mv-text-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(14px); }
  to   { opacity: 1; filter: none;      transform: none; }
}
@keyframes mv-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes mv-pop {
  from { opacity: 0; scale: .92; }
  to   { opacity: 1; scale: 1; }
}

/* ---------------------------------------------------------
   4. スクロール連動パララックス（--mv-p: 0〜1 を JS が更新）
      translate プロパティを使うので、上の登場アニメと干渉しません
   --------------------------------------------------------- */
html.js-anim main .mv-img--right      { translate: 0 calc(var(--mv-p, 0) * 56px); }
html.js-anim main .mv-img--left       { translate: 0 calc(var(--mv-p, 0) * -64px); }
html.js-anim main .mv-img--decoration { translate: 0 calc(var(--mv-p, 0) * -28px); }
html.js-anim main .mv-img--notice     { translate: 0 calc(var(--mv-p, 0) * -40px); }

@media screen and (max-width: 767px) {
  html.js-anim main .mv-img--right      { translate: 0 calc(var(--mv-p, 0) * 24px); }
  html.js-anim main .mv-img--decoration { translate: 0 calc(var(--mv-p, 0) * -12px); }
  html.js-anim main .mv-img--notice     { translate: 0 calc(var(--mv-p, 0) * -16px); }
}

/* ---------------------------------------------------------
   5. スクロールで各セクションが静かに現れる（.reveal は JS が付与）
      終わったら JS がクラスを外すので、元のホバー等に影響しません
   --------------------------------------------------------- */
html.js-anim .reveal {
  opacity: 0;
  translate: 0 32px;
  filter: blur(6px);
  transition:
    opacity 1.2s var(--ease-out-soft),
    translate 1.4s var(--ease-out-soft),
    filter 1.2s var(--ease-out-soft);
  transition-delay: var(--rv-delay, 0s);
}
html.js-anim .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  filter: none;
}

/* ---------------------------------------------------------
   6. ホバー：ボタンは元の色の変化のまま、ゆっくり変わる
   --------------------------------------------------------- */
.button,
.freetrial {
  transition:
    background-color .9s ease,
    color .9s ease,
    border-color .9s ease;
}

/* ヘッダーのナビ：下線がすっと伸びる */
.header__nav ul li a {
  position: relative;
}
.header__nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-out-soft);
}
.header__nav ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* VIEW MORE：線がのびる */
.textLink::before {
  transition: width .7s var(--ease-out-soft);
}
a.textLink:hover::before {
  width: 104px;
}

/* 指導例カード：矢印がそっと動く */
.casestudy .case__wrap .btn img {
  transition: transform .6s var(--ease-out-soft);
}
.casestudy .case__wrap:hover .btn img {
  transform: translateX(6px);
}

/* ---------------------------------------------------------
   7. TRIAL セクション
      （hidden 状態は JS が付ける .trial-armed / .line-armed のときだけ適用）
   --------------------------------------------------------- */
/* 背景の曲線：見えてきたら一筆書きで描く（既存のスクロール描画より後勝ち） */
html.js-anim main .trial .svg-line.line-armed {
  stroke-dasharray: var(--len, 1500px);
  stroke-dashoffset: var(--len, 1500px);
}
html.js-anim main .trial .svg-line.line-armed.active:not(.is-drawn) {
  animation: none;
}
html.js-anim main .trial .svg-line.line-armed.is-drawn {
  animation: line-draw 2.6s var(--ease-in-out-soft) .2s both;
}
@keyframes line-draw {
  from { stroke-dasharray: var(--len, 1500px); stroke-dashoffset: var(--len, 1500px); }
  to   { stroke-dasharray: var(--len, 1500px); stroke-dashoffset: 0; }
}

/* "Trial lesson" の飾り文字：左から書くように */
html.js-anim main .trial.trial-armed:not(.is-in) .trial__text p span {
  clip-path: inset(0 100% 0 0);
}
html.js-anim main .trial.trial-armed.is-in .trial__text p span {
  animation: mv-wipe 1.8s var(--ease-in-out-soft) .9s both;
}