/* ==========================================================================
   アニメーション
   - スクロール表示: 要素に u-anim-* を付けると、画面に入ったときに 1 回だけ動く（assets/js/motion.js）
   - ホバー: ボタン・カード・ナビのリンクに共通で入れる（クラスの追加は不要）
   - 「視差効果を減らす」設定や JS が動かない環境では隠さず、最初から表示する（html.has-anim のときだけ隠す）
   - 文字を薄くするだけのホバー（opacity）はコントラストが下がるため使わない
   ========================================================================== */

:root {
    --motion-fast: 0.2s;
    --motion-base: 0.6s;
    --motion-slow: 1.2s;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --motion-distance: var(--space-4);
    --motion-stagger: 0.1s;
}

/* ---- スクロール表示 ---- */

.has-anim :is(.u-anim-fade-up, .u-anim-slide-left, .u-anim-slide-right, .u-anim-zoom, .u-anim-pop, .u-anim-stagger > *) {
    opacity: 0;
    transition:
        opacity var(--motion-base) var(--motion-ease),
        transform var(--motion-base) var(--motion-ease);
}

.has-anim :is(.u-anim-fade-up, .u-anim-stagger > *) {
    transform: translateY(var(--motion-distance));
}

.has-anim .u-anim-slide-left {
    transform: translateX(calc(var(--motion-distance) * -1.5));
}

.has-anim .u-anim-slide-right {
    transform: translateX(calc(var(--motion-distance) * 1.5));
}

.has-anim .u-anim-zoom {
    transform: scale(1.04);
}

/* キャラクター専用。はねるのは 1 回だけ（揺れ続ける動きは気が散るため入れない） */
.has-anim .u-anim-pop {
    transform: translateY(var(--space-3)) scale(0.9);
    transition-timing-function: var(--motion-ease-pop);
}

.has-anim :is(.u-anim-fade-up, .u-anim-slide-left, .u-anim-slide-right, .u-anim-zoom, .u-anim-pop).is-inview,
.has-anim .u-anim-stagger.is-inview > * {
    opacity: 1;
    transform: none;
}

/* 子要素を順番に出す。8 個目以降は同じタイミング */
.has-anim .u-anim-stagger > * {
    transition-delay: calc(var(--_anim-index, 0) * var(--motion-stagger));
}

.u-anim-stagger > :nth-child(2) { --_anim-index: 1; }
.u-anim-stagger > :nth-child(3) { --_anim-index: 2; }
.u-anim-stagger > :nth-child(4) { --_anim-index: 3; }
.u-anim-stagger > :nth-child(5) { --_anim-index: 4; }
.u-anim-stagger > :nth-child(6) { --_anim-index: 5; }
.u-anim-stagger > :nth-child(7) { --_anim-index: 6; }
.u-anim-stagger > :nth-child(n + 8) { --_anim-index: 7; }

/* 大きい写真だけに使う。文字・ボタンに使うと読めない時間ができる */
.has-anim .u-anim-mask {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--motion-slow) var(--motion-ease);
}

.has-anim .u-anim-mask.is-inview {
    clip-path: inset(0);
}

/* 縦バー付き見出し（c-heading--bar）に付ける。バーが上から伸び、文字が続いて出る */
.has-anim .u-anim-bar .c-heading__title {
    opacity: 0;
    transition: opacity var(--motion-base) var(--motion-ease) var(--motion-stagger);
}

.has-anim .u-anim-bar .c-heading__title::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--motion-base) var(--motion-ease);
}

.has-anim .u-anim-bar.is-inview .c-heading__title {
    opacity: 1;
}

.has-anim .u-anim-bar.is-inview .c-heading__title::before {
    transform: none;
}

/* 数値のカウントアップ。読み上げには最終の数値だけを渡し、動く数字は読ませない（motion.js で中身を組み替える） */
.u-anim-count__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.u-anim-count__num {
    font-variant-numeric: tabular-nums;
}

/* ---- ホバー：ボタン（丸矢印が右へ動き、塗りと白抜きを入れ替える） ---- */

.c-button {
    transition:
        color var(--motion-fast),
        background-color var(--motion-fast),
        border-color var(--motion-fast);
}

.c-button__arrow,
.c-button__arrow::before {
    transition:
        transform var(--motion-fast) var(--motion-ease),
        background-color var(--motion-fast);
}

.c-button:is(:hover, :focus-visible) .c-button__arrow {
    transform: translateX(var(--space-1));
}

.c-button:is(:hover, :focus-visible) .c-button__arrow--back {
    transform: translateX(calc(var(--space-1) * -1));
}

/* 入れ替え後もサイトで使っている配色の組み合わせなので、文字のコントラストは保たれる */
.c-button:is(:hover, :focus-visible) {
    --_bg: var(--color-bg);
    --_fg: var(--color-primary);
    --_border: var(--color-primary);
}

.c-button--accent:is(:hover, :focus-visible) {
    --_fg: var(--color-accent);
    --_border: var(--color-accent);
}

.c-button--outline:is(:hover, :focus-visible) {
    --_bg: var(--color-primary);
    --_fg: var(--color-text-inverse);
    --_border: var(--color-primary);
}

.c-button--outline-accent:is(:hover, :focus-visible) {
    --_bg: var(--color-accent);
    --_fg: var(--color-text-inverse);
    --_border: var(--color-accent);
}

.c-button--outline-white:is(:hover, :focus-visible) {
    --_border: var(--color-bg);
    --_arrow-fg: var(--color-bg);
}

/* ---- ホバー：ヘッダーのボタン（ボタンと同じく塗りと白抜きを入れ替える） ---- */

/* 白抜きにしたときに形が分かるよう枠線を付ける。大きさが変わらないよう、枠線の分だけ左右の余白を減らす */
.l-header__btn {
    --_color: var(--color-primary);
    padding-inline: calc(var(--space-3) - var(--border-w));
    background-color: var(--_color);
    border: var(--border-w) solid var(--_color);
    transition:
        color var(--motion-fast),
        background-color var(--motion-fast);
}

.l-header__btn--accent {
    --_color: var(--color-accent);
}

.l-header__btn:is(:hover, :focus-visible) {
    color: var(--_color);
    background-color: var(--color-bg);
}

/* ---- ホバー：カード（写真がゆっくり拡大し、タイトルに下線） ---- */

.c-card__img {
    transition: transform var(--motion-base) var(--motion-ease);
}

.c-card__link:is(:hover, :focus-visible) .c-card__img {
    transform: scale(1.05);
}

/* 拡大した写真の下端が本文に重ならないよう、本文を写真より手前に置く */
.c-card__body {
    position: relative;
    background-color: var(--color-bg);
}

.c-card__link:is(:hover, :focus-visible) .c-card__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ---- ホバー：下線の無いリンク（ナビ・フッターなど）は下線を出す ---- */

:is(.u-hover-line, .l-header__nav-list a, .l-footer__nav-list a, .l-footer__sub-nav-list a) {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.3em;
    transition: text-decoration-color var(--motion-fast);
}

:is(.u-hover-line, .l-header__nav-list a, .l-footer__nav-list a, .l-footer__sub-nav-list a):is(:hover, :focus-visible) {
    text-decoration-color: currentColor;
}

/* ---- 「視差効果を減らす」設定では位置・大きさを動かさない（色の変化は残す） ---- */

@media (prefers-reduced-motion: reduce) {
    .c-button:is(:hover, :focus-visible) :is(.c-button__arrow, .c-button__arrow--back),
    .c-card__link:is(:hover, :focus-visible) .c-card__img {
        transform: none;
    }
}