/*
 * ClearStra 子テーマ — 軽量モーション（控えめ・BtoB トーン）
 *   1) スクロール出現（reveal）  2) ヒーロー演出（.is-hero）  3) カードのホバー
 *
 * 方針:
 *   - transform / opacity のみを使い、レイアウトシフト（CLS）を出さない。
 *   - 初期 hidden は html.reveal-ready（reveal.js が付与）配下にのみ適用。
 *     → JS 無効時は通常表示のまま（コンテンツが隠れ残らない）。
 *   - prefers-reduced-motion: reduce では全アニメを無効化し全表示。
 */

/* ============ 1) スクロール出現（reveal） ============ */
html.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}
html.reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ============ 2) ヒーロー（.is-hero）＝画像背景＋さりげない Ken-Burns ============ */
/* 3層構成: ::before=画像（緩やかにズーム）／::after=可読性オーバーレイ／本文=前面。
 *   transform(scale) のみで動かす＝GPU合成・CLSなし。往復(alternate)で継ぎ目なし。
 *   将来: ::before を <video> 背景に差し替え可能（poster=hero.jpg）。 */
.is-hero {
    position: relative;
    overflow: hidden;          /* 拡大時の縁切れ・横スクロール防止 */
    isolation: isolate;
    background: #14304a !important;  /* 画像未配信時のフォールバック */
}
/* 画像レイヤー（最背面）＝ここをゆっくり拡大 */
.is-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("/wp-content/uploads/hero/hero.jpg") center center / cover no-repeat;
    transform: scale(1);
    will-change: transform;
}
/* 可読性オーバーレイ（中間層・PC=左濃の横グラデ） */
.is-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8,18,30,0.86) 0%, rgba(8,18,30,0.55) 45%, rgba(8,18,30,0.20) 100%);
}
/* 本文（最前面・可読性維持） */
.is-hero > * {
    position: relative;
    z-index: 2;
}
/* さりげない Ken-Burns（44秒で 1.00→1.06 を往復＝ごく緩やか） */
@media (prefers-reduced-motion: no-preference) {
    .is-hero::before {
        animation: scievia-kenburns 44s ease-in-out infinite alternate;
    }
}
@keyframes scievia-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}
/* スマホ: 中央の明部を避けて左寄りクロップ＋上を濃くして見出しを守る */
@media (max-width: 781px) {
    .is-hero::before {
        background-position: 20% center;
    }
    .is-hero::after {
        background: linear-gradient(180deg, rgba(8,18,30,0.92) 0%, rgba(8,18,30,0.62) 55%, rgba(8,18,30,0.42) 100%);
    }
}

/* 読み込み時の控えめな fade-up（見出し→段落→ボタンの順に少しずつ） */
@media (prefers-reduced-motion: no-preference) {
    .is-hero .wp-block-heading,
    .is-hero > .wp-block-group > .wp-block-heading,
    .is-hero p,
    .is-hero .wp-block-buttons {
        animation: scievia-hero-in 0.7s ease both;
    }
    .is-hero p { animation-delay: 0.12s; }
    .is-hero .wp-block-buttons { animation-delay: 0.24s; }
}
@keyframes scievia-hero-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ============ 3) 背景付きカードのホバー（控えめな浮き） ============ */
@media (prefers-reduced-motion: no-preference) {
    .wp-block-column.has-background {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .wp-block-column.has-background:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 20px rgba(26, 61, 92, 0.10);
    }
}

/* ============ アクセシビリティ：動きを減らす設定では全無効・全表示 ============ */
@media (prefers-reduced-motion: reduce) {
    html.reveal-ready .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .is-hero .wp-block-heading,
    .is-hero p,
    .is-hero .wp-block-buttons {
        animation: none !important;
    }
    .is-hero::before {
        animation: none !important;
        transform: none !important;
    }
}

/* ============ 4) スムーズスクロール（Lenis）推奨スタイル ============ */
/* Lenis 有効時のみ html.lenis が付く（reduced-motion では付かない＝ネイティブ）。 */
html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-smooth iframe {
    pointer-events: none;
}