/* 铅笔线的河：主页和水府共用。底下的水波每行一条线，左右漂，上下起伏 */
.waves { position: fixed; left: 0; right: 0; bottom: 0; height: 170px; overflow: hidden; pointer-events: none; z-index: 0; background: linear-gradient(rgba(3, 10, 13, 0), rgba(3, 10, 13, .6)); }
.waves .defs { position: absolute; }
.waves .wv { position: absolute; left: 0; will-change: transform; animation: drift 40s linear infinite, swell 9s ease-in-out infinite alternate; }
.waves path { fill: none; stroke: #a9cdd2; stroke-linecap: round; }
.waves .wv-e { bottom: 124px; opacity: .1; animation-duration: 90s, 13s; animation-direction: reverse, alternate; }
.waves .wv-e path { stroke-width: 1; stroke-dasharray: 300 40 160 60 120 40 40 40; }
.waves .wv-a { bottom: 94px; opacity: .18; animation-duration: 70s, 11s; }
.waves .wv-a path { stroke-width: 1; stroke-dasharray: 260 22 80 38; }
.waves .wv-b { bottom: 66px; opacity: .34; animation-duration: 46s, 8s; animation-direction: reverse, alternate; }
.waves .wv-b path { stroke-width: 1.3; }
.waves .wv-c { bottom: 40px; opacity: .24; animation-duration: 32s, 10s; }
.waves .wv-c path { stroke-width: 1.1; stroke-dasharray: 120 14 50 16; }
.waves .wv-d { bottom: 14px; opacity: .4; animation-duration: 24s, 7s; animation-direction: reverse, alternate; }
.waves .wv-d path { stroke-width: 1.5; }
@keyframes drift { to { transform: translateX(-1600px); } }
@keyframes swell { from { translate: 0 -3px; } to { translate: 0 3px; } }
/* 岸上那盏纸灯（铅笔线稿） */
.lamp { position: fixed; right: 7%; bottom: 8px; width: 200px; pointer-events: none; z-index: 0; transform-origin: 50% 54%; animation: bob 6.5s ease-in-out infinite; }
.lamp svg { display: block; width: 100%; height: auto; overflow: visible; }
.lamp .rf { opacity: .22; transform-box: fill-box; transform-origin: 50% 0; animation: rip 4.5s ease-in-out infinite; }
.lamp .tg { transform-box: fill-box; transform-origin: 40% 0; animation: tug 5s ease-in-out infinite alternate; }
.lamp .fl { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 2.3s ease-in-out infinite; }
.lamp .gl { animation: glow 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-5px) rotate(1.2deg); } }
@keyframes rip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.05) skewX(2deg); } }
@keyframes tug { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes flick { 0%, 100% { transform: scale(1); opacity: .95; } 22% { transform: scale(.92, 1.08); opacity: .82; } 47% { transform: scale(1.05, .94); opacity: 1; } 71% { transform: scale(.96, 1.05); opacity: .88; } }
@keyframes glow { 0%, 100% { opacity: .8; } 35% { opacity: .58; } 62% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .waves .wv, .lamp, .lamp .rf, .lamp .tg, .lamp .fl, .lamp .gl { animation: none; }
}
@media (max-width: 760px) {
  .waves { height: 130px; }
  .waves .wv-e { bottom: 96px; }
  .waves .wv-a { bottom: 72px; }
  .waves .wv-b { bottom: 50px; }
  .waves .wv-c { bottom: 28px; }
  .waves .wv-d { bottom: 6px; }
  .lamp { width: 100px; right: 3%; bottom: 14px; }
}
