#fishpen {
    --line-length: 50px;
    width: min(500px, 75vw);
    margin: calc(2 * var(--line-length)) auto;
    cursor: url("https://zatzhing.me/pages/fish/fishing-pole64.png") 55 10, auto;
    position: relative;
}

#fishtext {
  position: absolute;
  width: 100%;
  user-select: none;
  text-align: center;
  opacity: 0.8;
  top: -1em;
}

#fishbucket {
  text-align: center;
  border: 12px gray solid;
  border-radius: 0 0 1em 1em;
  width: fit-content;
  margin: 0 auto;
  padding: 1em;
  background: linear-gradient(0deg,rgba(42, 123, 155, 0.8) 0%, rgba(65, 169, 181, 0.8) 50%);
  border-top: none;
  height: 2em;
  display: none;
}

.fish {
  opacity: 1;
  font-size: 1.5em;
  filter: hue-rotate(var(--col));
  transform: scale(var(--size));
  display: inline-block;
  color: var(--highlight-3);
}

#fishpond {
    width: 100%;
    aspect-ratio: 3;
    position: relative;
}

#fishpond-surface {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 100%;
   background: linear-gradient(129deg,rgba(42, 123, 155, 1) 0%, rgba(65, 169, 181, 1) 50%);
    position: relative;
    left: 0;
    top: var(--line-length);
    display: block;
}

line {
    position:absolute;
    width: 3px;
    height: var(--line-length);
    background-color: white;
    z-index: 3;
    transform: translateX(-1.5px);
}

splish {
    --size: 1;
    width: 0%;
    opacity: 1;
    position:absolute;
    border-radius: 100%;
    aspect-ratio: 3;
    outline: 0px solid cyan;
    z-index:1;
    transform: translate(-50%, -50%);
    animation: splash calc(1.6s * var(--size)) linear;
    animation-fill-mode: forwards;
}

bibber {
    width: 12px;
    transform: translate(-6px,-6px);
    position:absolute;
    border-radius: 100%;
    aspect-ratio: 1;
    background-color: red;
    z-index: 5;
    mask-image: url("https://zatzhing.me/pages/fish/bibmask.svg");
    mask-size: cover;
    mask-position-y: 30%;
    transition: mask-position-y 2000ms linear(0 0%, 0.1422 2.04082%, 0.4649 4.08163%, 0.8219 6.12245%, 1.1066 8.16327%, 1.2676 10.2041%, 1.3034 12.2449%, 1.2465 14.2857%, 1.143 16.3265%, 1.0362 18.3673%, 0.9556 20.4082%, 0.9138 22.449%, 0.9089 24.4898%, 0.9299 26.5306%, 0.9625 28.5714%, 0.9942 30.6122%, 1.0168 32.6531%, 1.0273 34.6939%, 1.0271 36.7347%, 1.0197 38.7755%, 1.0096 40.8163%, 1.0003 42.8571%, 0.994 44.898%, 0.9915 46.9388%, 0.992 48.9796%, 0.9945 51.0204%, 0.9976 53.0612%, 1.0003 55.102%, 1.002 57.1429%, 1.0026 59.1837%, 1.0023 61.2245%, 1.0015 63.2653%, 1.0006 65.3061%, 0.9998 67.3469%, 0.9993 69.3878%, 0.9992 71.4286%, 0.9993 73.4694%, 0.9996 75.5102%, 0.9999 77.551%, 1.0001 79.5918%, 1.0002 81.6327%, 1.0002 83.6735%, 1.0002 85.7143%, 1.0001 87.7551%, 1 89.7959%, 1 91.8367%, 0.9999 93.8776%, 0.9999 95.9184%, 0.9999 97.9592%, 1 100%),
    transform 2000ms linear(0 0%, 0.1422 2.04082%, 0.4649 4.08163%, 0.8219 6.12245%, 1.1066 8.16327%, 1.2676 10.2041%, 1.3034 12.2449%, 1.2465 14.2857%, 1.143 16.3265%, 1.0362 18.3673%, 0.9556 20.4082%, 0.9138 22.449%, 0.9089 24.4898%, 0.9299 26.5306%, 0.9625 28.5714%, 0.9942 30.6122%, 1.0168 32.6531%, 1.0273 34.6939%, 1.0271 36.7347%, 1.0197 38.7755%, 1.0096 40.8163%, 1.0003 42.8571%, 0.994 44.898%, 0.9915 46.9388%, 0.992 48.9796%, 0.9945 51.0204%, 0.9976 53.0612%, 1.0003 55.102%, 1.002 57.1429%, 1.0026 59.1837%, 1.0023 61.2245%, 1.0015 63.2653%, 1.0006 65.3061%, 0.9998 67.3469%, 0.9993 69.3878%, 0.9992 71.4286%, 0.9993 73.4694%, 0.9996 75.5102%, 0.9999 77.551%, 1.0001 79.5918%, 1.0002 81.6327%, 1.0002 83.6735%, 1.0002 85.7143%, 1.0001 87.7551%, 1 89.7959%, 1 91.8367%, 0.9999 93.8776%, 0.9999 95.9184%, 0.9999 97.9592%, 1 100%);
}

@keyframes splash {
  0% {
    width: 0%;
    opacity:1;
    outline-width: 1px;
  }

  50% {
    outline-width: 3px;
  }

  100% {
    width: calc(20% * var(--size));
    opacity: 0;
    outline-width: 0px;
  }
}

@keyframes bob {
  0% {
    width: 0%;
    opacity:1;
  }

  100% {
    width: 20%;
    opacity: 0;
  }
}

@keyframes fade-out {
  0% {
    opacity:0.8;
  }

  100% {
    opacity: 0;
  }
}