/* 
横浜SHADE 男性求人LP アニメーション
力強さと高級感を演出する動きを追加
*/

/* スクロールアニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* ヒーローセクションのアニメーション */
.hero h1 {
    animation: fadeInUp 1.2s ease-out;
}

.hero .subtitle {
    animation: fadeInUp 1.2s ease-out 0.3s forwards;
    opacity: 0;
}

.hero .cta-buttons {
    animation: fadeInUp 1.2s ease-out 0.6s forwards;
    opacity: 0;
}

.hero .trust-icons {
    animation: fadeInUp 1.2s ease-out 0.9s forwards;
    opacity: 0;
}

/* ボタンのホバーエフェクト強化 */
.btn-primary:hover {
    animation: pulse 1s infinite;
}

/* 数字のカウントアップアニメーション */
.stat-number.animate {
    animation: countUp 2s ease-out forwards;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 理由セクションのアイコンアニメーション */
.reason-icon {
    animation: pulse 2s infinite;
}

/* ギャラリー画像のホバーエフェクト */
.gallery-item:hover img {
    animation: zoomIn 0.5s forwards;
}

/* 応募ステップのアニメーション */
.step {
    transition: all 0.3s ease;
}

.step:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* キラキラエフェクト */
.sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
}

@keyframes sparkle {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* 成功への道のりアニメーション */
.career-path {
    position: relative;
}

.career-path .path-step {
    transition: all 0.3s ease;
}

.career-path:hover .path-step {
    animation: pulse 1s;
}

/* 収入比較のアニメーション */
.income-box {
    transition: all 0.3s ease;
}

.income-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.highlight-box {
    animation: pulse 3s infinite;
}

/* スクロールダウン指示アニメーション */
.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-20px) translateX(-50%);
    }
    60% {
        transform: translateY(-10px) translateX(-50%);
    }
}

/* テキストのグラデーションアニメーション */
.gradient-text {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color), var(--primary-color));
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradient 3s linear infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* 応募ボタンの注目アニメーション */
.btn-primary.attention {
    animation: attention 2s infinite;
}

@keyframes attention {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

/* スクロールトリガーアニメーション */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.zoom-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.zoom-in.visible {
    opacity: 1;
    transform: scale(1);
}