/*
 * Notifikační zvonek
 *
 * Vrstvy (shora dolů): obrys → výplň → srdce.
 * Výplň + obrys sdílí rotaci těla; srdce má vlastní rotaci v rámci těla.
 * Artboard: 24×24 px. Plátno animace: 32×32 px (viewBox −4…28).
 * Pivot těla: (12, 2). Pivot srdce: (12, 3).
 */

.notify-ding {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.notify-bell-animation {
  --notify-bell-artboard: 24px;
  --notify-bell-stage: 32px;
  --notify-bell-stage-offset: -4px;

  position: relative;
  width: var(--notify-bell-artboard);
  height: var(--notify-bell-artboard);
  flex-shrink: 0;
  overflow: visible;
  opacity: 0.9;
  pointer-events: none;
}

.notify-bell__svg {
  position: absolute;
  left: var(--notify-bell-stage-offset);
  top: var(--notify-bell-stage-offset);
  width: var(--notify-bell-stage);
  height: var(--notify-bell-stage);
  display: block;
  overflow: visible;
}

.notify-bell__body-group,
.notify-bell__clapper {
  transform-box: view-box;
}

.notify-bell__body-group {
  transform-origin: 12px 2px;
}

.notify-bell__clapper {
  transform-origin: 12px 3px;
}

@keyframes notify-bell-body {
  0% { transform: rotate(0deg); }
  4.82% { transform: rotate(3.53deg); }
  6.02% { transform: rotate(11.39deg); }
  7.23% { transform: rotate(17.16deg); }
  8.43% { transform: rotate(20.2deg); }
  9.64% { transform: rotate(20.3deg); }
  10.84% { transform: rotate(17.66deg); }
  12.05% { transform: rotate(12.84deg); }
  13.25% { transform: rotate(6.64deg); }
  14.46% { transform: rotate(-0.01deg); }
  15.66% { transform: rotate(-6.18deg); }
  16.87% { transform: rotate(-11.07deg); }
  18.07% { transform: rotate(-14.12deg); }
  19.28% { transform: rotate(-15.05deg); }
  20.48% { transform: rotate(-13.89deg); }
  21.69% { transform: rotate(-10.94deg); }
  22.89% { transform: rotate(-6.74deg); }
  24.1% { transform: rotate(-1.93deg); }
  25.3% { transform: rotate(2.8deg); }
  26.51% { transform: rotate(6.8deg); }
  27.71% { transform: rotate(9.6deg); }
  28.92% { transform: rotate(10.91deg); }
  30.12% { transform: rotate(10.66deg); }
  31.33% { transform: rotate(8.99deg); }
  32.53% { transform: rotate(6.23deg); }
  33.73% { transform: rotate(2.83deg); }
  34.94% { transform: rotate(-0.71deg); }
  36.14% { transform: rotate(-3.89deg); }
  37.35% { transform: rotate(-6.32deg); }
  38.55% { transform: rotate(-7.73deg); }
  39.76% { transform: rotate(-7.99deg); }
  40.96% { transform: rotate(-7.16deg); }
  42.17% { transform: rotate(-5.43deg); }
  43.37% { transform: rotate(-3.09deg); }
  44.58% { transform: rotate(-0.5deg); }
  45.78% { transform: rotate(1.96deg); }
  46.99% { transform: rotate(3.99deg); }
  48.19% { transform: rotate(5.33deg); }
  49.4% { transform: rotate(5.86deg); }
  50.6% { transform: rotate(5.56deg); }
  51.81% { transform: rotate(4.54deg); }
  53.01% { transform: rotate(2.97deg); }
  54.22% { transform: rotate(1.13deg); }
  55.42% { transform: rotate(-0.74deg); }
  56.63% { transform: rotate(-2.38deg); }
  57.83% { transform: rotate(-3.57deg); }
  59.04% { transform: rotate(-4.2deg); }
  61.45% { transform: rotate(-3.67deg); }
  62.65% { transform: rotate(-2.66deg); }
  63.86% { transform: rotate(-1.37deg); }
  65.06% { transform: rotate(0.01deg); }
  66.27% { transform: rotate(1.29deg); }
  67.47% { transform: rotate(2.31deg); }
  68.67% { transform: rotate(2.94deg); }
  69.88% { transform: rotate(3.13deg); }
  71.08% { transform: rotate(2.89deg); }
  72.29% { transform: rotate(2.27deg); }
  73.49% { transform: rotate(1.4deg); }
  74.7% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes notify-bell-clapper {
  0% { transform: rotate(0deg); }
  7.23% { transform: rotate(-5.43deg); }
  8.43% { transform: rotate(-10.33deg); }
  9.64% { transform: rotate(-13.49deg); }
  10.84% { transform: rotate(-14.6deg); }
  12.05% { transform: rotate(-13.67deg); }
  13.25% { transform: rotate(-10.97deg); }
  14.46% { transform: rotate(-6.98deg); }
  15.66% { transform: rotate(-2.34deg); }
  16.87% { transform: rotate(2.27deg); }
  18.07% { transform: rotate(6.25deg); }
  19.28% { transform: rotate(9.1deg); }
  20.48% { transform: rotate(10.52deg); }
  22.89% { transform: rotate(8.93deg); }
  24.1% { transform: rotate(6.34deg); }
  25.3% { transform: rotate(3.09deg); }
  26.51% { transform: rotate(-0.35deg); }
  27.71% { transform: rotate(-3.49deg); }
  28.92% { transform: rotate(-5.93deg); }
  30.12% { transform: rotate(-7.41deg); }
  31.33% { transform: rotate(-7.77deg); }
  32.53% { transform: rotate(-7.07deg); }
  33.73% { transform: rotate(-5.47deg); }
  34.94% { transform: rotate(-3.24deg); }
  36.14% { transform: rotate(-0.74deg); }
  37.35% { transform: rotate(1.68deg); }
  38.55% { transform: rotate(3.7deg); }
  39.76% { transform: rotate(5.07deg); }
  40.96% { transform: rotate(5.67deg); }
  42.17% { transform: rotate(5.46deg); }
  43.37% { transform: rotate(4.53deg); }
  44.58% { transform: rotate(3.05deg); }
  45.78% { transform: rotate(1.28deg); }
  46.99% { transform: rotate(-0.54deg); }
  48.19% { transform: rotate(-2.16deg); }
  49.4% { transform: rotate(-3.37deg); }
  50.6% { transform: rotate(-4.04deg); }
  53.01% { transform: rotate(-3.63deg); }
  54.22% { transform: rotate(-2.7deg); }
  55.42% { transform: rotate(-1.47deg); }
  56.63% { transform: rotate(-0.13deg); }
  57.83% { transform: rotate(1.14deg); }
  59.04% { transform: rotate(2.15deg); }
  60.24% { transform: rotate(2.81deg); }
  61.45% { transform: rotate(3.04deg); }
  62.65% { transform: rotate(2.84deg); }
  63.86% { transform: rotate(2.28deg); }
  65.06% { transform: rotate(1.45deg); }
  66.27% { transform: rotate(0.48deg); }
  67.47% { transform: rotate(-0.48deg); }
  68.67% { transform: rotate(-1.3deg); }
  69.88% { transform: rotate(-1.89deg); }
  71.08% { transform: rotate(-2.19deg); }
  73.49% { transform: rotate(-1.85deg); }
  74.7% { transform: rotate(-1.32deg); }
  75.9% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.notify-card--product .notify-bell__body-group,
#mini-cart-popup.is-open .mini-cart-inner.instance-2.mci-active .notify-bell__body-group,
#mini-cart-popup.is-open .mini-cart-inner.instance-6.mci-active .notify-bell__body-group {
  animation: notify-bell-body 2.767s linear infinite;
}

.notify-card--product .notify-bell__clapper,
#mini-cart-popup.is-open .mini-cart-inner.instance-2.mci-active .notify-bell__clapper,
#mini-cart-popup.is-open .mini-cart-inner.instance-6.mci-active .notify-bell__clapper {
  animation: notify-bell-clapper 2.767s linear infinite;
}
