/* =============================================================
   akagi-motion.css
   akagi-futokoro 風のスクロール演出を全ページに重ねるレイヤー。
   theme.css / motion.js を破壊せず、追加のみで成立する。
   ============================================================= */

:root {
    --akagi-scroll-vel: 0;
    --akagi-scroll-progress: 0;
    --akagi-tone: var(--bg-washi);
    --akagi-tone-soft: var(--bg-washi);
    --akagi-tone-ink: var(--text-primary);
    --akagi-section-tilt: 0deg;
    --akagi-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --akagi-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --akagi-reveal-delay: 0ms;
}

/* ---- グローバルなトーン（セクション進入で色が動く） ---- */
html.akagi-ready body {
    background-color: var(--akagi-tone);
    transition: background-color 1.1s var(--akagi-ease-soft);
}

html.akagi-ready .header {
    transition:
        background-color 0.55s var(--akagi-ease-soft),
        backdrop-filter 0.55s var(--akagi-ease-soft),
        border-color 0.55s var(--akagi-ease-soft),
        box-shadow 0.55s var(--akagi-ease-soft),
        color 0.55s var(--akagi-ease-soft);
}

/* ---- ヒーロー背景: スクロール連動パララックス ----
 *      スケール・translate はスクロール量から算出した CSS 変数で表現する。
 *      手動アニメーションを併用すると transform を奪い合うため止め、
 *      奥行き感はスクロールに同期した動きで作る。                              */
html.akagi-ready:not(.akagi-reduced) body.page-home .hero::before {
    transform:
        scale(var(--hero-parallax-scale, 1.06))
        translate3d(0, var(--hero-parallax-y, 0px), 0);
    transition: transform 0.18s linear;
    will-change: transform, filter;
}

/* かすかな粒子レイヤー（タップに反応しない） */
html.akagi-ready body.page-home .hero {
    isolation: isolate;
}

html.akagi-ready body.page-home .hero::after {
    pointer-events: none;
}

html.akagi-ready body.page-home .hero .akagi-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 253, 248, 0.55), transparent 25%),
        radial-gradient(circle at 75% 65%, rgba(255, 253, 248, 0.4), transparent 22%),
        radial-gradient(circle at 50% 80%, rgba(0, 0, 0, 0.3), transparent 32%);
    mix-blend-mode: soft-light;
    animation: akagiGrainDrift 18s var(--akagi-ease-soft) infinite alternate;
}

/* ヒーローキャプション（フェードインの初期遅延を打ち消すため、2回目以降は静かに） */
html.akagi-ready body.page-home .hero-content {
    z-index: 3;
}

/* スクロール速度に応じて、ヒーローの像にぶれを足す */
html.akagi-ready:not(.akagi-reduced) body.page-home .hero::before {
    filter:
        saturate(0.86)
        contrast(1.04)
        blur(calc(var(--akagi-scroll-vel) * 0.25px));
}


@keyframes akagiGrainDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-1.6%, 1.4%, 0); }
}

/* ---- 文字スタガー出現 (data-akagi="reveal") ---- */
html.akagi-ready [data-akagi="reveal"] {
    --akagi-reveal-stagger: 32ms;
}

html.akagi-ready:not(.akagi-reduced) [data-akagi="reveal"] .akagi-char,
html.akagi-ready:not(.akagi-reduced) [data-akagi="reveal"] .akagi-word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.55em, 0) rotateX(28deg);
    transform-origin: 50% 100%;
    transition:
        opacity 0.85s var(--akagi-ease-out),
        transform 1.05s var(--akagi-ease-out);
    transition-delay: calc(var(--akagi-char-i, 0) * var(--akagi-reveal-stagger));
    will-change: transform, opacity;
}

html.akagi-ready:not(.akagi-reduced) [data-akagi="reveal"] .akagi-char.akagi-space {
    /* 半角スペースは詰めずに保持 */
    width: 0.32em;
    opacity: 1;
    transform: none;
}

html.akagi-ready:not(.akagi-reduced) [data-akagi="reveal"].akagi-revealed .akagi-char,
html.akagi-ready:not(.akagi-reduced) [data-akagi="reveal"].akagi-revealed .akagi-word {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0);
}

/* ライン分割の場合は少しゆったり */
html.akagi-ready:not(.akagi-reduced) [data-akagi="reveal-line"] .akagi-line {
    display: block;
    overflow: hidden;
}

html.akagi-ready:not(.akagi-reduced) [data-akagi="reveal-line"] .akagi-line > span {
    display: inline-block;
    transform: translate3d(0, 110%, 0);
    transition: transform 1.1s var(--akagi-ease-out);
    transition-delay: calc(var(--akagi-line-i, 0) * 90ms);
}

html.akagi-ready:not(.akagi-reduced) [data-akagi="reveal-line"].akagi-revealed .akagi-line > span {
    transform: translate3d(0, 0, 0);
}

/* ---- ピン止め背景セクション (data-akagi-pin) ---- */
.akagi-pin {
    position: relative;
    isolation: isolate;
    overflow: clip;
    color: #fffdf8;
    /* akagi-futokoro と同じく、画面いっぱい */
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(6rem, 12vw, 12rem) clamp(1.5rem, 5vw, 5rem);
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.akagi-pin::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--akagi-pin-image, none);
    background-size: cover;
    /* 固定背景 = スクロールしても画像は動かない */
    background-attachment: fixed;
    background-position: center;
    filter: saturate(0.82) contrast(1.06) brightness(0.78);
    transform: scale(calc(1.04 + var(--akagi-scroll-progress, 0) * 0.04));
    transition: transform 0.9s var(--akagi-ease-soft);
}

.akagi-pin::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.28) 38%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(90deg, rgba(33, 24, 14, 0.42), rgba(0, 0, 0, 0.2));
    pointer-events: none;
}

/* iOS Safari は background-attachment: fixed を無視するので fallback */
@supports (-webkit-touch-callout: none) {
    .akagi-pin::before {
        background-attachment: scroll;
        transform: scale(1.08) translate3d(0, calc(var(--akagi-scroll-progress, 0) * -30px), 0);
    }
}

.akagi-pin .akagi-pin-inner {
    position: relative;
    z-index: 2;
    max-width: 880px;
    width: 100%;
    text-align: center;
    color: #fffdf8;
    padding: 0 1rem;
}

.akagi-pin .akagi-pin-kicker {
    display: inline-block;
    color: #f3dfb6;
    letter-spacing: 0.42em;
    font-size: clamp(0.72rem, 0.85vw, 0.86rem);
    text-transform: uppercase;
    padding: 0.45rem 1.4rem;
    border: 1px solid rgba(243, 223, 182, 0.55);
    margin-bottom: 2rem;
}

.akagi-pin .akagi-pin-title {
    font-size: clamp(2rem, 5.4vw, 4.2rem);
    line-height: 1.5;
    letter-spacing: 0.2em;
    color: #fffdf8;
    text-shadow: 0 10px 42px rgba(0, 0, 0, 0.5);
    margin: 0 0 1.6rem;
    font-weight: 700;
}

.akagi-pin .akagi-pin-text {
    color: rgba(255, 253, 248, 0.9);
    line-height: 2.1;
    letter-spacing: 0.1em;
    max-width: 620px;
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
}

.akagi-pin .akagi-pin-rule {
    width: 1px;
    height: 56px;
    background: linear-gradient(180deg, rgba(243, 223, 182, 0), rgba(243, 223, 182, 0.85), rgba(243, 223, 182, 0));
    margin: 2.2rem auto 1.6rem;
}

/* ---- セクショントーン (data-akagi-tone) ----
   セクションが画面中央を通過したとき、bodyの背景がここに移る */
[data-akagi-tone] {
    position: relative;
}

[data-akagi-tone].akagi-tone-active {
    /* 個別装飾はJSが --akagi-tone を流すので、ここは何もしない */
}

/* セクションの縁にうっすら水平線（akagi の章境界） */
html.akagi-ready [data-akagi-tone]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 0;
    background: linear-gradient(180deg, transparent, rgba(169, 130, 65, 0.45), transparent);
    transform: translateX(-50%);
    transition: height 1.4s var(--akagi-ease-out);
}

html.akagi-ready [data-akagi-tone].akagi-tone-active::after {
    height: 64px;
}

/* ---- 横自動スクロール（一定速度で流す） ----
 *   3 セット × translate(-33.333%) でシームレスループするので、
 *   1 周終了 = 0 秒の休止で次周開始。間延びを感じさせない速度に。 */
html.akagi-ready .motion-marquee-track {
    animation-duration: 38s;
}

/* タップ／ホバー／フォーカスでも止めない（流れたまま）
   既存 theme.css の :hover / :focus-within 停止指定を !important で打ち消す */
html.akagi-ready .motion-marquee:hover .motion-marquee-track,
html.akagi-ready .motion-marquee:focus-within .motion-marquee-track,
html.akagi-ready .motion-marquee:active .motion-marquee-track {
    animation-play-state: running !important;
}

html.akagi-ready .motion-marquee {
    /* キーボード操作で止めるためのタブストップを外す */
    pointer-events: auto;
}

html.akagi-ready .motion-marquee-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(4rem, 8vw, 8rem) 0 clamp(5rem, 10vw, 10rem);
    /* 前後セクションのトーン切り替え時に body 背景が透けて見えると
       チラつくため、固定の和紙色を引いておく。装飾としての金色グロー
       のみオーバーレイ表示する。 */
    background-color: var(--bg-washi, #f8f5ee);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(169, 130, 65, 0.08), transparent 60%);
    overflow: hidden;
    isolation: isolate;
    position: relative;
    /* ピンの fixed 背景や relocate 中のレイアウトずれで一瞬空になる
       のを防ぐため、最低高を確保する */
    min-height: clamp(360px, 38vw, 540px);
}

html.akagi-ready .motion-marquee-heading {
    margin: 0 auto clamp(1.6rem, 2.6vw, 2.4rem);
    padding: 0 clamp(1.5rem, 5vw, 5rem);
    max-width: 1280px;
    color: var(--accent-gold);
    font-size: clamp(0.78rem, 0.9vw, 0.92rem);
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

/* 両端のクリップが目立たないよう、ごく細いフェードだけ当てる
   （フェードと気付かない程度。20〜40px 範囲） */
html.akagi-ready .motion-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        black clamp(16px, 1.6vw, 36px),
        black calc(100% - clamp(16px, 1.6vw, 36px)),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        black clamp(16px, 1.6vw, 36px),
        black calc(100% - clamp(16px, 1.6vw, 36px)),
        transparent 100%
    );
}

/* akagi 風: 横長アイテム。`gap` だと 33.333% 移動の境界とアイテム境界が
   ぴったり一致せず、3 セット繰り返しのループ時に微細なジャンプが起きる。
   全アイテムに同じ `margin-right` を付ければ
   「総幅 = items × (itemW + margin)」となり、translate(-33.333%) が
   ちょうど 1 セット分（items_per_set × (itemW + margin)）に一致する。 */
html.akagi-ready .motion-marquee-track {
    gap: 0;
}

html.akagi-ready .motion-marquee-item {
    flex: 0 0 clamp(240px, 30vw, 460px);
    aspect-ratio: 4 / 3;
    margin-right: clamp(1.4rem, 2.6vw, 2.6rem);
    box-shadow: 0 24px 60px rgba(33, 24, 14, 0.18);
}

html.akagi-ready .motion-marquee-item img {
    transform: scale(1.06);
    transition: transform 1.2s var(--akagi-ease-soft);
}

html.akagi-ready .motion-marquee-item figcaption {
    padding: 0.85rem 1.05rem;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    background: linear-gradient(180deg, rgba(31, 32, 29, 0) 0%, rgba(31, 32, 29, 0.78) 100%);
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    html.akagi-ready .motion-marquee-item {
        flex: 0 0 clamp(220px, 60vw, 320px);
    }
}

/* ---- 装飾レイヤーはタップ不可（タップしても何も起きない） ---- */
.akagi-grain,
.akagi-pin::before,
.akagi-pin::after,
.motion-marquee-section .motion-marquee-heading,
.akagi-decor {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---- 章ナンバー（akagi の "01 / 02" 風） ---- */
.akagi-decor-num {
    position: absolute;
    top: clamp(1.2rem, 3vw, 2.6rem);
    left: clamp(1.2rem, 3vw, 2.6rem);
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    letter-spacing: 0.4em;
    color: rgba(255, 253, 248, 0.7);
    z-index: 3;
}

/* 縦書き章タイトル（日本語ページのみ） */
html:not(.akagi-reduced) .akagi-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 2;
    letter-spacing: 0.2em;
}

/* ---- スピードライン（スクロール時に薄く流れる装飾） ---- */
.akagi-speedlines {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: calc(min(1, var(--akagi-scroll-vel) / 60) * 0.18);
    background-image:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 22px,
            rgba(169, 130, 65, 0.6) 22px,
            rgba(169, 130, 65, 0.6) 23px
        );
    mix-blend-mode: overlay;
    transition: opacity 0.35s ease;
}

/* ---- セクション進入で内容がふわっと持ち上がる ---- */
html.akagi-ready:not(.akagi-reduced) [data-akagi-rise] {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
    transition:
        opacity 1.1s var(--akagi-ease-out),
        transform 1.2s var(--akagi-ease-out);
    transition-delay: var(--akagi-reveal-delay, 0ms);
}

html.akagi-ready:not(.akagi-reduced) [data-akagi-rise].akagi-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ---- 画像の clip-path 横入り (data-akagi-clip) ---- */
html.akagi-ready:not(.akagi-reduced) [data-akagi-clip] {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.4s var(--akagi-ease-out);
}

html.akagi-ready:not(.akagi-reduced) [data-akagi-clip].akagi-revealed {
    clip-path: inset(0 0 0 0);
}

/* ---- アクセシビリティ: 動きを抑えたいユーザー ---- */
@media (prefers-reduced-motion: reduce) {
    html.akagi-ready [data-akagi="reveal"] .akagi-char,
    html.akagi-ready [data-akagi="reveal"] .akagi-word,
    html.akagi-ready [data-akagi-rise],
    html.akagi-ready [data-akagi-clip] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    .akagi-pin::before {
        background-attachment: scroll;
        transform: none;
    }
    .akagi-grain,
    .akagi-speedlines {
        display: none;
    }
}

/* ---- 小さめ画面の調整 ---- */
@media (max-width: 768px) {
    .akagi-pin {
        min-height: clamp(440px, 80vh, 640px);
    }
    .akagi-pin::before {
        background-attachment: scroll;
    }
    .akagi-decor-num {
        font-size: 0.7rem;
    }
}

/* ---- 既存のページにもう少し akagi 風の余白 ---- */
html.akagi-ready .page-home section.content-intro {
    padding-top: clamp(7rem, 12vw, 11rem);
}

html.akagi-ready .page-home .intro-lead .section-title {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.75;
}

/* ヒーローのスクロールサインを akagi 風に細く */
html.akagi-ready body.page-home .scroll-indicator {
    letter-spacing: 0.42em;
    font-size: 0.68rem;
    color: rgba(255, 253, 248, 0.78);
}

html.akagi-ready body.page-home .scroll-indicator::after {
    height: 56px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.7), rgba(255, 253, 248, 0));
}