/**
 * Scroll Animations CSS
 * スクロールアニメーション用のスタイル
 * 
 * モバイル時: 個別アニメーション
 * PC時: パターン全体 or スタガーアニメーション
 */

/* ==========================================================================
   Base Animation Styles - パターン全体
   ========================================================================== */

.js-scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Child Element Animation - 子要素（カラム/カード）
   ========================================================================== */

.js-scroll-child {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-scroll-child.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Parent Container for Mobile Individual Animation
   ========================================================================== */

.js-scroll-animate-parent {
    /* 親は常に表示、子要素が個別にアニメーション */
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   PC: Stagger Animation (スタガー - 順番表示)
   ========================================================================== */

@media (min-width: 782px) {
    .js-stagger-parent .js-scroll-child {
        opacity: 0;
        transform: translateY(30px);
        transition:
            opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .js-stagger-parent.is-visible .js-scroll-child.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Hero & Page Header - Initial Loading Animation
   ========================================================================== */

/* ヒーロー初期状態 */
.p-core-hero-full,
.p-core-hero-split,
.p-core-hero-video-muted {
    opacity: 0;
    overflow: hidden;
    /* ズーム効果のはみ出し防止 */
}

/* ヒーローアニメーション開始時 */
.p-core-hero-full.is-hero-loaded,
.p-core-hero-split.is-hero-loaded,
.p-core-hero-video-muted.is-hero-loaded {
    opacity: 1;
    animation: heroFadeIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 背景画像のズームアウト効果 */
.p-core-hero-full .wp-block-cover__image-background,
.p-core-hero-split .wp-block-cover__image-background,
.p-core-hero-video-muted .wp-block-cover__image-background,
.p-core-hero-full video,
.p-core-hero-split video,
.p-core-hero-video-muted video {
    transform: scale(1.08);
    transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.p-core-hero-full.is-hero-loaded .wp-block-cover__image-background,
.p-core-hero-split.is-hero-loaded .wp-block-cover__image-background,
.p-core-hero-video-muted.is-hero-loaded .wp-block-cover__image-background,
.p-core-hero-full.is-hero-loaded video,
.p-core-hero-split.is-hero-loaded video,
.p-core-hero-video-muted.is-hero-loaded video {
    transform: scale(1);
}

/* テキストコンテンツの遅延フェイドアップ（子要素のみ、疑似要素に影響しないように） */
.p-core-hero-full .wp-block-cover__inner-container>*,
.p-core-hero-split .wp-block-cover__inner-container>*,
.p-core-hero-video-muted .wp-block-cover__inner-container>* {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s,
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}

.p-core-hero-full.is-hero-loaded .wp-block-cover__inner-container>*,
.p-core-hero-split.is-hero-loaded .wp-block-cover__inner-container>*,
.p-core-hero-video-muted.is-hero-loaded .wp-block-cover__inner-container>* {
    opacity: 1;
    transform: translateY(0);
}

/* ページヘッダー（サブページ用）*/
.p-core-page-header {
    opacity: 1 !important;
    transform: none !important;
}

/* ヒーローのフェイドインキーフレーム */
@keyframes heroFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
   Reduced Motion (アクセシビリティ対応)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .js-scroll-animate,
    .js-scroll-child {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* ヒーローもアニメーション無効 */
    .p-core-hero-full,
    .p-core-hero-split,
    .p-core-hero-video-muted {
        opacity: 1 !important;
    }

    .p-core-hero-full .wp-block-cover__image-background,
    .p-core-hero-split .wp-block-cover__image-background,
    .p-core-hero-video-muted .wp-block-cover__image-background,
    .p-core-hero-full video,
    .p-core-hero-split video,
    .p-core-hero-video-muted video {
        transform: none !important;
        transition: none !important;
    }

    .p-core-hero-full .wp-block-cover__inner-container>*,
    .p-core-hero-split .wp-block-cover__inner-container>*,
    .p-core-hero-video-muted .wp-block-cover__inner-container>* {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   No-JS Fallback
   ========================================================================== */

.no-js .js-scroll-animate,
.no-js .js-scroll-child {
    opacity: 1;
    transform: none;
}