/**
 * イノーの水面 ── 再生中の「いま」（Issue #194）
 *
 * 一覧（archive-roudoku.php）と個別（single-roudoku.php）の両方から読まれるので
 * components/ に置く（css/components/roudoku-reel.css と同じ置き方）。
 *
 * ■ 何を見せているか
 *
 * ミンサーの帯が「どこまで来たか＝時間」を担っているので、水面は「いま声が出ているか、
 * その強さ」だけを担う。二役にすると、どちらも読めなくなる。
 *
 * 朗読は「間」でできている。語り15本の発話占有率は中央値76%（65〜84%）で、残りの
 * 24%は息と間だった。水面が止まっている時間がその24%そのものになる。
 *
 * ■ 無音＝一本の線
 *
 * 水面は凪の線（.rd__inou-calm）1本と、そこから上下に開く風紋（.rd__inou-wind）4本で
 * できている。風紋の開き幅も濃さも --rd-level（0〜1・JSが毎フレーム書く）だけで
 * 決まるので、声が止まれば風紋は自分から中央へ畳まれ、水面は一本の静かな線に戻る。
 * ＝ 凪ぐ。JSが動かないとき（音が取れない・そもそも読まれていない）も、
 * その一本の線が残るだけで面は成立する。
 *
 * ■ 色
 *
 * イノー＝リーフの内側の浅い海。サイトの色はそこから名前が付いている
 * （--c-cyan-500 イノーの海 / --c-cyan-300 浅瀬 / --c-navy-900 夜のイノー）。
 * 新しい色は足していない。使うのは --accent / --bg-inset / --bg-inset-strong だけで、
 * ダーク/ライトは :root の再マップに自動追従する（ここにダーク専用ブロックは書かない）。
 *
 * ■ 静かであること
 *
 * 声を聴く邪魔をしないこと。開きは振り切って中央から9px、濃さは 0.5 まで。
 * 大きく波打たせない。書き換えるのは --rd-level ひとつで、流し込む先は transform と
 * opacity だけ——毎フレームのレイアウトは起きない。
 */

.rd__inou {
    /* JS が毎フレーム書き換える唯一の値。0＝凪、1＝いちばん強い声。
       JS が動いていないときは 0 のまま＝凪の線が1本あるだけになる */
    --rd-level: 0;

    position: relative;
    height: 30px;
    margin-top: 16px;
    border-radius: var(--radius-input);
    background: var(--bg-inset);
    overflow: hidden;   /* 風紋は横へ流れるぶん親より広いので、ここで切る */
}

/* 凪の線。水面そのもの。音があってもなくても消えない */
.rd__inou-calm {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    margin-top: -0.5px;
    background: var(--accent);
    opacity: 0.4;
}

/* 鳴っているあいだは凪の線をわずかに濃くする。
   動きを止める設定（下の @media）では、これが「再生中である」の唯一の印になる */
.rd__inou.is-sounding .rd__inou-calm {
    opacity: 0.7;
}

/* 風紋。中央の線から上下に開く。
   外側が開き（translateY）、内側が横の流れ（translateX）——transform を
   1要素で二役させると片方しか効かないので入れ子にしてある。
   どちらも合成だけで済む変形なので、毎フレーム走ってもレイアウトは起きない。 */
.rd__inou-wind {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    opacity: calc(var(--rd-level) * 0.5);
    /* 開きは中央から最大7px。大きく波打たせない */
    transform: translateY(calc(var(--rd-level) * var(--rd-inou-spread, 0px)));
}

/* 上下2本ずつ。中央に近い2本は浅く、外の2本は深く開く。
   語りのふつう（--rd-level 0.4前後）で中央から1.8px／3.6px しか開かない——
   声を聴く邪魔をしないための寸法で、振り切って初めて面の高さいっぱいになる。 */
.rd__inou-wind--a { --rd-inou-spread: -4px; }
.rd__inou-wind--b { --rd-inou-spread:  4px; }
.rd__inou-wind--c { --rd-inou-spread: -9px; }
.rd__inou-wind--d { --rd-inou-spread:  9px; }

/* 外の2本は淡く。水面が中央から外へほどけて浅くなっていくように見せる。
   色は4本とも --accent のまま——一度 --accent-light（浅瀬）に振ってみたが、
   ライトの淡い地では 0.3 の不透明度と重なってほぼ消えてしまい、
   ダークでだけ見える線になった。深さの差は色ではなく濃さで出す。 */
.rd__inou-wind--c,
.rd__inou-wind--d {
    opacity: calc(var(--rd-level) * 0.28);
}

/* 風紋の柄。切れ目のある筋が横へ流れる＝風が水面を渡っていく。
   親より 48px 広く取ってあるのは、48px 動かしたところで柄が一巡して
   継ぎ目なく繰り返すため（柄の周期＝48px）。
   筋の端は硬く切らずに透明へ溶かす。角のある破線は水ではなく罫線に見える。 */
.rd__inou-wind > span {
    position: absolute;
    top: 0;
    left: -48px;
    right: -48px;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        var(--accent) var(--rd-inou-a, 8px),
        var(--accent) var(--rd-inou-b, 24px),
        transparent var(--rd-inou-c, 32px),
        transparent 48px
    );
    animation: rd-inou-drift 9s linear infinite;
}

/* 4本の筋の切れ目が縦に揃うと、水面ではなく破線の束に見える。
   周期は 48px のまま（継ぎ目を出さないため）で、筋の長さと位相を1本ずつずらす。
   速さと向きも変える——同じ向き・同じ速さで流れるとベルトコンベアになる。 */
.rd__inou-wind--a > span { --rd-inou-a:  9px; --rd-inou-b: 26px; --rd-inou-c: 34px; }
.rd__inou-wind--b > span { --rd-inou-a:  4px; --rd-inou-b: 15px; --rd-inou-c: 21px;
                           animation-duration: 13s; animation-direction: reverse; }
.rd__inou-wind--c > span { --rd-inou-a: 19px; --rd-inou-b: 40px; --rd-inou-c: 46px;
                           animation-duration: 17s; animation-delay: -4s; }
.rd__inou-wind--d > span { --rd-inou-a: 13px; --rd-inou-b: 22px; --rd-inou-c: 29px;
                           animation-duration: 11s; animation-delay: -7s; animation-direction: reverse; }

@keyframes rd-inou-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(48px); }
}

/* ================================
   一覧の行に敷く細い水面
   ================================
   行は語りで約72px、あいだの音では50px弱しかない。ここは1本を聴く場所ではなく
   25本を通す器なので、水面も面を持たず線だけにする。
   下端はミンサーの進行帯（.rd__progress＝時間）が使っているので、水面は上端に置く。
   上が音、下が時間——役割が上下で分かれる。 */

.rd__inou--slim {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 9px;
    margin-top: 0;
    border-radius: 0;
    background: none;   /* 行そのものの地（.is-playing の --bg-inset）に乗せる */
}

/* 開きは中央から最大2.5px。行の高さに対してこれ以上出すと、目録が騒がしくなる */
.rd__inou--slim .rd__inou-wind--a { --rd-inou-spread: -1.5px; }
.rd__inou--slim .rd__inou-wind--b { --rd-inou-spread:  1.5px; }
.rd__inou--slim .rd__inou-wind--c { --rd-inou-spread: -3px; }
.rd__inou--slim .rd__inou-wind--d { --rd-inou-spread:  3px; }

/* 行では凪の線を出さない。鳴っていない行に水面は要らず、鳴っている行は
   地の色と通し番号の塗り（.rd__track.is-playing .rd__no）が既に示している */
.rd__inou--slim .rd__inou-calm {
    display: none;
}

/* ================================
   レスポンシブ
   ================================ */

@media (max-width: 768px) {
    .rd__inou {
        height: 26px;
        margin-top: 14px;
    }

    /* 面が低くなるぶん、開きも詰める */
    .rd__inou:not(.rd__inou--slim) .rd__inou-wind--c { --rd-inou-spread: -7.5px; }
    .rd__inou:not(.rd__inou--slim) .rd__inou-wind--d { --rd-inou-spread:  7.5px; }
}

/* ================================
   動きを止める
   ================================
   これは必須。止めたときも「再生中である」ことは分かるようにする。

   止まるもの … 風紋（横へ流れる筋・上下の開き）。要素ごと出さない
   残るもの   … 凪の線。鳴っているあいだは濃く太くなり、面の地も一段濃くなる
                （一覧の行は、地の色と通し番号の塗りが既に示しているので水面を出さない）

   時間の進みはミンサーの帯（.rd__progress）が担っていて、そちらは元から
   アニメーションではないので、この設定でも失われない。 */

@media (prefers-reduced-motion: reduce) {
    .rd__inou-wind {
        display: none;
    }

    .rd__inou-wind > span {
        animation: none;
    }

    .rd__inou.is-sounding {
        background: var(--bg-inset-strong);
    }

    .rd__inou.is-sounding .rd__inou-calm {
        height: 2px;
        margin-top: -1px;
        opacity: 1;
    }

    /* 行の水面は出さない。行の地と通し番号の塗りで足りる */
    .rd__inou--slim {
        display: none;
    }
}