/* Quiet details over the original illustration. All coordinates use the
   1557 × 1010 SVG viewBox and scale with the existing creek canvas. */
.calm-water {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.calm-glint,
.calm-leaf {
  transform-box: view-box;
  transform-origin: 0 0;
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.calm-glint {
  fill: none;
  stroke: #f4fffc;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calm-glint--upstream {
  animation-name: calm-glint-upstream;
  animation-duration: 6.8s;
  animation-delay: -1.7s;
}
.calm-glint--midstream {
  animation-name: calm-glint-midstream;
  animation-duration: 8.2s;
  animation-delay: -4.6s;
}
.calm-glint--downstream {
  animation-name: calm-glint-downstream;
  animation-duration: 9.6s;
  animation-delay: -7.2s;
}

@keyframes calm-glint-upstream {
  0% { opacity: 0; transform: translate(0, 0); }
  24% { opacity: .30; }
  68% { opacity: .23; }
  100% { opacity: 0; transform: translate(-20px, 24px); }
}
@keyframes calm-glint-midstream {
  0% { opacity: 0; transform: translate(0, 0); }
  28% { opacity: .34; }
  72% { opacity: .24; }
  100% { opacity: 0; transform: translate(-30px, 18px); }
}
@keyframes calm-glint-downstream {
  0% { opacity: 0; transform: translate(0, 0); }
  25% { opacity: .28; }
  70% { opacity: .20; }
  100% { opacity: 0; transform: translate(-20px, 30px); }
}

.calm-leaf {
  animation-name: calm-leaf-drift;
  animation-duration: 24s;
  animation-delay: -7s;
}
@keyframes calm-leaf-drift {
  0% { opacity: 0; transform: translate(1050px, 300px) rotate(-36deg) scale(.48); }
  12% { opacity: .72; }
  25% { transform: translate(1005px, 365px) rotate(-30deg) scale(.52); }
  50% { transform: translate(935px, 430px) rotate(-24deg) scale(.57); }
  75% { transform: translate(850px, 490px) rotate(-31deg) scale(.61); }
  88% { opacity: .72; }
  100% { opacity: 0; transform: translate(760px, 530px) rotate(-22deg) scale(.65); }
}

/* Existing main.js owns background, offscreen and dialog pause state. */
html.motion-paused .calm-glint,
html.motion-paused .calm-leaf { animation-play-state: paused; }

@media (max-width: 639px) {
  .calm-glint--downstream,
  .calm-leaf { display: none; animation: none; }
}
@media (max-width: 479px) {
  .calm-glint--upstream { display: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .calm-water { display: none; }
  .calm-glint,
  .calm-leaf { animation: none; }
}