/* ============================================================
   Surge — 満ち引きインタラクション（リップルの代替・共有）
   押下で内側から色が満ち（fill）、離して一拍でその場に引く（drain）。
   方向： 既定は下から上（肯定）。data-surge="down" で上から下（破壊・退場）。
   配線は js/catalog.js。色は署名色 --brand を既定とし、
   ローカルに --surge-tint を渡せば分類色に追従する。
   ============================================================ */

[data-surge] { position: relative; overflow: hidden; isolation: isolate; }
[data-surge] > * { position: relative; z-index: 1; }

.surge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  transform-origin: bottom; transform: scaleY(0); opacity: 0;
  z-index: 0; pointer-events: none;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

/* 破壊・退場：上から引く */
[data-surge="down"] .surge {
  top: 0; bottom: auto; transform-origin: top;
  background: color-mix(in srgb, var(--err) 13%, transparent);
}

/* 分類色に追従させたい部品はローカル変数で上書き */
[style*="--surge-tint"] .surge { background: color-mix(in srgb, var(--surge-tint) 16%, transparent); }