.brand-mark {
  transform-origin: center;
  will-change: border-radius, transform;
  animation: wp-liquid-drop 10.5s ease-in-out infinite alternate;
}

@keyframes wp-liquid-drop {
  0% {
    border-radius: 50% 50% 45% 55% / 48% 53% 47% 52%;
    transform: rotate(-4deg) scale(1);
  }
  32% {
    border-radius: 47% 53% 51% 49% / 52% 47% 53% 48%;
    transform: rotate(-2.8deg) scale(1.014, 0.99);
  }
  68% {
    border-radius: 53% 47% 48% 52% / 46% 52% 48% 54%;
    transform: rotate(-5deg) scale(0.991, 1.013);
  }
  100% {
    border-radius: 49% 51% 54% 46% / 51% 49% 52% 48%;
    transform: rotate(-3.4deg) scale(1.008, 0.995);
  }
}

.site-footer {
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 24px;
  background: var(--wine-dark);
  clip-path: polygon(
    0 58%, 8% 47%, 16% 55%, 25% 43%, 34% 52%, 43% 46%, 52% 57%,
    61% 44%, 70% 53%, 79% 47%, 88% 56%, 96% 45%, 100% 51%,
    100% 100%, 0 100%
  );
  pointer-events: none;
  will-change: clip-path;
  animation: wine-surface 13s ease-in-out infinite alternate;
}

@keyframes wine-surface {
  0% {
    clip-path: polygon(
      0 58%, 8% 47%, 16% 55%, 25% 43%, 34% 52%, 43% 46%, 52% 57%,
      61% 44%, 70% 53%, 79% 47%, 88% 56%, 96% 45%, 100% 51%,
      100% 100%, 0 100%
    );
  }
  50% {
    clip-path: polygon(
      0 49%, 8% 55%, 16% 45%, 25% 54%, 34% 47%, 43% 57%, 52% 44%,
      61% 53%, 70% 46%, 79% 56%, 88% 45%, 96% 54%, 100% 48%,
      100% 100%, 0 100%
    );
  }
  100% {
    clip-path: polygon(
      0 54%, 8% 44%, 16% 53%, 25% 47%, 34% 57%, 43% 45%, 52% 52%,
      61% 47%, 70% 56%, 79% 43%, 88% 52%, 96% 47%, 100% 55%,
      100% 100%, 0 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark,
  .site-footer::before {
    animation: none;
  }
}