/* Geniş ekran parkı: ufuk, gölet ve ördekler, ev, çit, uzak ağaçlar, çalılar */
/* ---------- Genis ekranda park ---------- */
.wide, .wide-lg { display: none; }
@keyframes ripple { 0% { transform: scale(.6); opacity: .55 } 100% { transform: scale(1.5); opacity: 0 } }
@keyframes swim { 0%,100% { transform: translateX(0) } 50% { transform: translateX(38px) } }
@keyframes duckbob { 0%,100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-2.5px) rotate(2deg) } }
@keyframes smoke { 0% { opacity: 0; transform: translate(0,0) scale(.6) } 25% { opacity: .5 } 100% { opacity: 0; transform: translate(-14px,-46px) scale(1.5) } }

.horizon { position: absolute; left: -4%; right: -4%; bottom: calc(100% - 34px); height: 152px; pointer-events: none; z-index: -7; }
.horizon svg { position: absolute; left: 0; width: 100%; }
.horizon .range { bottom: 38px; height: 118px; }
.horizon .range.back  { z-index: 1; opacity: .85; }
.horizon .range.front { z-index: 2; opacity: .9; }
.horizon .field { bottom: 0; height: 66px; }
.horizon .field.far  { z-index: 3; }
.horizon .field.near { z-index: 4; }

.pond   { position: absolute; left: 56%; bottom: calc(100% - 90px); width: 286px; z-index: 1; }
.pond .ripple { transform-box: fill-box; transform-origin: center; animation: ripple 4.5s ease-out infinite; }
.pond .duck    { transform-box: fill-box; transform-origin: center; animation: duckbob 2.6s ease-in-out infinite; }
/* Ördekler: yüzüp döner, başını suya daldırır, kuyruk sallar */
.pond .swimmer { transform-box: fill-box; transform-origin: 50% 50%; cursor: pointer; }
.pond .sw1 { animation: swimA 22s ease-in-out infinite; }
.pond .sw2 { animation: swimB 26s ease-in-out -13s infinite; }
@keyframes swimA {
  0%   { transform: translateX(0) scaleX(1) }
  44%  { transform: translateX(40px) scaleX(1) }
  50%  { transform: translateX(40px) scaleX(-1) }
  94%  { transform: translateX(0) scaleX(-1) }
  100% { transform: translateX(0) scaleX(1) }
}
@keyframes swimB {
  0%   { transform: translateX(0) scaleX(-1) }
  44%  { transform: translateX(-52px) scaleX(-1) }
  50%  { transform: translateX(-52px) scaleX(1) }
  94%  { transform: translateX(0) scaleX(1) }
  100% { transform: translateX(0) scaleX(-1) }
}
.pond .head { transform-box: fill-box; transform-origin: 8% 100%; animation: dabble 7s ease-in-out infinite; }
@keyframes dabble {
  0%, 62%, 100% { transform: none }
  68%  { transform: rotate(62deg) translateY(4px) }
  80%  { transform: rotate(62deg) translateY(4px) }
  86%  { transform: rotate(-6deg) }
  90%  { transform: none }
}
.pond .tail { transform-box: fill-box; transform-origin: 100% 60%; animation: tailwag .5s ease-in-out infinite alternate; }
@keyframes tailwag { from { transform: rotate(-14deg) } to { transform: rotate(14deg) } }
.pond .wing { transform-box: fill-box; transform-origin: 20% 50%; }
.pond .wake { transform-box: fill-box; transform-origin: 50% 50%; animation: wake 2.4s ease-out infinite; }
@keyframes wake { 0% { opacity: .7; transform: scaleX(.5) } 100% { opacity: 0; transform: scaleX(1.25) } }
.pond .ling { animation-duration: 1.6s; }
@keyframes wingflap { 0%,100% { transform: none } 25%,75% { transform: rotate(-38deg) scaleY(1.3) } 50% { transform: rotate(-12deg) } }
@keyframes quackhead { 0%,100% { transform: none } 30% { transform: rotate(-18deg) } 60% { transform: rotate(-8deg) } }
.pond .swimmer.quack .duck:not(.ling) .wing { animation: wingflap .35s ease-in-out 3; }
.pond .swimmer.quack .duck:not(.ling) .head { animation: quackhead .4s ease-in-out 2; }
.pond .splash { transform-box: fill-box; transform-origin: center; animation: splash .8s ease-out forwards; }
@keyframes splash { from { opacity: .9; transform: scale(.3) } to { opacity: 0; transform: scale(1.8) } }
.house  { position: absolute; left: 26%; bottom: calc(100% - 26px); width: 104px; z-index: -1; }
.house .smoke circle { animation: smoke 4.5s ease-out infinite; }
.fence  { position: absolute; left: 40%; bottom: calc(100% - 22px); width: 180px; z-index: -2; }
.far-tree { position: absolute; z-index: -3; }
.far-tree.f1 { left: 19%; bottom: calc(100% - 10px); width: 84px; }
.far-tree.f2 { right: 16%; bottom: calc(100% - 6px); width: 68px; }
.far-tree.f3 { left: 45%; bottom: calc(100% - 8px); width: 58px; }
.bush { position: absolute; bottom: calc(100% - 26px); z-index: -1; }
.bush.b1 { left: 12%; width: 62px; }
.bush.b2 { right: 12%; width: 52px; }
.bush.b3 { left: 51%; width: 46px; }
.night .pond, .night .house, .night .fence, .night .far-tree, .night .bush { filter: brightness(.55) saturate(.6); }
.night .pond .sun-glint { opacity: 0; }
.night .horizon .range.back path { fill: #35325A; }
.night .horizon .range.front path { fill: #201E36; }
.night .horizon .range.front .ridge-highlight { fill: #C9C6E6; opacity: .18; }
.night .horizon .field.far path { fill: #2B3A2E; }
.night .horizon .field.near path { fill: #1F2A24; }

@media (min-width: 1000px) { .wide { display: block; } }
@media (min-width: 1280px) { .wide-lg { display: block; } }
@media (min-width: 1500px) {
  .pond { width: 340px; left: 57%; }
  .house { width: 118px; }
}