/* ============================================
   Snow Monkey 背景画像ブロック用
   スクロールインズームアニメーション
   ============================================ */

/* ズームアニメーション用セクション */
.zoom-scroll-section,
.zoom-out-section,
.fade-section,
.slide-zoom-section,
.slide-down-zoom-section,
.slide-left-zoom-section,
.slide-right-zoom-section {
    position: relative;
    overflow: hidden;
}

/* 背景画像コンテナ */
.zoom-scroll-section .smb-section-with-bgimage__bgimage,
.zoom-out-section .smb-section-with-bgimage__bgimage,
.fade-section .smb-section-with-bgimage__bgimage,
.slide-zoom-section .smb-section-with-bgimage__bgimage,
.slide-down-zoom-section .smb-section-with-bgimage__bgimage,
.slide-left-zoom-section .smb-section-with-bgimage__bgimage,
.slide-right-zoom-section .smb-section-with-bgimage__bgimage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* 背景画像そのもの */
.zoom-scroll-section .smb-section-with-bgimage__bgimage img,
.zoom-out-section .smb-section-with-bgimage__bgimage img,
.fade-section .smb-section-with-bgimage__bgimage img,
.slide-zoom-section .smb-section-with-bgimage__bgimage img,
.slide-down-zoom-section .smb-section-with-bgimage__bgimage img,
.slide-left-zoom-section .smb-section-with-bgimage__bgimage img,
.slide-right-zoom-section .smb-section-with-bgimage__bgimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================
   ズームインアニメーション（拡大→通常）
   ============================================ */
[data-aos="zoom-in-bg"] .smb-section-with-bgimage__bgimage img {
    transform: scale(1.3);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 0ms;
}

[data-aos="zoom-in-bg"].aos-animate .smb-section-with-bgimage__bgimage img {
    transform: scale(1);
    opacity: 1;
    transition-duration: 3000ms;
    transition-timing-function: ease-out;
}

/* ============================================
   ズームアウトアニメーション（通常→拡大）
   ============================================ */
[data-aos="zoom-out-bg"] .smb-section-with-bgimage__bgimage img {
    transform: scale(1);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 0ms;
}

[data-aos="zoom-out-bg"].aos-animate .smb-section-with-bgimage__bgimage img {
    transform: scale(1.15);
    opacity: 1;
    transition-duration: 3000ms;
    transition-timing-function: ease-out;
}

/* ============================================
   フェードインのみ
   ============================================ */
[data-aos="fade-in-bg"] .smb-section-with-bgimage__bgimage img {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0ms;
}

[data-aos="fade-in-bg"].aos-animate .smb-section-with-bgimage__bgimage img {
    opacity: 1;
    transition-duration: 3000ms;
    transition-timing-function: ease-out;
}

/* ============================================
   スライドアップ + ズーム（下から上）
   ============================================ */
[data-aos="slide-zoom-bg"] .smb-section-with-bgimage__bgimage img {
    transform: translateY(150px) scale(1.3);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 0ms;
}

[data-aos="slide-zoom-bg"].aos-animate .smb-section-with-bgimage__bgimage img {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-duration: 3000ms;
    transition-timing-function: ease-out;
}

/* スライドダウン + ズーム（上から下）*/
[data-aos="slide-down-zoom-bg"] .smb-section-with-bgimage__bgimage img {
    transform: translateY(-150px) scale(1.3);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 0ms;
}

[data-aos="slide-down-zoom-bg"].aos-animate .smb-section-with-bgimage__bgimage img {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-duration: 3000ms;
    transition-timing-function: ease-out;
}

/* スライド左 + ズーム（右から左）*/
[data-aos="slide-left-zoom-bg"] .smb-section-with-bgimage__bgimage img {
    transform: translateX(150px) scale(1.3);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 0ms;
}

[data-aos="slide-left-zoom-bg"].aos-animate .smb-section-with-bgimage__bgimage img {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition-duration: 3000ms;
    transition-timing-function: ease-out;
}

/* スライド右 + ズーム（左から右）*/
[data-aos="slide-right-zoom-bg"] .smb-section-with-bgimage__bgimage img {
    transform: translateX(-150px) scale(1.3);
    opacity: 0.3;
    transition-property: transform, opacity;
    transition-duration: 0ms;
}

[data-aos="slide-right-zoom-bg"].aos-animate .smb-section-with-bgimage__bgimage img {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition-duration: 3000ms;
    transition-timing-function: ease-out;
}

/* モバイル版（スマホではもう少し控えめに）*/
@media (max-width: 768px) {
    [data-aos="slide-zoom-bg"] .smb-section-with-bgimage__bgimage img {
        transform: translateY(80px) scale(1.2);
    }
    
    [data-aos="slide-down-zoom-bg"] .smb-section-with-bgimage__bgimage img {
        transform: translateY(-80px) scale(1.2);
    }
    
    [data-aos="slide-left-zoom-bg"] .smb-section-with-bgimage__bgimage img {
        transform: translateX(80px) scale(1.2);
    }
    
    [data-aos="slide-right-zoom-bg"] .smb-section-with-bgimage__bgimage img {
        transform: translateX(-40px) scale(1.2);
    }
}

/* ============================================
   コンテンツエリア
   ============================================ */

/* コンテンツエリアを前面に表示 */
.zoom-scroll-section .smb-section__inner,
.zoom-out-section .smb-section__inner,
.fade-section .smb-section__inner,
.slide-zoom-section .smb-section__inner,
.slide-down-zoom-section .smb-section__inner,
.slide-left-zoom-section .smb-section__inner,
.slide-right-zoom-section .smb-section__inner {
    position: relative;
    z-index: 1;
}

.zoom-scroll-section .smb-section__body,
.zoom-out-section .smb-section__body,
.fade-section .smb-section__body,
.slide-zoom-section .smb-section__body,
.slide-down-zoom-section .smb-section__body,
.slide-left-zoom-section .smb-section__body,
.slide-right-zoom-section .smb-section__body {
    position: relative;
    z-index: 1;
}

/* ヒーロータイトルのスタイル調整 */
.zoom-scroll-section .hero_title,
.zoom-out-section .hero_title,
.fade-section .hero_title,
.slide-zoom-section .hero_title,
.slide-down-zoom-section .hero_title,
.slide-left-zoom-section .hero_title,
.slide-right-zoom-section .hero_title {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* ============================================
   オプション: オーバーレイ
   ============================================ */

/* with-overlay クラスを追加した場合に暗いオーバーレイ */
.zoom-scroll-section.with-overlay::before,
.zoom-out-section.with-overlay::before,
.fade-section.with-overlay::before,
.slide-zoom-section.with-overlay::before,
.slide-down-zoom-section.with-overlay::before,
.slide-left-zoom-section.with-overlay::before,
.slide-right-zoom-section.with-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

/* ============================================
   レスポンシブ対応
   ============================================ */

@media (max-width: 768px) {
    /* モバイルでのタイトルサイズ調整 */
    .zoom-scroll-section .hero_title,
    .zoom-out-section .hero_title,
    .fade-section .hero_title,
    .slide-zoom-section .hero_title,
    .slide-down-zoom-section .hero_title,
    .slide-left-zoom-section .hero_title,
    .slide-right-zoom-section .hero_title {
        font-size: 1.5rem;
    }
    
    /* モバイルではアニメーションを控えめに */
    [data-aos="zoom-in-bg"] .smb-section-with-bgimage__bgimage img {
        transform: scale(1.15);
    }
    
    [data-aos="zoom-out-bg"] .smb-section-with-bgimage__bgimage img {
        transform: scale(1);
    }
    
    [data-aos="zoom-out-bg"].aos-animate .smb-section-with-bgimage__bgimage img {
        transform: scale(1.08);
    }
    
    [data-aos="slide-zoom-bg"] .smb-section-with-bgimage__bgimage img {
        transform: translateY(30px) scale(1.1);
    }
}

/* ============================================
   ページ読み込み時のアニメーション強制表示
   ============================================ */

/* ページ読み込み直後は強制的に初期状態を維持 */
.zoom-scroll-section:not(.aos-animate) .smb-section-with-bgimage__bgimage img,
.zoom-out-section:not(.aos-animate) .smb-section-with-bgimage__bgimage img,
.fade-section:not(.aos-animate) .smb-section-with-bgimage__bgimage img,
.slide-zoom-section:not(.aos-animate) .smb-section-with-bgimage__bgimage img,
.slide-down-zoom-section:not(.aos-animate) .smb-section-with-bgimage__bgimage img,
.slide-left-zoom-section:not(.aos-animate) .smb-section-with-bgimage__bgimage img,
.slide-right-zoom-section:not(.aos-animate) .smb-section-with-bgimage__bgimage img {
    transition-duration: 0s !important;
}

/* ============================================
   ABOUT セクション用アニメーション
   フェードイン + スライドアップ
   ============================================ */

/* about_secセクションのコンテンツブロック */
.about_sec .smb-section-break-the-grid__content {
    /* 初期状態（アニメーション前） */
    opacity: 0;
    transform: translateY(40px);
    /* トランジション設定 */
    transition-property: opacity, transform;
    transition-duration: 1500ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ease-out-cubic */
}

/* アニメーション実行後の状態 */
.about_sec .smb-section-break-the-grid__content[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* コンテンツ内の要素を段階的にフェードイン（オプション） */
.about_sec .smb-section-break-the-grid__content .wp-block-heading {
    opacity: 0;
    transition: opacity 800ms ease-out 300ms;
}

.about_sec .smb-section-break-the-grid__content[data-aos="fade-up"].aos-animate .wp-block-heading {
    opacity: 1;
}

.about_sec .smb-section-break-the-grid__content p {
    opacity: 0;
    transition: opacity 800ms ease-out 500ms;
}

.about_sec .smb-section-break-the-grid__content[data-aos="fade-up"].aos-animate p {
    opacity: 1;
}

/* パフォーマンス最適化: GPU加速 */
.about_sec .smb-section-break-the-grid__content {
    will-change: transform, opacity;
}

/* アニメーション完了後はwill-changeを解除 */
.about_sec .smb-section-break-the-grid__content.aos-animate {
    will-change: auto;
}

/* ============================================
   ABOUT セクション - レスポンシブ調整
   ============================================ */

@media (max-width: 768px) {
    /* タブレット: アニメーション距離を控えめに */
    .about_sec .smb-section-break-the-grid__content {
        transform: translateY(25px);
    }
    
    /* 段階的フェードインの遅延を短縮 */
    .about_sec .smb-section-break-the-grid__content .wp-block-heading {
        transition-delay: 200ms;
    }
    
    .about_sec .smb-section-break-the-grid__content p {
        transition-delay: 350ms;
    }
}

@media (max-width: 480px) {
    /* スマホ: さらに控えめなアニメーション */
    .about_sec .smb-section-break-the-grid__content {
        transform: translateY(20px);
        transition-duration: 1200ms; /* 少し速めに */
    }
    
    /* モバイルでは段階的フェードインをさらに短縮 */
    .about_sec .smb-section-break-the-grid__content .wp-block-heading {
        transition-delay: 150ms;
    }
    
    .about_sec .smb-section-break-the-grid__content p {
        transition-delay: 250ms;
    }
}

/* ============================================
   汎用: AOSアニメーション基本設定
   ============================================ */

/* AOS要素の基本設定 */
[data-aos] {
    pointer-events: auto;
}

/* カスタムduration対応 */
[data-aos][data-aos][data-aos-duration="1500"],
body[data-aos-duration="1500"] [data-aos] {
    transition-duration: 1500ms;
}

[data-aos][data-aos][data-aos-duration="2000"],
body[data-aos-duration="2000"] [data-aos] {
    transition-duration: 2000ms;
}

/* アニメーション前の要素は確実に非表示 */
[data-aos]:not(.aos-animate) {
    visibility: hidden;
}

[data-aos].aos-animate {
    visibility: visible;
}