/* 清渟 Logo 图形：借"蜻蜓"谐音(三点水) + 蜻蜓点水(虫字旁动物形象+水面波纹)。
   注意：品牌文字永远写"清渟"(三点水)，此处"蜻蜓"仅指图形是昆虫蜻蜓的样子。 */
.df{ width:100%; height:100%; overflow:visible; }
/* 翅膀扇动：图形蜻蜓的两对翅膀绕中轴线(x=50)同时上下拍动(同相)。
   用 scaleY 让翅膀整体上下伸缩 → 中轴线不动，是"上下摆"不是"左右摆"。 */
.df .wing{ transform-box: fill-box; transform-origin: 50px 44px; }
.df .wing-l{ animation: flap 2.4s ease-in-out infinite alternate; }
.df .wing-r{ animation: flap 2.4s ease-in-out infinite alternate; }
@keyframes flap{
  0%   { transform: scaleY(1.18); }
  100% { transform: scaleY(.82); }
}
/* 整体保持静止：图形蜻蜓稳停，仅翅膀上下扇动，身体中轴线不动 */
.df-hover .df{ /* 不加整体位移，避免与上下扇动混淆 */ }
/* 身体发光呼吸（用 opacity 呼吸，避免嵌套 filter 动画导致的合成竞态/雾蒙） */
.df .body{ animation: glow 3.6s ease-in-out infinite; }
@keyframes glow{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }

/* 水面：静水微光呼吸 + 蜻蜓点水涟漪扩散 (绝对坐标轴心) */
.df .water-base{ animation: waterBreath 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes waterBreath{ 0%,100%{ opacity:.45; transform: scaleX(1); } 50%{ opacity:.8; transform: scaleX(1.05); } }
.df .ripple{ animation: rippleOut 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.df .ripple-2{ animation-delay: 1.4s; }
.df .ripple-3{ animation-delay: 2.8s; }
@keyframes rippleOut{
  0%   { transform: scale(.15); opacity:0; }
  15%  { opacity:.85; }
  70%  { opacity:.25; }
  100% { transform: scale(7);   opacity:0; }
}