/* 目撃ぬしの出現（§6 / R17）
 * 出現時間 4〜6秒は JS が animation-duration で与える。
 * 浮上・保持・沈降の配分だけをここで固定する。 */

.wit {
  animation-name: witSurface;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

@keyframes witSurface {
  0%   { transform: translateY(30px); opacity: 0; }
  6%   { opacity: 1; }
  22%  { transform: translateY(0); }
  78%  { transform: translateY(0); opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}

/* 浮上・沈降の波紋。belowR クリップの内側に置く（R10）。
 * 拡大するので transform-box を明示する。省くと軸が viewBox 中心に飛ぶ。 */
.wr {
  fill: none;
  stroke: #525E49;
  stroke-width: 1.1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: witRipple 1.6s ease-out backwards;
}

@keyframes witRipple {
  0%   { transform: scale(0.4); opacity: 0; }
  30%  { opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 0; }
}

.wit-slits line { opacity: 0.85; }

/* 生き物である証拠だけを残す微動。形状パスは変えず、外側の呼吸と内側の
 * 表面位相を別要素に分ける（R21）。全種同じ振幅で、周期だけをずらす。 */
.wit-life,
.wit-skin {
  transform-box: fill-box;
  transform-origin: center bottom;
  will-change: transform;
}
.wit-life { animation: witLifeA 13.7s cubic-bezier(.45,.03,.38,.98) infinite; }
.wit-life.wl0 { animation-duration: 11.3s; }
.wit-life.wl1 { animation-duration: 13.7s; }
.wit-life.wl2 { animation-name: witLifeB; animation-duration: 17.3s; }
.wit-life.wl3 { animation-name: witLifeB; animation-duration: 19.1s; }
.wit-skin { animation: witSkinA 23s ease-in-out infinite; }
.wit-skin.ws0 { animation-duration: 23s; }
.wit-skin.ws1 { animation-name: witSkinB; animation-duration: 29s; }
.wit-skin.ws2 { animation-duration: 31s; }
.wit-skin.ws3 { animation-name: witSkinB; animation-duration: 37s; }

@keyframes witLifeA {
  0%,100% { transform: translate(0,0) scale(1,1); }
  27%     { transform: translate(.25px,-.35px) scale(1.006,.996); }
  58%     { transform: translate(-.3px,.2px) scale(.995,1.004); }
  81%     { transform: translate(.12px,-.15px) scale(1.002,.999); }
}
@keyframes witLifeB {
  0%,100% { transform: translate(0,0) scale(1,1); }
  24%     { transform: translate(-.22px,.18px) scale(.996,1.004); }
  61%     { transform: translate(.3px,-.32px) scale(1.005,.997); }
  84%     { transform: translate(-.1px,.1px) scale(.999,1.002); }
}
@keyframes witSkinA {
  0%,100% { transform: skewX(-.45deg) scaleX(1); }
  47%     { transform: skewX(.55deg) scaleX(1.004); }
}
@keyframes witSkinB {
  0%,100% { transform: skewX(.5deg) scaleX(1); }
  53%     { transform: skewX(-.4deg) scaleX(.996); }
}

/* 図鑑では小さな表示でも生体反応が読めるよう、輪郭を変えず微動だけを一段上げる。 */
.wit-card .wit-life.wl0 { animation: witCardLifeA 8.9s cubic-bezier(.45,.03,.38,.98) infinite; }
.wit-card .wit-life.wl1 { animation: witCardLifeA 11.3s cubic-bezier(.45,.03,.38,.98) infinite; }
.wit-card .wit-life.wl2 { animation: witCardLifeB 13.7s cubic-bezier(.45,.03,.38,.98) infinite; }
.wit-card .wit-life.wl3 { animation: witCardLifeB 17.3s cubic-bezier(.45,.03,.38,.98) infinite; }
.wit-card .wit-skin.ws0 { animation: witCardSkinA 13.1s ease-in-out infinite; }
.wit-card .wit-skin.ws1 { animation: witCardSkinB 17.9s ease-in-out infinite; }
.wit-card .wit-skin.ws2 { animation: witCardSkinA 19.7s ease-in-out infinite; }
.wit-card .wit-skin.ws3 { animation: witCardSkinB 23.3s ease-in-out infinite; }

@keyframes witCardLifeA {
  0%,100% { transform: translate(0,0) scale(1,1); }
  28%     { transform: translate(.45px,-.5px) scale(1.014,.991); }
  61%     { transform: translate(-.5px,.3px) scale(.989,1.011); }
  83%     { transform: translate(.18px,-.2px) scale(1.005,.997); }
}
@keyframes witCardLifeB {
  0%,100% { transform: translate(0,0) scale(1,1); }
  25%     { transform: translate(-.4px,.28px) scale(.991,1.012); }
  59%     { transform: translate(.52px,-.46px) scale(1.013,.992); }
  86%     { transform: translate(-.16px,.14px) scale(.997,1.004); }
}
@keyframes witCardSkinA {
  0%,100% { transform: skewX(-1deg) scaleX(.996); }
  48%     { transform: skewX(1.1deg) scaleX(1.01); }
}
@keyframes witCardSkinB {
  0%,100% { transform: skewX(1.05deg) scaleX(1.006); }
  52%     { transform: skewX(-.95deg) scaleX(.99); }
}

/* 同じ輪郭を水面下で反転し、薄く分断する。接点の装飾線は置かない。 */
.wit-reflection { opacity: .24; }
.wit-reflection-break {
  fill: none;
  stroke: #39412F;
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: .82;
}
.wit-reflection-break.rb1 { stroke-width: 2.3; opacity: .72; }

.wit-ripple,
.wit-water-glimmer {
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
}
.wit-ripple {
  stroke: #59654F;
  stroke-width: .7;
  opacity: .18;
}
.wit-ripple.wr0 { animation: witCardRippleA 7.1s ease-in-out infinite; }
.wit-ripple.wr1 { animation: witCardRippleB 9.7s ease-in-out infinite; }

@keyframes witCardRippleA {
  0%,100% { transform: scaleX(.88) translateY(.3px); opacity: .11; }
  51%     { transform: scaleX(1.12) translateY(-.3px); opacity: .32; }
}
@keyframes witCardRippleB {
  0%,100% { transform: scaleX(1.11) translateY(-.25px); opacity: .28; }
  47%     { transform: scaleX(.89) translateY(.3px); opacity: .10; }
}

.wit-water-glimmer {
  stroke: #6B7860;
  stroke-width: .45;
  stroke-linecap: round;
  stroke-dasharray: 5 8;
  opacity: .12;
}
.wit-water-glimmer.wg0 { animation: witWaterGlimmerA 13.7s ease-in-out infinite; }
.wit-water-glimmer.wg1 { animation: witWaterGlimmerB 17.3s ease-in-out infinite; }

@keyframes witWaterGlimmerA {
  0%,100% { transform: translateX(-2px); opacity: .07; stroke-dashoffset: 0; }
  52%     { transform: translateX(2px); opacity: .18; stroke-dashoffset: 7; }
}
@keyframes witWaterGlimmerB {
  0%,100% { transform: translateX(1.7px); opacity: .14; stroke-dashoffset: 5; }
  48%     { transform: translateX(-1.7px); opacity: .05; stroke-dashoffset: -3; }
}

.wit-touch-ripple {
  fill: none;
  stroke: #738069;
  stroke-width: .7;
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: witTouchRipple 3.8s ease-out forwards;
}

@keyframes witTouchRipple {
  0%   { transform: scale(.28); opacity: 0; }
  18%  { opacity: .38; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* 図鑑カード。全種同一枠・同一サイズ。序列を作らない。 */
.wit-card { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  .wit-life, .wit-skin, .wit-ripple, .wit-water-glimmer { animation: none; }
  .wit-touch-ripple { animation-duration: .8s; }
}