/*
Web made by Ondis

          ______
     ____|_[]__|_
    |  _        _|
    '-(O)======(o)'
*/

.salers-footer {
  position: relative;
}
.salers-peek {
  position: absolute;
  right: clamp(28px, 9vw, 160px);
  top: 0;
  width: 104px;
  z-index: 2;
}
.salers-window {
  height: 100px;
  overflow: hidden;
  padding: 4px;
}
.salers-cow {
  display: block;
  width: 96px;
  height: 96px;
  border: 3px solid var(--gold-light);
  border-radius: 50%;
  cursor: pointer;
  background: #557145 url("/img/hero-img-1-web.png") 70% 41% / 560px auto no-repeat;
  translate: 0 42px;
  box-shadow: 0 4px 14px #0003;
}
.salers-window:hover .salers-cow,
.salers-window:focus-within .salers-cow,
.salers-cow[aria-expanded="true"] {
  translate: 0 0;
}
.salers-greeting {
  position: absolute;
  right: 0;
  bottom: 110px;
  width: 210px;
  padding: 13px 16px;
  border-radius: 16px 16px 4px 16px;
  background: var(--gold-pale);
  color: var(--dark);
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 5px 20px #0002;
}
.salers-greeting[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .salers-cow {
    transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .salers-peek.is-spotted .salers-cow {
    animation: salers-hello 1.6s ease-in-out;
  }
  .salers-greeting:not([hidden]) {
    animation: salers-greeting 0.25s ease-out;
  }
}
@keyframes salers-hello {
  0%,
  100% {
    translate: 0 42px;
  }
  40%,
  65% {
    translate: 0 4px;
    rotate: -5deg;
  }
}
@keyframes salers-greeting {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}