/* MeerHeimatLiebe 2.5.2-r73
   - beruhigt den roten Herzschlag aus r72
   - unterbindet vibrierende/ruckelnde Icon-Bewegungen bei Mousehover
   - laesst sonstige Seitenanimationen und den maritimen Cursor unberuehrt */

:root {
  --mhl-heart-red: #e54855;
  --mhl-heart-red-deep: #c92f43;
  --mhl-heart-highlight: #ff9da5;
  --mhl-heart-glow-soft: rgba(229, 72, 85, 0.24);
}

/* Ruhigeres Erscheinungsbild: weniger Leuchten und deutlich kleinere Amplitude. */
svg.icon-heart {
  color: var(--mhl-heart-red) !important;
  overflow: visible;
  filter:
    drop-shadow(0 0 0.08rem rgba(255, 255, 255, 0.22))
    drop-shadow(0 0 0.22rem var(--mhl-heart-glow-soft)) !important;
  transition-property: color, fill, stroke, filter, opacity !important;
  transition-duration: 180ms !important;
  transform: none !important;
}

svg.icon-heart > path {
  fill: var(--mhl-heart-red) !important;
  stroke: var(--mhl-heart-highlight) !important;
  stroke-width: 1.05 !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: mhl-heart-pulse-calm 3.2s ease-in-out infinite !important;
}

/* Hover veraendert nur Farbe/Leuchten. Kein schnellerer Puls, kein Zittern. */
:where(a, button, [role="button"]):is(:hover, :focus-visible) svg.icon-heart {
  color: #ea5260 !important;
  filter:
    drop-shadow(0 0 0.09rem rgba(255, 255, 255, 0.24))
    drop-shadow(0 0 0.28rem rgba(229, 72, 85, 0.29)) !important;
  transform: none !important;
}

:where(a, button, [role="button"]):active svg.icon-heart > path {
  animation-duration: 3.2s !important;
}

/*
 * Icons in interaktiven Elementen duerfen beim Mousehover nicht rotieren,
 * springen, wackeln oder vibrieren. Herzen behalten nur ihren ruhigen Puls
 * auf dem inneren Pfad; der SVG-Rahmen selbst bleibt stabil.
 */
@media (hover: hover) and (pointer: fine) {
  :where(a, button, [role="button"], [data-action]):is(:hover, :focus-visible)
    :where(svg:not(.icon-heart), .mhl-close-shell, [class*="icon-"]:not(.icon-heart), [class~="icon"]),
  :where(a, button, [role="button"], [data-action]):is(:hover, :focus-visible)
    :where(svg:not(.icon-heart), .mhl-close-shell, [class*="icon-"]:not(.icon-heart), [class~="icon"]) * {
    animation: none !important;
    animation-name: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }

  :where(a, button, [role="button"], [data-action])
    :where(svg, .mhl-close-shell, [class*="icon-"], [class~="icon"]) {
    transition-property: color, fill, stroke, filter, opacity, background-color, border-color !important;
  }

  /* Auch die Schliessen-Schaltflaeche selbst hebt sich nicht mehr ruckartig an. */
  .mhl-close-rethemed:is(:hover, :focus-visible, :active) {
    transform: none !important;
  }
}

@keyframes mhl-heart-pulse-calm {
  0%, 100% {
    transform: scale(1);
    fill: var(--mhl-heart-red);
  }
  8% {
    transform: scale(1.045);
    fill: #eb5260;
  }
  16% {
    transform: scale(1);
    fill: var(--mhl-heart-red);
  }
  24% {
    transform: scale(1.025);
    fill: var(--mhl-heart-red-deep);
  }
  32%, 92% {
    transform: scale(1);
    fill: var(--mhl-heart-red);
  }
}

@media (prefers-reduced-motion: reduce) {
  svg.icon-heart > path,
  :where(a, button, [role="button"], [data-action])
    :where(svg, .mhl-close-shell, [class*="icon-"], [class~="icon"]),
  :where(a, button, [role="button"], [data-action])
    :where(svg, .mhl-close-shell, [class*="icon-"], [class~="icon"]) * {
    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;
  }
}