/* ================================
   Frog footprints layer (header)
   ================================ */
.vine-h1-container{
  position: relative;
  overflow: visible;
}

/* footprints layer (behind GRAPEVINE + menu) */
.frog-footprints{
  position: absolute;
  top: var(--vine-top, -80px);
  left: var(--vine-left, 50px);
  width: var(--vine-w, 400px);
  height: var(--vine-h, 300px);
  pointer-events: none;
  z-index: 0;
  opacity: var(--vine-opacity, 0.70);
}

/* ensure logo + nav stay above */
.vine-h1-container .site-logo,
.vine-h1-container nav.main-menu,
.vine-h1-container .hamburger{
  position: relative;
  z-index: 2;
}

/* each stamp */
.frog-footprint-stamp{
  position: absolute;
  transform-origin: center;
  opacity: 1;
  will-change: transform, opacity;
}

.frog-footprint-stamp svg{
  display: block;
  width: 255px;
  height: 205px;
  opacity: 1; /* lighter */
}

/* animation */
@keyframes frogPrint {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(0); }
  18%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(var(--s)); }
  70%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(0); }
}