/* Tint the scenery below its shade; let particles show above it, behind the UI. */
.river-background { z-index: -3; }
.river-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.river-light, .river-clouds, .river-particles { position: absolute; inset: 0; opacity: 0; }
.river-light, .river-clouds { z-index: -2; }
.river-particles { z-index: 0; }
.bank-hud, .reveal-zone, .hunt-controls { z-index: 1; }
[data-atmosphere-ready] .river-background { transition: filter 8s ease; }
[data-atmosphere-ready] :is(.river-light, .river-clouds, .river-particles) { transition: opacity 8s ease; }
.river-light-day:before {
  content: ''; position: absolute; inset: -12%;
  background: linear-gradient(115deg, transparent 10%, #fff1bd66 23%, transparent 35%, #fff0bc40 48%, transparent 66%);
  animation: river-sunlight 26s ease-in-out infinite;
  animation-play-state: paused;
}
[data-light="day"]:not([data-weather="rain"]) .river-light-day { opacity: 1; }
[data-light="day"]:not([data-weather="rain"]) .river-light-day:before { animation-play-state: running; }
.river-light-dawn { background: linear-gradient(155deg, #ffdba55c, #e8b4aa26 42%, transparent 75%); }
.river-light-dusk { background: linear-gradient(165deg, #ebad695e, #ad716b33 45%, #3a3b633b); }
.river-light-night { background: linear-gradient(180deg, #172c6266, #20364c40 50%, #17283b59); }
.river-clouds { background: linear-gradient(180deg, #44546866, #71838e26 65%, transparent); }
[data-light="dawn"] .river-light-dawn,
[data-light="dusk"] .river-light-dusk,
[data-light="night"] .river-light-night,
[data-weather="rain"] .river-clouds { opacity: 1; }
[data-light="dawn"] .river-background { filter: saturate(.9) brightness(.95); }
[data-light="dusk"] .river-background { filter: saturate(.85) brightness(.86); }
[data-light="night"] .river-background { filter: saturate(.65) brightness(.62); }

.river-particles i { position: absolute; display: block; animation-play-state: paused; }
.river-rain { inset: -24px -24px 0; }
.river-rain i {
  top: -28px; left: 4%; width: 1.5px; height: 27px;
  background: linear-gradient(transparent, #e8f1e3cc); border-radius: 50%;
  animation: river-rainfall 1.6s linear infinite;
  animation-play-state: paused;
}
.river-rain i:nth-child(2) { left: 11%; animation-delay: -.7s; animation-duration: 1.9s; }
.river-rain i:nth-child(3) { left: 18%; animation-delay: -1.3s; }
.river-rain i:nth-child(4) { left: 23%; animation-delay: -.3s; animation-duration: 1.8s; }
.river-rain i:nth-child(5) { left: 31%; animation-delay: -1.1s; }
.river-rain i:nth-child(6) { left: 38%; animation-delay: -.5s; animation-duration: 2s; }
.river-rain i:nth-child(7) { left: 44%; animation-delay: -1.4s; }
.river-rain i:nth-child(8) { left: 51%; animation-delay: -.9s; animation-duration: 1.8s; }
.river-rain i:nth-child(9) { left: 57%; animation-delay: -.2s; }
.river-rain i:nth-child(10) { left: 63%; animation-delay: -1.6s; animation-duration: 2s; }
.river-rain i:nth-child(11) { left: 69%; animation-delay: -.6s; }
.river-rain i:nth-child(12) { left: 74%; animation-delay: -1.2s; animation-duration: 1.9s; }
.river-rain i:nth-child(13) { left: 81%; animation-delay: -.4s; }
.river-rain i:nth-child(14) { left: 87%; animation-delay: -1.5s; animation-duration: 1.8s; }
.river-rain i:nth-child(15) { left: 93%; animation-delay: -.8s; }
.river-rain i:nth-child(16) { left: 99%; animation-delay: -1.7s; animation-duration: 2s; }
[data-weather="rain"] .river-rain { opacity: .7; }
[data-weather="rain"] .river-rain i { animation-play-state: running; }

.river-leaves i {
  top: -20px; left: 8%; width: 15px; height: 8px;
  background: #c7a45e; border: 1px solid #685d3d99; border-radius: 1px 80% 1px 80%;
  box-shadow: 0 1px 2px #302b2440;
  animation: river-leaf-drift 22s linear infinite;
  animation-play-state: paused;
}
.river-leaves i:nth-child(2) { left: 34%; width: 12px; animation-delay: -13s; animation-duration: 29s; background: #b6b77d; }
.river-leaves i:nth-child(3) { left: 62%; animation-delay: -6s; animation-duration: 25s; }
.river-leaves i:nth-child(4) { left: 83%; width: 11px; animation-delay: -20s; animation-duration: 32s; background: #a6a779; }
[data-weather="breeze"] .river-leaves { opacity: .9; }
[data-weather="breeze"] .river-leaves i { animation-play-state: running; }
.riverbank-game:not([data-light="night"])[data-weather="clear"] .river-leaves { opacity: .75; }
.riverbank-game:not([data-light="night"])[data-weather="clear"] .river-leaves i { animation-play-state: running; animation-duration: 38s; }
.riverbank-game:not([data-light="night"])[data-weather="clear"] .river-leaves i:nth-child(even) { animation-duration: 46s; }

/* A few low glimmers among the banks, with slow pulses rather than flashes. */
.river-fireflies i {
  left: 9%; top: 62%; width: 4px; height: 4px; border-radius: 50%;
  background: #fff2ad; box-shadow: 0 0 8px 3px #e6e69a80;
  animation: river-firefly 9s ease-in-out infinite;
  animation-play-state: paused;
}
.river-fireflies i:nth-child(2) { left: 19%; top: 75%; animation-delay: -4s; animation-duration: 11s; }
.river-fireflies i:nth-child(3) { left: 31%; top: 55%; width: 3px; height: 3px; animation-delay: -7s; }
.river-fireflies i:nth-child(4) { left: 73%; top: 67%; animation-delay: -2s; animation-duration: 13s; }
.river-fireflies i:nth-child(5) { left: 88%; top: 48%; width: 3px; height: 3px; animation-delay: -6s; animation-duration: 10s; }
.river-fireflies i:nth-child(6) { left: 92%; top: 79%; animation-delay: -9s; animation-duration: 14s; }
.river-fireflies i:nth-child(7) { left: 6%; top: 42%; width: 3px; height: 3px; animation-delay: -3s; animation-duration: 12s; }
.riverbank-game:is([data-light="dusk"], [data-light="night"]):not([data-weather="rain"]) .river-fireflies { opacity: .8; }
.riverbank-game:is([data-light="dusk"], [data-light="night"]):not([data-weather="rain"]) .river-fireflies i { animation-play-state: running; }
[data-atmosphere-paused] .river-particles i,
[data-atmosphere-paused] .river-light-day:before { animation-play-state: paused !important; }

@keyframes river-sunlight {
  0%, 100% { transform: translate3d(-2%, 0, 0); opacity: .65; }
  50% { transform: translate3d(2%, 0, 0); opacity: 1; }
}
@keyframes river-rainfall {
  from { transform: translate3d(12px, 0, 0) rotate(9deg); }
  to { transform: translate3d(-65px, 105vh, 0) rotate(9deg); }
}
@keyframes river-leaf-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
  10% { opacity: .8; }
  35% { transform: translate3d(25px, 35vh, 0) rotate(100deg); }
  65% { transform: translate3d(-15px, 65vh, 0) rotate(230deg); opacity: .7; }
  100% { transform: translate3d(40px, 105vh, 0) rotate(360deg); opacity: 0; }
}
@keyframes river-firefly {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0; }
  30% { opacity: .85; }
  50% { transform: translate3d(14px, -18px, 0); opacity: .25; }
  70% { opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
  .river-particles { display: none; }
}