/**
 * ホバーエフェクト共通スタイル v9.0.0
 * デザインシステム統一版
 * 
 * コンセプト: FUTURE × LIFE × SCIENCE
 * 全ページで使用できる統一されたホバーエフェクト
 */

/* ========================================
   COMPONENTS: Button Hover Effects
   ======================================== */
.btn-primary,
.btn-primary-gold,
.btn-primary-large,
.btn-secondary,
.btn-secondary-outline,
[class^="btn-"],
a[href="#"]:not([class*="link"]) {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover,
.btn-primary-large:hover {
    background: var(--color-sage, #4A6B5B);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(10, 61, 61, 0.25);
}

.btn-primary-gold:hover {
    background: var(--color-deep-teal, #0A3D3D);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(201, 169, 97, 0.35);
}

.btn-secondary:hover {
    background: var(--color-deep-teal, #0A3D3D);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(10, 61, 61, 0.2);
}

.btn-secondary-outline:hover {
    background: var(--color-cream, #F5F3EF);
    border-color: var(--color-deep-teal, #0A3D3D);
    transform: translateY(-2px);
}

.link-arrow:hover,
.link-simple:hover {
    color: var(--color-gold, #C9A961);
    border-bottom-color: var(--color-gold, #C9A961);
    gap: var(--space-3, 0.75rem);
}

.link-external:hover {
    color: var(--color-deep-teal, #0A3D3D);
    transform: translateX(4px);
}

/* ========================================
   記事カード - ホバーエフェクト
   ======================================== */
.article-grid article,
.news-grid article,
.blog-card,
.post-card,
.column-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.article-grid article:hover,
.news-grid article:hover,
.blog-card:hover,
.post-card:hover,
.column-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(10, 61, 61, 0.15);
}

.article-grid article img,
.news-grid article img,
.blog-card img,
.post-card img,
.column-card img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-grid article:hover img,
.news-grid article:hover img,
.blog-card:hover img,
.post-card:hover img,
.column-card:hover img {
    transform: scale(1.05);
}

.article-grid article a,
.news-grid article a,
.blog-card a,
.post-card a,
.column-card a {
    transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-grid article:hover a,
.news-grid article:hover a,
.blog-card:hover a,
.post-card:hover a,
.column-card:hover a {
    gap: var(--space-3, 0.75rem);
    color: var(--color-gold, #C9A961);
    border-bottom-color: var(--color-gold, #C9A961);
}

/* ========================================
   クリニックカード - ホバーエフェクト
   ======================================== */
.clinic-card,
.location-card,
.multi-clinic > div > div > div {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.clinic-card:hover,
.location-card:hover,
.multi-clinic > div > div > div:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(10, 61, 61, 0.15);
}

.clinic-card img,
.location-card img,
.multi-clinic > div > div > div img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.clinic-card:hover img,
.location-card:hover img,
.multi-clinic > div > div > div:hover img {
    transform: scale(1.05);
}

.clinic-card a,
.location-card a,
.multi-clinic > div > div > div a {
    transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clinic-card:hover a,
.location-card:hover a,
.multi-clinic > div > div > div:hover a {
    gap: var(--space-3, 0.75rem);
    color: var(--color-gold, #C9A961);
    border-bottom-color: var(--color-gold, #C9A961);
}

/* ========================================
   Treatment Flow - ホバーエフェクト
   ======================================== */
.flow-step > div:last-child {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.flow-step:hover > div:last-child {
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgba(10, 61, 61, 0.12);
    background: linear-gradient(135deg, white 0%, rgba(245, 243, 239, 0.5) 100%);
}

.flow-step > div:first-child {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.flow-step:hover > div:first-child {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(10, 61, 61, 0.2);
}

/* ========================================
   医師カード - ホバーエフェクト
   ======================================== */
.doctor-card,
.staff-card,
.team-member-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.doctor-card:hover,
.staff-card:hover,
.team-member-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 35px rgba(10, 61, 61, 0.15);
}

/* ========================================
   治療メニューカード - ホバーエフェクト
   ======================================== */
.treatment-card,
.service-card,
.menu-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.treatment-card:hover,
.service-card:hover,
.menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(10, 61, 61, 0.12);
    border-color: var(--color-gold, #C9A961);
}

/* ========================================
   FAQアコーディオン - ホバーエフェクト
   ======================================== */
.faq-item,
.accordion-item {
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover,
.accordion-item:hover {
    background: rgba(245, 243, 239, 0.5);
    box-shadow: 0 2px 10px rgba(10, 61, 61, 0.05);
}

/* ========================================
   モーション軽減設定
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}