/* 英字3行目「GO CRAZY!!」を動かない立体の文字にする（2026-10-07 本人決定。見本 4e と同じ作り）。
   金属の版と実績の版だけに効く（現状の版は本番と同じ線の文字のまま）。
   正面は白の塗り、側面は右下へ赤の影を 12 段（1 段 0.0075em、合計 0.09em。手前 #C10000 → 奥 #8E0000）。
   WebGL は使わない。文字の大きさに比例するので PC とスマホで同じ形。JS 無しでも出る */
.fv-variant-metal .home-fv__catch span:nth-child(3) em,
.fv-variant-works .home-fv__catch span:nth-child(3) em {
  --d: .0075em;
  -webkit-text-stroke: 0;
  color: #fff;
  text-shadow:
    calc(var(--d) * 1) calc(var(--d) * 1) 0 #C10000,
    calc(var(--d) * 2) calc(var(--d) * 2) 0 #BC0000,
    calc(var(--d) * 3) calc(var(--d) * 3) 0 #B80000,
    calc(var(--d) * 4) calc(var(--d) * 4) 0 #B30000,
    calc(var(--d) * 5) calc(var(--d) * 5) 0 #AF0000,
    calc(var(--d) * 6) calc(var(--d) * 6) 0 #AA0000,
    calc(var(--d) * 7) calc(var(--d) * 7) 0 #A60000,
    calc(var(--d) * 8) calc(var(--d) * 8) 0 #A10000,
    calc(var(--d) * 9) calc(var(--d) * 9) 0 #9C0000,
    calc(var(--d) * 10) calc(var(--d) * 10) 0 #970000,
    calc(var(--d) * 11) calc(var(--d) * 11) 0 #930000,
    calc(var(--d) * 12) calc(var(--d) * 12) 0 #8E0000;
}

/* ===== 動く版（2026-10-07。body に fv-catch-move が付くときだけ。切り替えは inc/fv-variant.php の ?catch=still|move）=====
   マウスの位置に合わせて、赤い側面の向きと長さが変わり、文字全体がわずかに傾く。動かすのは assets/js/fv-catch-move.js
   JS が書き換えるのは、3行目の span に置いた CSS 変数4つだけ：
     --sx・--sy：側面のずれ（em）。12段の各段はこの 1/12 の倍数。長さは常に 0.09em で向きだけ変わる（2026-10-07 本人指示。奥行きの下限＝上限）。既定は右下 45 度
     --rx・--ry：傾き（deg）。上下は最大 3 度、左右は最大 4 度
   傾きは span:nth-child(3) に、本番の下から出る動き（translateY）は em のまま。em の transform は上書きしない
   JS が動かないとき（マウスが無い端末・動きを減らす設定・768px 未満・JS 無し）は既定の値のままで、静止の版と同じ見た目になる */
.fv-catch-move .home-fv__catch span:nth-child(3) {
  --sx: .09em;
  --sy: .09em;
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
}
.fv-catch-move.fv-variant-metal .home-fv__catch span:nth-child(3) em,
.fv-catch-move.fv-variant-works .home-fv__catch span:nth-child(3) em {
  text-shadow:
    calc(var(--sx) / 12 * 1) calc(var(--sy) / 12 * 1) 0 #C10000,
    calc(var(--sx) / 12 * 2) calc(var(--sy) / 12 * 2) 0 #BC0000,
    calc(var(--sx) / 12 * 3) calc(var(--sy) / 12 * 3) 0 #B80000,
    calc(var(--sx) / 12 * 4) calc(var(--sy) / 12 * 4) 0 #B30000,
    calc(var(--sx) / 12 * 5) calc(var(--sy) / 12 * 5) 0 #AF0000,
    calc(var(--sx) / 12 * 6) calc(var(--sy) / 12 * 6) 0 #AA0000,
    calc(var(--sx) / 12 * 7) calc(var(--sy) / 12 * 7) 0 #A60000,
    calc(var(--sx) / 12 * 8) calc(var(--sy) / 12 * 8) 0 #A10000,
    calc(var(--sx) / 12 * 9) calc(var(--sy) / 12 * 9) 0 #9C0000,
    calc(var(--sx) / 12 * 10) calc(var(--sy) / 12 * 10) 0 #970000,
    calc(var(--sx) / 12 * 11) calc(var(--sy) / 12 * 11) 0 #930000,
    calc(var(--sx) / 12 * 12) calc(var(--sy) / 12 * 12) 0 #8E0000;
}
/* 768px 未満は静止（JS も動かさないが、画面幅を途中で狭めたときのために値も既定へ戻す） */
@media screen and (max-width: 767px) {
  .fv-catch-move .home-fv__catch span:nth-child(3) {
    --sx: .09em !important;
    --sy: .09em !important;
    transform: none;
  }
}