/* もや5種の落下と捕食シーケンス（§4.3 / §5 / R14 / R15）
 *
 * 時間の組み方：
 *   §4.3 は全12秒の百分率で書かれているが、R14 が「落下速度で5種を区別する」と
 *   定めているため、落下だけは種ごとに長さが変わる。よって百分率をそのまま使えない。
 *   接触時刻を原点 0 とし、§4.3 の各時刻を「接触からの秒数」に直して固定する。
 *
 *   §4.3（12秒・接触は 14% = 1.68s）→ 接触からの秒数
 *     消滅フェード  14〜20%  → 0.00 〜 0.72
 *     接触の小波紋  13〜30%  → 0.00 〜 1.92
 *     沈下          17〜33%  → 0.36 〜 2.28
 *     大波紋2重     32〜62%  → 2.16 〜 5.76（2本目は +0.29）
 *     完全静止      33〜58%  → 2.28 〜 5.28（＝3.00秒。短縮禁止）
 *     泡            54〜63%  → 4.80 〜 5.88
 *     浮上          58〜80%  → 5.28 〜 7.92
 *     水際の光復帰  80〜88%  → 7.92 〜 8.88
 *     終了          100%     → 10.32
 *   後半の総尺 D = 10.32s。以下の百分率はすべて D に対するもの。
 */

/* ---- 落下 ---- */

.moya-forming {
  opacity: .45;
  pointer-events: none;
}

.moya-forming-drift {
  transform-box: fill-box;
  transform-origin: center;
  animation: formingDrift 4.1s ease-in-out infinite;
}

.moya-forming-shape {
  transform: scale(var(--forming-scale, .42));
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes formingDrift {
  0%,100% { transform: translate(-1.5px, 1px) rotate(-2deg); }
  50%     { transform: translate(1.5px, -1px) rotate(2deg); }
}

.moya        { opacity: 1; animation: moyaVanish 0.72s linear var(--fall) forwards; }
.moya-fall   { animation: moyaFall var(--fall) ease-in forwards; }
.moya-shape  { transform-box: fill-box; transform-origin: center; }

@keyframes moyaFall   { from { transform: translateY(-150px); } to { transform: translateY(0); } }
@keyframes moyaVanish { from { opacity: 1; } to { opacity: 0; } }

/* 種ごとの落下速度（R14：区別は輪郭・質感・落下速度のみ）
 * とげ 速い ＜ ほむら ＜ みず ＜ どろ 遅い ＜ よる 一番遅い */
.m-toge   { --fall: 1.15s; }
.m-homura { --fall: 1.70s; }
.m-mizu   { --fall: 2.10s; }
.m-doro   { --fall: 2.50s; }
.m-yoru   { --fall: 3.10s; }

/* 種ごとの落下中の挙動（§5 の「動きの言語」） */
.m-toge   .moya-shape { animation: togeJitter  0.36s steps(1, end) infinite; }
.m-doro   .moya-shape { animation: doroSquash  1.90s ease-in-out    infinite; }
.m-homura .moya-shape { animation: homuraFlick 0.55s ease-in-out    infinite; }
.m-yoru   .moya-shape { animation: yoruDrift   3.40s ease-in-out    infinite; }
.m-mizu   .moya-shape { animation: mizuSway    2.40s ease-in-out    infinite; }

@keyframes togeJitter {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-14deg); }
  50%  { transform: rotate(9deg); }
  75%  { transform: rotate(-5deg); }
}
@keyframes doroSquash {
  0%,100% { transform: scale(1, 1); }
  55%     { transform: scale(1.12, 0.90); }
}
@keyframes homuraFlick {
  0%,100% { transform: rotate(-3deg); opacity: 1; }
  50%     { transform: rotate(3deg);  opacity: 0.78; }
}
@keyframes yoruDrift {
  0%,100% { transform: translateX(-1px); }
  50%     { transform: translateX(1px); }
}
@keyframes mizuSway {
  0%,100% { transform: rotate(-5deg) translateX(-1.5px); }
  50%     { transform: rotate(5deg)  translateX(1.5px); }
}

/* ---- 接触後：沈下 → 完全静止 → 浮上（R15）---- */

/* 呼吸（5.5s）と沈下は別グループに分けてある。同じ要素の transform を
 * 2つのアニメーションで奪い合わせないこと。
 *
 * キーフレームは1組だけ。遅く落ちる種で静止を伸ばす必要があるときは、
 * JS が静止の終端（51.16%）でこのアニメーションを一時停止して待つ。
 * 種ごとにキーフレームを書き分けない（書き分けると5組がずれていく）。 */
.swamp.preying .prey-sink { animation: preySink 10.32s linear forwards; }

@keyframes preySink {
  0%, 3.49%        { transform: translateY(0);
                     animation-timing-function: ease-in; }
  22.09%, 51.16%   { transform: translateY(calc(27px * var(--s)));
                     animation-timing-function: ease-out; }
  76.74%, 100%     { transform: translateY(0); }
}

/* 完全静止の3秒は呼吸とまばたきも止める。JS が付け外しする。
 * まばたきは <use> のシャドウツリー内にあるため、継承するカスタム
 * プロパティ経由で停止する（子孫セレクタは境界を越えられない）。 */
.swamp .breathe.frozen { animation-play-state: paused; }

/* 水際の光は沈下と同時に消灯し、浮上の終わりに戻る（§4.3）。
 * .rim 側の opacity は待機アニメーションが持っているので、
 * 消灯は子の path 側に掛けて掛け合わせる（R9：連動を壊さない）。 */
.swamp.preying .rim path { animation: preyRim 10.32s linear forwards; }

@keyframes preyRim {
  0%, 3.49%      { opacity: 1; }
  22.09%, 76.74% { opacity: 0; }
  86.05%, 100%   { opacity: 1; }
}

/* ---- 波紋・泡（すべて belowR クリップの内側。空へは出ない：R10）---- */

.pr        { fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pr-small  { stroke: var(--rip1); stroke-width: 1.2; animation: prSmall 1.92s ease-out backwards; }
.pr-big1   { stroke: var(--rip2); stroke-width: 1.3; animation: prBig1  3.60s ease-out backwards; }
.pr-big2   { stroke: var(--rip3); stroke-width: 1.2; animation: prBig2  3.60s ease-out backwards; }
.pr-bubble { fill: #5A6650; stroke: none; opacity: 0;
             transform-box: fill-box; transform-origin: center;
             animation: prBubble 1.08s ease-out backwards; }

@keyframes prSmall {
  0%   { transform: scale(0.35); opacity: 0; }
  25%  { opacity: 0.75; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes prBig1 {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { opacity: 0.62; }
  100% { transform: scale(1.3); opacity: 0; }
}
@keyframes prBig2 {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { opacity: 0.50; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes prBubble {
  0%   { transform: translateY(0); opacity: 0.6; }
  100% { transform: translateY(calc(-14px * var(--s))); opacity: 0; }
}