.hvp-stamp {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9999;

  /* Maximalgröße wie gewünscht */
  width: min(175px, 28vw);
  height: auto;

  /* bessere Performance */
  will-change: transform, opacity;
  transform-origin: 50% 50%;

  /* Startzustand */
  opacity: 0;

  /* Animation */
  animation: hvp-stamp-in 2.15s both;
  /* "snappy" mit Auslauf */
  animation-timing-function: cubic-bezier(0.12, 0.85, 0.22, 1);
}

.hvp-stamp img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* damit er nicht nervt */
}

/* Einblenden: aus Punkt heraus + Rotation wird langsamer */
@keyframes hvp-stamp-in {
  0% {
    opacity: 0;
    transform: translateZ(0) scale(0.02) rotate(-1080deg);
    filter: blur(2px);
  }

  5% {
    opacity: 0;
    transform: translateZ(0) scale(0.04) rotate(-1080deg);
    filter: blur(2px);
  }

  10% {
    opacity: 0;
    transform: translateZ(0) scale(0.08) rotate(-1080deg);
    filter: blur(2px);
  }

  15% {
    opacity: 0;
    transform: translateZ(0) scale(0.12) rotate(-1080deg);
    filter: blur(2px);
  }

  20% {
    opacity: 0;
    transform: translateZ(0) scale(0.16) rotate(-1080deg);
    filter: blur(2px);
  }

  25% {
    opacity: 0;
    transform: translateZ(0) scale(0.2) rotate(-1080deg);
    filter: blur(2px);
  }

  30% {
    opacity: 0;
    transform: translateZ(0) scale(0.24) rotate(-1080deg);
    filter: blur(2px);
  }

  35% {
    opacity: 0;
    transform: translateZ(0) scale(0.28) rotate(-1080deg);
    filter: blur(2px);
  }

  40% {
    opacity: 0;
    transform: translateZ(0) scale(0.32) rotate(-1080deg);
    filter: blur(2px);
  }

  45% {
    opacity: 0;
    transform: translateZ(0) scale(0.36) rotate(-1080deg);
    filter: blur(2px);
  }

  /* sehr schnell groß werden + viel Rotation */
  50% {
    opacity: 1;
    transform: translateZ(0) scale(0.55) rotate(-180deg);
    filter: blur(0);
  }

  /* Rotation wird deutlich langsamer, Größe nähert sich final */
  99% {
    opacity: 1;
    transform: translateZ(0) scale(1.15) rotate(-30deg);
  }

  /* final: 30° nach rechts geneigt */
  100% {
    opacity: 1;
    transform: translateZ(0) scale(1) rotate(-30deg);
  }
}

/* Optionaler "nicht-stören" Zustand (wird per JS gesetzt) */
.hvp-stamp.is-hidden {
  opacity: 0 !important;
  transform: translateZ(0) scale(0.9) rotate(-30deg) !important;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
}

/* Barrierefreiheit: weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .hvp-stamp {
    animation: none;
    opacity: 1;
    transform: rotate(-30deg);
  }
}