/* ============================================================
   rd-interactions.css
   TOP刷新で確立した「モダンインタラクション層」の共通スタイル。
   index-redesign.blade.php から切り出し、joblist/recruit detail 等の
   他ページからも <link> 一行で同じ手触りを再利用できるようにする。

   ▎使い方:
   1. 適用対象ページの最上位コンテナに class="rd-scope" を付与
   2. <link rel="stylesheet" href="/css/rd-interactions.css" />
   3. ボタンに data-element="cta"/"submit"/"link" を付与
   4. ダーク背景ボタンには class="rd-btn-dark" を併用
   5. お気に入りボタンは <x-rd-favorite-button :recruit-id="..." />
============================================================ */

/* --- イージングトークン --- */
.rd-scope {
    --rd-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 全インタラクティブ要素のトランジション基盤 ---
   SP軽量基盤: 合成専用(transform/opacity)のみアニメ。box-shadow/filter/border-color
   /background-color は paint が走るためSPでは含めない。
   PC拡張(下記 @media): hover:hover & pointer:fine 限定で paint プロパティを同期補間。
   SPはhoverが発火しないためpaintコストゼロ、PCのみ「動き・影・色・filter」を1つの動きとして
   同期させて時間軸の分裂を解消＝本質的な滑らかさを担保する。
   -webkit-tap-highlight-color: iOS/Androidの青タップハイライトを全廃。 */
.rd-scope a,
.rd-scope button[data-element],
.rd-scope [data-element="cta"],
.rd-scope [data-element="link"] {
    transition: transform 0.28s var(--rd-ease-smooth),
                opacity 0.2s var(--rd-ease-smooth);
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .rd-scope a,
    .rd-scope button[data-element],
    .rd-scope [data-element="cta"],
    .rd-scope [data-element="link"] {
        transition: transform 0.28s var(--rd-ease-smooth),
                    opacity 0.2s var(--rd-ease-smooth),
                    box-shadow 0.28s var(--rd-ease-smooth),
                    border-color 0.2s var(--rd-ease-smooth),
                    background-color 0.2s var(--rd-ease-smooth),
                    filter 0.2s var(--rd-ease-smooth);
    }
}

/* --- :active クリック瞬間の押下フィードバック（PC/SP共通の基盤）。
   ほんのり縮む(0.985) + 短時間(0.08s)で「コトっ」とした押し心地。
   SP側は @media (hover: none), (pointer: coarse) 内で scale(.96) 等にさらに強化される。 */
.rd-scope a:active,
.rd-scope button[data-element]:active,
.rd-scope [data-element="cta"]:active {
    transition-duration: 0.08s;
    transform: scale(0.985);
}

/* ============================================================
   PC専用ホバー演出 (@media hover:hover and pointer:fine)
============================================================ */
@media (hover: hover) and (pointer: fine) {
    /* カードCTA共通: 軽い色変化（opacity .92）で「ここは押せる」を伝える */
    .rd-scope a[data-element="cta"]:hover {
        opacity: 0.92;
    }
    /* 診断カード・特集カード（border-* 持ち）は枠線色をオレンジへ */
    .rd-scope a[data-element="cta"][class*="border-"]:hover {
        border-color: var(--primary-01\/5, #FF5500) !important;
    }
    /* border 無しカードは box-shadow で外側にオレンジ枠線を出して押下感を補強（1px細線） */
    .rd-scope a[data-element="cta"]:not([class*="border-"]):hover {
        box-shadow: 0 0 0 1px var(--primary-01\/5, #FF5500), 0 1px 2px rgba(16,32,64,.04), 0 6px 16px rgba(16,32,64,.06);
    }
}

/* --- オレンジ系グラデCTA: ホバーは brightness による軽い色変化のみ --- */
.rd-scope a[data-element="cta"][style*="linear-gradient"]:hover,
.rd-scope [data-element="cta"][style*="linear-gradient"]:hover {
    filter: brightness(1.05);
}

/* --- ダーク背景ボタン共通（rd-btn-dark）：
   検索送信「求人を探す」/「もっと求人を見る」/最終CTA「求人を探す」/ヘッダーログイン等を統一。
   ホバーで同系色のまま明度を下げて(#333→#1a1a1a)「ぐっと引き締まる」上品な変化。
   他のホバー演出（オレンジ枠線/lift/影/opacity）はダーク背景上では不要のため打ち消す。 */
.rd-scope .rd-btn-dark:hover {
    background-color: #1a1a1a !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* --- テキストリンク（[data-element="link"]）：ホバーは文字色がオレンジに変わる。
   「詳しい条件で探す」「詳しく見る」「すべて見る」「もっとみる」等。
   Tailwind の text-[color:...] で子 <p>/<span> に直接色指定があるケースに対応し、
   子要素まで強制でオレンジ着色（rd-btn-dark のダーク背景ボタンは除外）。 --- */
.rd-scope [data-element="link"] {
    transition: color 0.2s var(--rd-ease-smooth);
}
.rd-scope [data-element="link"]:not(.rd-btn-dark):hover,
.rd-scope [data-element="link"]:not(.rd-btn-dark):hover p,
.rd-scope [data-element="link"]:not(.rd-btn-dark):hover span {
    color: var(--primary-01\/5, #FF5500) !important;
}

/* --- セレクト枠：枠線色のみオレンジに変化 --- */
.rd-scope label:has(select):hover,
.rd-scope label:has(select):focus-within {
    border-color: var(--primary-01\/5, #FF5500) !important;
}

/* ============================================================
   お気に入りボタン（一般的なハートアイコン・インラインSVG）
   未追加: 線画（stroke #666）／追加: 塗りつぶし（stroke+fill オレンジ）
   SVG側で fill 属性は指定せず、CSS の fill だけで状態切替＝transitionが効く
============================================================ */
.rd-scope .recruit-favorite{ -webkit-tap-highlight-color:transparent; }
.rd-scope .recruit-favorite:hover{ opacity:.7; }
.rd-scope .recruit-favorite .rd-fav-ic{
    color: #666;
    fill: none;
    transition: color .2s var(--rd-ease-smooth), fill .2s var(--rd-ease-smooth);
}
.rd-scope .recruit-favorite.is-fav .rd-fav-ic{
    color: #FF5500;
    fill: currentColor;
}

/* --- お気に入り追加時の演出（Twitter/X風: ハートpop + リング拡散） ---
   追加時のみ発火。解除時は色変化のみ（CSS transition）で控えめに。
   リングは body 直下の fixed 配置でカード overflow:hidden の影響を受けない。 */
@keyframes rd-fav-pop {
    0%   { transform: scale(0); }
    35%  { transform: scale(1.35); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.rd-scope .recruit-favorite.is-poping .rd-fav-ic{
    animation: rd-fav-pop .55s var(--rd-ease-smooth);
}
.rd-fav-ring{
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #FF5500;
    transform: translate(-50%, -50%) scale(.2);
    will-change: transform, opacity, border-width;
    animation: rd-fav-ring-anim .55s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes rd-fav-ring-anim {
    0%   { transform: translate(-50%, -50%) scale(.2); opacity: .9; border-width: 6px; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; border-width: 1px; }
}

/* ============================================================
   SP/タッチ端末 (@media hover:none, pointer:coarse)
   ホバーを発火させず :active のみで押下感を表現。同系統で完全統一。
============================================================ */
@media (hover: none), (pointer: coarse) {
    /* 静止時の浮き上がりを強めて、のっぺりした縦積みでもカードを際立たせる */
    .rd-scope a[data-element="cta"]{
        box-shadow: 0 2px 4px rgba(16,32,64,.06), 0 10px 24px rgba(16,32,64,.10);
    }
    /* SP: opacity を完全に固定（タップ後の :hover 残留で 0.92 が当たり、bg-white を
       透過して背景が透ける現象を根絶）。 */
    .rd-scope a[data-element="cta"],
    .rd-scope a[data-element="cta"]:hover,
    .rd-scope a[data-element="cta"]:focus,
    .rd-scope a[data-element="cta"]:focus-visible {
        opacity: 1 !important;
    }
    /* SP/タッチデバイス: :hover を一切発火させない。
       モバイルブラウザは :hover をタップで誤発火する場合があるため、関連する全 :hover の
       値を revert で静止状態に戻す。代わりに下記 :active で押下フィードバックを与える。 */
    .rd-scope a[data-element="cta"]:hover,
    .rd-scope a[data-element="cta"]:hover img,
    .rd-scope a[data-element="cta"][class*="border-"]:hover,
    .rd-scope a[data-element="cta"][style*="linear-gradient"]:hover,
    .rd-scope [data-element="cta"][style*="linear-gradient"]:hover,
    .rd-scope button[data-element="submit"]:hover,
    .rd-scope [data-element="link"]:hover,
    .rd-scope [data-element="link"]:hover img,
    .rd-scope label:has(select):hover,
    .rd-scope .recruit-favorite:hover {
        transform: revert;
        box-shadow: revert;
        filter: revert;
        opacity: revert;
        border-color: revert;
        background: revert;
        color: revert;
    }

    /* === :active 押下挙動を「同系統で完全統一」 ===
       A) カード系: scale(.96) + brightness(.95)
       B) ボタン系(rd-btn-dark/submit/グラデCTA): scale(.96) + brightness(.88)
       C) テキストリンク系: scale(.97) + opacity(.6)
       D) お気に入りアイコン: scale(.85) */
    .rd-scope a[data-element="cta"]:active {
        transform: scale(.96) !important;
        filter: brightness(.95) !important;
        transition: transform .1s var(--rd-ease-smooth, ease),
                    filter .1s var(--rd-ease-smooth, ease) !important;
    }
    .rd-scope .rd-btn-dark:active,
    .rd-scope button[data-element="submit"]:active,
    .rd-scope a[data-element="cta"][style*="linear-gradient"]:active,
    .rd-scope [data-element="cta"][style*="linear-gradient"]:active {
        transform: scale(.96) !important;
        filter: brightness(.88) !important;
        transition: transform .1s var(--rd-ease-smooth, ease),
                    filter .1s var(--rd-ease-smooth, ease) !important;
    }
    .rd-scope [data-element="link"]:active {
        transform: scale(.97) !important;
        opacity: .6 !important;
        transition: transform .1s var(--rd-ease-smooth, ease),
                    opacity .1s var(--rd-ease-smooth, ease) !important;
    }
    .rd-scope .recruit-favorite:active {
        transform: scale(.85) !important;
        transition: transform .1s var(--rd-ease-smooth, ease) !important;
    }

    /* --- :focus でブラウザ既定の青outline/focus-ring を消す。
           border持ちカードは focus/active 時もオレンジ枠線を維持する。 --- */
    .rd-scope a:focus,
    .rd-scope a:focus-visible,
    .rd-scope button[data-element]:focus,
    .rd-scope button[data-element]:focus-visible {
        outline: none !important;
    }
    .rd-scope a[data-element="cta"][class*="border-"]:focus,
    .rd-scope a[data-element="cta"][class*="border-"]:focus-visible,
    .rd-scope a[data-element="cta"][class*="border-"]:active {
        border-color: var(--primary-01\/5, #FF5500) !important;
    }
}

/* --- アクセシビリティ：モーション抑制設定を尊重 --- */
@media (prefers-reduced-motion: reduce) {
    .rd-scope .recruit-favorite.is-poping .rd-fav-ic{ animation: none; }
    .rd-fav-ring{ animation: none; opacity: 0; }
}