/* ==========================================================================
   WooPro Theme - Animations
   ==========================================================================

   目次:
   1. スクロールアニメーション（Reveal）
   2. フッターアニメーション
   3. ホバーエフェクト
   4. スクロールダウンアニメーション
   5. レスポンシブ対応
   ========================================================================== */

/* ==========================================================================
   1. スクロールアニメーション（Reveal）
   ========================================================================== */

/* JavaScriptが無効な場合のフォールバック */
.no-js .services__image,
.no-js .services__character,
.no-js .services__content {
    opacity: 1 !important;
    transform: none !important;
}

/* サービス画像のフェードイン */
.services__image {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 1.4s ease 0s, transform 1.4s ease 0s !important;
    will-change: opacity, transform; /* モバイルでのパフォーマンス向上 */
}

.reveal-left.visible .services__image,
.reveal-right.visible .services__image {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.4s ease 0.2s, transform 1.4s ease 0.2s !important; /* 最初に画像が表示される */
}

/* うーちゃんのフェードインアニメーション */
.services__character {
    opacity: 0;
    transform: translateX(58%) translateY(30px) scale(0.8);
    transition: opacity 1.0s ease 0s, transform 1.0s ease 0s !important;
    will-change: opacity, transform; /* モバイルでのパフォーマンス向上 */
}

.reveal-left.visible .services__character,
.reveal-right.visible .services__character {
    opacity: 1;
    transform: translateX(58%) translateY(0) scale(1);
    /* 画像より少し後にフェードイン（0.4s delay） */
    transition: opacity 1.4s ease 0.4s, transform 1.4s ease 0.4s !important;
    /* うさぎらしいバウンスアニメーションを適用 */
    animation: character-bounce 1.2s linear 1.2s forwards;
}

/* うーちゃんのバウンスアニメーション（うさぎらしくぴょんと跳ねる） */
@keyframes character-bounce {
    0%, 100% {
        transform: translateX(58%) translateY(0) scale(1);
    }
    10% {
        transform: translateX(58%) translateY(-18px) scale(1.04);
    }
    20% {
        transform: translateX(58%) translateY(0) scale(0.96);
    }
    25% {
        transform: translateX(58%) translateY(0) scale(1);
    }
    40% {
        transform: translateX(58%) translateY(-9px) scale(1.02);
    }
    50% {
        transform: translateX(58%) translateY(0) scale(0.98);
    }
    55% {
        transform: translateX(58%) translateY(0) scale(1);
    }
}

/* サービスコンテンツ（テキスト部分）のフェードイン */
.services__content {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 1.0s ease 0s, transform 1.0s ease 0s !important;
    will-change: opacity, transform; /* モバイルでのパフォーマンス向上 */
}

.reveal-left.visible .services__content,
.reveal-right.visible .services__content {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.2s ease 0.6s, transform 1.2s ease 0.6s !important; /* 画像とうーちゃんの中間のタイミング */
}

/* ==========================================================================
   2. フッター・コンタクトキャラクターアニメーション
   ========================================================================== */
.footer__character,
.contact__character {
    opacity: 0;
    transform: translateY(30px);
}

.footer__character.animate,
.contact__character.animate {
    animation: footer-bounce-in 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    transition: none; /* アニメーション中はtransitionを無効化 */
}

@keyframes footer-bounce-in {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* キャラクター（地図横のうーちゃん）の震えアニメーション */
.character-content {
    animation: character-shake 4s ease-in-out infinite;
}

@keyframes character-shake {
    0%, 85%, 100% {
        transform: translateY(-50%);
    }
    86% {
        transform: translateY(-50%) translateX(-2px) rotate(-1deg);
    }
    87% {
        transform: translateY(-50%) translateX(2px) rotate(1deg);
    }
    88% {
        transform: translateY(-50%) translateX(-1px) rotate(-0.5deg);
    }
    89% {
        transform: translateY(-50%) translateX(1px) rotate(0.5deg);
    }
    90% {
        transform: translateY(-50%) translateX(-1px) rotate(-0.3deg);
    }
    91% {
        transform: translateY(-50%) translateX(0.5px) rotate(0.2deg);
    }
    92% {
        transform: translateY(-50%);
    }
}

/* 送信ボタンの跳ねるアニメーション */
.contact__submit-button:not(.submit-success-animation) {
    animation: submit-button-bounce 4s ease-in-out infinite;
}

@keyframes submit-button-bounce {
    0%, 80%, 100% {
        transform: translateY(0) scale(1);
    }
    82% {
        transform: translateY(-8px) scale(1.02);
    }
    84% {
        transform: translateY(0) scale(0.98);
    }
    86% {
        transform: translateY(-4px) scale(1.01);
    }
    88% {
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   3. ホバーエフェクト
   ========================================================================== */
.services__item {
    transition: all 0.3s ease;
}

/* ボタンホバーエフェクト */
.contact__submit {
    position: relative;
    overflow: hidden;
}

.contact__submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.contact__submit:hover::before {
    left: 100%;
}

/* ページトップボタン */
.page-top:hover {
    transform: translateY(-5px) scale(1.1);
}

.page-top:active {
    transform: translateY(-2px) scale(1.05);
}

/* プライバシーポリシートグル */
.privacy-toggle__icon {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
}

/* 横線（マイナス） */
.privacy-toggle__icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: currentColor;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* 縦線（プラスの縦棒） */
.privacy-toggle__icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 5px;
    height: 100%;
    background-color: currentColor;
    transform: translateX(-50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 開いた状態：縦線を非表示にしてマイナスに */
.privacy-toggle.open .privacy-toggle__icon::after {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
}

.privacy-content {
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.privacy-content.open {
    opacity: 1;
}

/* ==========================================================================
   4. スクロールダウンアニメーション
   ========================================================================== */
.hero__scroll-line {
    position: relative;
}

.hero__scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #795e3a;
    animation: scroll-line-animation 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes scroll-line-animation {
    0% {
        transform: scaleY(0);
        transform-origin: top center;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top center;
    }
    50.1% {
        transform: scaleY(1);
        transform-origin: bottom center;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom center;
    }
}

/* ==========================================================================
   5. レスポンシブ対応（モーション削減、モバイル調整）
   ========================================================================== */
/* モバイル版アニメーション調整 */
@media screen and (max-width: 768px) {
    /* モバイル版のキャラクター震えアニメーション */
    .character-content {
        animation: character-shake-mobile 8s ease-in-out infinite;
    }

    @keyframes character-shake-mobile {
        0%, 85%, 100% {
            transform: none;
        }
        86% {
            transform: translateX(-2px) rotate(-1deg);
        }
        87% {
            transform: translateX(2px) rotate(1deg);
        }
        88% {
            transform: translateX(-1px) rotate(-0.5deg);
        }
        89% {
            transform: translateX(1px) rotate(0.5deg);
        }
        90% {
            transform: translateX(-1px) rotate(-0.3deg);
        }
        91% {
            transform: translateX(0.5px) rotate(0.2deg);
        }
        92% {
            transform: none;
        }
    }

    .services__character {
        transform: translateX(18%) translateY(30px) scale(0.8);
        /* モバイルでもゆっくりめのアニメーション */
        transition: opacity 1.2s ease 0s, transform 1.2s ease 0s !important;
    }

    .reveal-left.visible .services__character,
    .reveal-right.visible .services__character {
        transform: translateX(18%) translateY(0) scale(1);
        /* 画像より少し後にフェードイン（0.3s delay） */
        transition: opacity 1.2s ease 0.3s, transform 1.2s ease 0.3s !important;
        /* モバイル版のバウンスアニメーション（位置をモバイル用に調整） */
        animation: character-bounce-mobile 1.1s linear 1.1s forwards;
    }

    /* モバイル版のバウンスアニメーション */
    @keyframes character-bounce-mobile {
        0%, 100% {
            transform: translateX(18%) translateY(0) scale(1);
        }
        10% {
            transform: translateX(18%) translateY(-14px) scale(1.04);
        }
        20% {
            transform: translateX(18%) translateY(0) scale(0.96);
        }
        25% {
            transform: translateX(18%) translateY(0) scale(1);
        }
        40% {
            transform: translateX(18%) translateY(-7px) scale(1.02);
        }
        50% {
            transform: translateX(18%) translateY(0) scale(0.98);
        }
        55% {
            transform: translateX(18%) translateY(0) scale(1);
        }
    }

    /* モバイルでのアニメーション速度調整 */
    .services__image {
        transition: opacity 1.0s ease 0s, transform 1.0s ease 0s !important;
    }

    .reveal-left.visible .services__image,
    .reveal-right.visible .services__image {
        transition: opacity 1.0s ease 0.1s, transform 1.0s ease 0.1s !important;
    }

    .services__content {
        transition: opacity 0.9s ease 0s, transform 0.9s ease 0s !important;
    }

    .reveal-left.visible .services__content,
    .reveal-right.visible .services__content {
        transition: opacity 0.9s ease 0.3s, transform 0.9s ease 0.3s !important;
    }
}