/* ========================================
   Page Load Animations
======================================== */

/* 初期状態（非表示） */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* アニメーション後の状態（表示） */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 段階的にアニメーションするための遅延 */
.fade-in.delay-1 {
    transition-delay: 0.2s;
}

.fade-in.delay-2 {
    transition-delay: 0.4s;
}

.fade-in.delay-3 {
    transition-delay: 0.6s;
}

.fade-in.delay-4 {
    transition-delay: 0.8s;
}

.fade-in.delay-5 {
    transition-delay: 1.0s;
}

/* スケールアニメーション */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* 左からスライドイン */
.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* 右からスライドイン */
.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* ページ全体のフェードイン */
.page-fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.page-fade-in.loaded {
    opacity: 1;
}

/* 個別要素のアニメーション */
.hero-animation {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}

.hero-animation.visible {
    opacity: 1;
    transform: translateY(0);
}

/* セクション単位のアニメーション */
.section-animation {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-animation.visible {
    opacity: 1;
    transform: translateY(0);
}

/* カードアニメーション */
.card-animation {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.card-animation.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* テキストアニメーション */
.text-animation {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.text-animation.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 画像アニメーション */
.image-animation {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.image-animation.visible {
    opacity: 1;
    transform: scale(1);
}

/* モバイル用の軽量アニメーション */
@media (max-width: 768px) {
    .fade-in,
    .scale-in,
    .slide-in-left,
    .slide-in-right,
    .hero-animation,
    .section-animation,
    .card-animation,
    .text-animation,
    .image-animation {
        transition-duration: 0.6s;
    }
    
    .fade-in,
    .hero-animation,
    .section-animation {
        transform: translateY(20px);
    }
}

/* プリファース・リデュースド・モーション対応 */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .scale-in,
    .slide-in-left,
    .slide-in-right,
    .hero-animation,
    .section-animation,
    .card-animation,
    .text-animation,
    .image-animation,
    .page-fade-in {
        transition: none;
        opacity: 1;
        transform: none;
    }
}