/*
 * Hover Effects — thai-massage (hydrogen-station からハードコピー / CLAUDE.md ルール7)
 * Spec: DESIGN.md §7
 *
 * 3 種のユーティリティクラス:
 *   - hover-zoom: 画像コンテナで img を拡大 (overflow:hidden 親で動作)
 *   - hover-lift: カードを浮かせて影を出す
 *   - hover-underline: テキストリンクの下線を左→右に伸ばす
 *
 * 適用例:
 *   - hover-zoom: gallery-item / course-card__media / blog-card__thumb
 *   - hover-underline: contact-form__phone / footer-phone / nav 各リンク
 *   - hover-lift: course-card / voice-card / therapist-card shell
 *
 * a11y:
 *   - :focus-visible でも同じ視覚効果 (キーボードナビゲーション対応)
 *   - prefers-reduced-motion: transition を即時化
 */

/* ─── hover-zoom (画像) ─── */
.hover-zoom {
  overflow: hidden;
  display: block;
}

.hover-zoom img,
.hover-zoom .placeholder-image {
  transition: transform var(--duration-slow) var(--easing-standard);
  display: block;
  width: 100%;
  height: 100%;
}

.hover-zoom:hover img,
.hover-zoom:focus-visible img,
.hover-zoom:hover .placeholder-image,
.hover-zoom:focus-visible .placeholder-image {
  transform: scale(1.05);
}

/* ─── hover-lift (カード) ─── */
.hover-lift {
  transition:
    transform var(--duration-normal) var(--easing-standard),
    box-shadow var(--duration-normal) var(--easing-standard);
}

.hover-lift:hover,
.hover-lift:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px var(--color-shadow-soft);
}

/* ─── hover-underline (リンク) ─── */
.hover-underline {
  position: relative;
  display: inline-block;
}

.hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--easing-standard);
}

.hover-underline:hover::after,
.hover-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* prefers-reduced-motion: アニメーション無効化 */
@media (prefers-reduced-motion: reduce) {
  .hover-zoom img,
  .hover-zoom .placeholder-image,
  .hover-lift,
  .hover-underline::after {
    transition: none;
  }
  .hover-zoom:hover img,
  .hover-zoom:hover .placeholder-image {
    transform: none;
  }
  .hover-lift:hover {
    transform: none;
    box-shadow: 0 2px 8px var(--color-shadow-subtle);
  }
}