/* =========================================
   Section-Specific Scroll Animations
   ========================================= */

/* --- Base: 非表示状態 --- */
[data-anim] {
    opacity: 0;
    will-change: opacity, transform;
}

[data-anim].in-view {
    opacity: 1;
}

/* --- Hero: テキスト左からスライド --- */
[data-anim="slide-left"] {
    transform: translateX(-60px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-anim="slide-left"].in-view {
    transform: translateX(0);
}

/* --- Hero: 画像スケール+フェード --- */
[data-anim="scale-fade"] {
    transform: scale(0.85);
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-anim="scale-fade"].in-view {
    transform: scale(1);
}

/* --- Services: 下からフェードイン（時間差） --- */
[data-anim="fade-up"] {
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-anim="fade-up"].in-view {
    transform: translateY(0);
}

/* --- Crowdfunding: 左からスライド --- */
[data-anim="slide-in-left"] {
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-anim="slide-in-left"].in-view {
    transform: translateX(0);
}

/* --- Crowdfunding: 右からスライド --- */
[data-anim="slide-in-right"] {
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-anim="slide-in-right"].in-view {
    transform: translateX(0);
}

/* --- Company / CTA: 穏やかフェード --- */
[data-anim="fade"] {
    transition: opacity 1s ease;
}

/* --- 時間差ディレイ --- */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }

/* --- アクセシビリティ: モーション無効化 --- */
@media (prefers-reduced-motion: reduce) {
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================
   Hover Sparkle Effect（ボタン用）
   ========================================= */
.hover-sparkle-particle {
    position: absolute;
    pointer-events: none;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.8) 10%, transparent 70%);
    border-radius: 50%;
    animation: sparkle-anim 0.7s linear forwards;
    width: 8px;
    height: 8px;
    z-index: 10;
}

@keyframes sparkle-anim {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0;
    }
}