/* ==========================================================================
   logo.css — インラインSVGロゴ（.c-logo）
   静的表示は assets/img/logo.svg の <img>。アニメ対象（ローダー／ヘッダー／
   GNAV／フッター）だけインライン化し、logo-motion.js が .c-logo__mark / __layer を動かす。
   ========================================================================== */

.c-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* モーションではみ出した path が親のヒット領域を広げない */
  pointer-events: none;
}

.c-logo__mark,
.c-logo__layer {
  transform-box: fill-box;
  transform-origin: center;
}

/* Safari は SVG の overflow: visible を無視して viewBox 外を切ることがある。
   ホバー対象だけ描画領域を広げ、元の 240×46 の見た目と配置は固定する。
   ローダーの SVG にはこの属性が付かないため、寸法・縦横比へ影響しない。 */
.c-site-header__logo,
.c-site-footer__logo {
  position: relative;
}

.c-site-header__logo {
  height: 46px;
}

.c-site-footer__logo {
  aspect-ratio: 240 / 46;
}

.c-site-header__logo .c-logo[data-logo-motion-canvas],
.c-site-footer__logo .c-logo[data-logo-motion-canvas] {
  position: absolute;
  top: -108.6956522%;
  left: -4.1666667%;
  width: 108.3333333%;
  height: 317.3913043%;
  max-width: none;
}

/* JS／GSAP／SVGが揃ってモーションを初期化できた場合だけ共通リンク減光を止める。
   reduced-motion時やJS不成立時は base.css の通常ホバーへ自動的に戻る。 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a[data-logo-motion-ready]:hover {
    opacity: 1;
  }
}

/* --- SP ------------------------------------------------------------------
   ヘッダーロゴをFigma SP（422:2675）の157×30へ。幅は site-header.css が持つ
   （PC側と同じ分担）ので、ここは高さの持ち方だけをフッターと同じ比率指定へ
   切り替える。比率のまま縮むので、モーション用キャンバスの
   パーセント指定もそのまま追従する。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .c-site-header__logo {
    height: auto;
    aspect-ratio: 240 / 46;
  }
}