/* MeerHeimatLiebe 2.5.2-r72
   Alle über x-mhl-icon ausgegebenen Herzen erscheinen seitenweit
   als professionell pulsierende rote Herzen. */

:root {
  --mhl-heart-red: #e54855;
  --mhl-heart-red-deep: #b91f35;
  --mhl-heart-highlight: #ff8b94;
  --mhl-heart-glow: rgba(229, 72, 85, 0.42);
}

/* Die eigene Blade-Komponente x-mhl-icon erzeugt die Klasse icon-heart. */
svg.icon-heart {
  color: var(--mhl-heart-red) !important;
  overflow: visible;
  filter:
    drop-shadow(0 0 0.14rem rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 0.38rem var(--mhl-heart-glow));
  isolation: isolate;
}

svg.icon-heart > path {
  fill: var(--mhl-heart-red) !important;
  stroke: var(--mhl-heart-highlight) !important;
  stroke-width: 1.15 !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: mhl-heart-pulse 1.55s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

/* Leicht stärkere Rückmeldung bei bedienbaren Herz-Elementen. */
a:hover svg.icon-heart,
a:focus-visible svg.icon-heart,
button:hover svg.icon-heart,
button:focus-visible svg.icon-heart {
  color: #f05260 !important;
  filter:
    drop-shadow(0 0 0.16rem rgba(255, 255, 255, 0.46))
    drop-shadow(0 0 0.56rem rgba(229, 72, 85, 0.58));
}

a:active svg.icon-heart > path,
button:active svg.icon-heart > path {
  animation-duration: 0.78s;
}

@keyframes mhl-heart-pulse {
  0%, 100% {
    transform: scale(1);
    fill: var(--mhl-heart-red);
    stroke: var(--mhl-heart-highlight);
  }
  12% {
    transform: scale(1.16);
    fill: #f05260;
    stroke: #ffd4d8;
  }
  24% {
    transform: scale(1.02);
    fill: var(--mhl-heart-red);
    stroke: var(--mhl-heart-highlight);
  }
  36% {
    transform: scale(1.11);
    fill: #ee4b59;
    stroke: #ffc2c8;
  }
  52% {
    transform: scale(1);
    fill: var(--mhl-heart-red-deep);
    stroke: var(--mhl-heart-highlight);
  }
}

@media (prefers-reduced-motion: reduce) {
  svg.icon-heart > path {
    animation: none !important;
    transform: none !important;
  }
}

@media (forced-colors: active) {
  svg.icon-heart {
    color: CanvasText !important;
    filter: none !important;
  }

  svg.icon-heart > path {
    fill: CanvasText !important;
    stroke: Canvas !important;
  }
}