/* Shared favorite transition: Figma 45137:468127, 700ms forward/reverse. */

.favorite-motion {
  --favorite-motion-icon-size: 30px;
  position: relative;
  display: inline-block;
  width: var(--favorite-motion-icon-size);
  height: var(--favorite-motion-icon-size);
  flex: 0 0 var(--favorite-motion-icon-size);
  overflow: visible;
}

.favorite-motion--desktop {
  --favorite-motion-icon-size: 36px;
  --favorite-motion-inactive-filter: grayscale(1) opacity(0.55);
}

.favorite-motion--compact {
  --favorite-motion-icon-size: 18px;
}

.favorite-motion--action {
  --favorite-motion-icon-size: 30px;
}

.favorite-motion__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 40px;
  height: 40px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.favorite-motion__star {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--favorite-motion-icon-size);
  height: var(--favorite-motion-icon-size);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.favorite-motion__star img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 1;
  filter: var(--favorite-motion-inactive-filter, brightness(0) invert(1));
  transition: none;
}

.favorite-motion[data-favorite-state="active"] .favorite-motion__star img {
  filter: none;
}

.favorite-motion__sparkle {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
}

.favorite-motion__sparkle i {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: linear-gradient(135deg, #ffe580, #facc15);
  opacity: 0;
}

.favorite-motion__sparkle--lower-left {
  top: calc(50% + 10.08px);
  left: calc(50% - 15.01px);
  width: 3.986px;
  height: 3.843px;
}

.favorite-motion__sparkle--upper-right {
  top: calc(50% - 13.92px);
  left: calc(50% + 13.99px);
  width: 3.986px;
  height: 3.843px;
}

.favorite-motion__sparkle--upper-left {
  top: calc(50% - 9.11px);
  left: calc(50% - 14.85px);
  width: 2.301px;
  height: 2.219px;
}

.favorite-motion.is-collecting .favorite-motion__star,
.favorite-motion.is-uncollecting .favorite-motion__star {
  animation: favorite-star-motion 0.7s linear both;
  will-change: transform;
}

.favorite-motion.is-collecting .favorite-motion__star img,
.favorite-motion.is-uncollecting .favorite-motion__star img {
  animation: favorite-star-color 0.7s step-end both;
}

.favorite-motion.is-collecting .favorite-motion__sparkle--lower-left i,
.favorite-motion.is-uncollecting .favorite-motion__sparkle--lower-left i {
  animation: favorite-sparkle-one-opacity 0.7s linear both,
    favorite-sparkle-one-translate 0.7s linear both,
    favorite-sparkle-one-scale 0.7s linear both;
  will-change: opacity, translate, scale;
}

.favorite-motion.is-collecting .favorite-motion__sparkle--upper-right i,
.favorite-motion.is-uncollecting .favorite-motion__sparkle--upper-right i {
  animation: favorite-sparkle-two-opacity 0.7s linear both,
    favorite-sparkle-two-translate 0.7s linear both,
    favorite-sparkle-two-scale 0.7s linear both;
  will-change: opacity, translate, scale;
}

.favorite-motion.is-collecting .favorite-motion__sparkle--upper-left i,
.favorite-motion.is-uncollecting .favorite-motion__sparkle--upper-left i {
  animation: favorite-sparkle-three-opacity 0.7s linear both,
    favorite-sparkle-three-translate 0.7s linear both,
    favorite-sparkle-three-scale 0.7s linear both;
  will-change: opacity, translate, scale;
}

.favorite-motion.is-uncollecting .favorite-motion__star,
.favorite-motion.is-uncollecting .favorite-motion__star img,
.favorite-motion.is-uncollecting .favorite-motion__sparkle i {
  animation-direction: reverse;
}

@keyframes favorite-star-motion {
  0% {
    animation-timing-function: ease-in;
    transform: translate(-50%, -50%) rotate(0rad) scale(1);
  }
  21.429% {
    animation-timing-function: ease-out;
    transform: translate(-50%, -50%) rotate(0.175rad) scale(0.04);
  }
  50% {
    animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
    transform: translate(-50%, -50%) rotate(-0.087rad) scale(1.15);
  }
  78.571%,
  100% {
    transform: translate(-50%, -50%) rotate(0rad) scale(1);
  }
}

@keyframes favorite-star-color {
  0%,
  21.429% { filter: var(--favorite-motion-inactive-filter, brightness(0) invert(1)); }
  21.43%,
  100% { filter: none; }
}

@keyframes favorite-sparkle-one-opacity {
  0%,
  28.571% { opacity: 0; }
  42.857% { animation-timing-function: ease-in; opacity: 1; }
  78.571%,
  100% { opacity: 0; }
}

@keyframes favorite-sparkle-one-translate {
  0%,
  28.571% { animation-timing-function: ease-out; translate: 0 0; }
  78.571%,
  100% { translate: -3px 4px; }
}

@keyframes favorite-sparkle-one-scale {
  0%,
  28.571% { animation-timing-function: ease-out; scale: 0 0; }
  45.714% { animation-timing-function: ease-in; scale: 1.2 -1.2; }
  78.571%,
  100% { scale: 0.3 -0.3; }
}

@keyframes favorite-sparkle-two-opacity {
  0%,
  31.429% { opacity: 0; }
  45.714% { animation-timing-function: ease-in; opacity: 1; }
  82.857%,
  100% { opacity: 0; }
}

@keyframes favorite-sparkle-two-translate {
  0%,
  31.429% { animation-timing-function: ease-out; translate: 0 0; }
  82.857%,
  100% { translate: 3px -3px; }
}

@keyframes favorite-sparkle-two-scale {
  0%,
  31.429% { animation-timing-function: ease-out; scale: 0 0; }
  48.571% { animation-timing-function: ease-in; scale: 1.1 -1.1; }
  82.857%,
  100% { scale: 0.2 -0.2; }
}

@keyframes favorite-sparkle-three-opacity {
  0%,
  35.714% { opacity: 0; }
  50% { animation-timing-function: ease-in; opacity: 0.8; }
  71.429%,
  100% { opacity: 0; }
}

@keyframes favorite-sparkle-three-translate {
  0%,
  35.714% { animation-timing-function: ease-out; translate: 0 0; }
  71.429%,
  100% { translate: -2px -2px; }
}

@keyframes favorite-sparkle-three-scale {
  0%,
  35.714% { animation-timing-function: ease-out; scale: 0 0; }
  50% { animation-timing-function: ease-in; scale: 1.3 -1.3; }
  71.429%,
  100% { scale: 0.4 -0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .favorite-motion.is-collecting *,
  .favorite-motion.is-uncollecting * {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .favorite-motion--desktop {
    --favorite-motion-icon-size: 24px;
  }
}