.mobile-like-motion-graphic {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: visible;
}

[data-mobile-like-motion] .mobile-like-motion-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 40px;
  height: 40px;
  max-width: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: none;
}

[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"] {
  height: 44px;
}

/* Figma frames 0-3 place the foreground 10px above the fixed canvas center. */
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="0"],
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"],
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="3"] {
  transform: translate(-50%, calc(-50% + 10px));
}

/* Figma 45129:318392: video-detail idle heart is solid white. */
.video-detail-mobile-info__like .video-detail-mobile-info__like-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  overflow: visible;
}

.video-detail-mobile-info__like .video-detail-mobile-info__like-idle {
  display: block;
  width: 18px;
  height: 18px;
  filter: none;
  opacity: 1;
}

.video-detail-mobile-info__like .mobile-like-motion-graphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0;
}

.video-detail-mobile-info__like.is-like-animating .video-detail-mobile-info__like-idle,
.video-detail-mobile-info__like[aria-pressed="true"] .video-detail-mobile-info__like-idle {
  opacity: 0;
}

.video-detail-mobile-info__like.is-like-animating .mobile-like-motion-graphic,
.video-detail-mobile-info__like[aria-pressed="true"] .mobile-like-motion-graphic {
  opacity: 1;
}

.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame {
  width: 24px;
  height: 24px;
}

.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"] {
  height: 26.4px;
}

.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="0"],
.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"],
.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="3"] {
  transform: translate(-50%, calc(-50% + 6px));
}

@media (prefers-reduced-motion: reduce) {
  [data-mobile-like-motion] .mobile-like-motion-frame {
    transition: none;
  }
}



@keyframes wydsp-like-0 {
  0% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  1.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.002rad) scaleX(0.989) scaleY(0.989) translate(-12px, -10.667px);
  }
  3.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.006rad) scaleX(0.958) scaleY(0.958) translate(-12px, -10.667px);
  }
  5% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.013rad) scaleX(0.911) scaleY(0.911) translate(-12px, -10.667px);
  }
  6.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.022rad) scaleX(0.852) scaleY(0.852) translate(-12px, -10.667px);
  }
  8.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.032rad) scaleX(0.781) scaleY(0.781) translate(-12px, -10.667px);
  }
  10% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.044rad) scaleX(0.7) scaleY(0.7) translate(-12px, -10.667px);
  }
  11.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.057rad) scaleX(0.611) scaleY(0.611) translate(-12px, -10.667px);
  }
  13.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.072rad) scaleX(0.514) scaleY(0.514) translate(-12px, -10.667px);
  }
  15% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.087rad) scaleX(0.409) scaleY(0.409) translate(-12px, -10.667px);
  }
  16.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.104rad) scaleX(0.297) scaleY(0.297) translate(-12px, -10.667px);
  }
  18.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.121rad) scaleX(0.178) scaleY(0.178) translate(-12px, -10.667px);
  }
  20% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.14rad) scaleX(0.05) scaleY(0.05) translate(-12px, -10.667px);
  }
  21.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.121rad) scaleX(0.153) scaleY(0.153) translate(-12px, -10.667px);
  }
  23.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.103rad) scaleX(0.25) scaleY(0.25) translate(-12px, -10.667px);
  }
  25% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.085rad) scaleX(0.344) scaleY(0.344) translate(-12px, -10.667px);
  }
  26.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.069rad) scaleX(0.434) scaleY(0.434) translate(-12px, -10.667px);
  }
  28.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.053rad) scaleX(0.52) scaleY(0.52) translate(-12px, -10.667px);
  }
  30% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.037rad) scaleX(0.602) scaleY(0.602) translate(-12px, -10.667px);
  }
  31.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.023rad) scaleX(0.68) scaleY(0.68) translate(-12px, -10.667px);
  }
  33.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.009rad) scaleX(0.754) scaleY(0.754) translate(-12px, -10.667px);
  }
  35% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.004rad) scaleX(0.824) scaleY(0.824) translate(-12px, -10.667px);
  }
  36.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.016rad) scaleX(0.889) scaleY(0.889) translate(-12px, -10.667px);
  }
  38.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.027rad) scaleX(0.949) scaleY(0.949) translate(-12px, -10.667px);
  }
  40% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.037rad) scaleX(1.004) scaleY(1.004) translate(-12px, -10.667px);
  }
  41.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.046rad) scaleX(1.052) scaleY(1.052) translate(-12px, -10.667px);
  }
  43.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.054rad) scaleX(1.095) scaleY(1.095) translate(-12px, -10.667px);
  }
  45% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.061rad) scaleX(1.13) scaleY(1.13) translate(-12px, -10.667px);
  }
  46.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.066rad) scaleX(1.157) scaleY(1.157) translate(-12px, -10.667px);
  }
  48.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.069rad) scaleX(1.174) scaleY(1.174) translate(-12px, -10.667px);
  }
  50% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.07rad) scaleX(1.18) scaleY(1.18) translate(-12px, -10.667px);
  }
  51.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.062rad) scaleX(1.075) scaleY(1.075) translate(-12px, -10.667px);
  }
  53.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.045rad) scaleX(0.952) scaleY(0.952) translate(-12px, -10.667px);
  }
  55% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.028rad) scaleX(0.945) scaleY(0.945) translate(-12px, -10.667px);
  }
  56.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.015rad) scaleX(0.998) scaleY(0.998) translate(-12px, -10.667px);
  }
  58.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.006rad) scaleX(1.024) scaleY(1.024) translate(-12px, -10.667px);
  }
  60% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(-0.001rad) scaleX(1.011) scaleY(1.011) translate(-12px, -10.667px);
  }
  61.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.001rad) scaleX(0.994) scaleY(0.994) translate(-12px, -10.667px);
  }
  63.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.002rad) scaleX(0.992) scaleY(0.992) translate(-12px, -10.667px);
  }
  65% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.002rad) scaleX(0.999) scaleY(0.999) translate(-12px, -10.667px);
  }
  66.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.001rad) scaleX(1.003) scaleY(1.003) translate(-12px, -10.667px);
  }
  68.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.001rad) scaleX(1.002) scaleY(1.002) translate(-12px, -10.667px);
  }
  70% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0.001rad) scaleX(0.999) scaleY(0.999) translate(-12px, -10.667px);
  }
  71.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(0.999) scaleY(0.999) translate(-12px, -10.667px);
  }
  73.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  75% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  76.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  78.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  80% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  81.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  83.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  85% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  86.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  88.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  90% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  91.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  93.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  95% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  96.67% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  98.33% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
  100% {
    transform: translateX(8px) translateY(9.333px) translate(12px, 10.667px) rotate(0rad) scaleX(1) scaleY(1) translate(-12px, -10.667px);
  }
}
[data-mobile-like-motion].is-like-animating .mobile-like-motion-vector__heart {
  transform-origin: 0 0;
  animation: wydsp-like-0 0.6s linear both;
}
@keyframes wydsp-like-1 {
  0% {
    transform: translateX(7px) translateY(7px) translate(13px, 13px) scaleX(0.3) scaleY(0.3) translate(-13px, -13px);
  }
  20% {
    animation-timing-function: ease-out;
    transform: translateX(7px) translateY(7px) translate(13px, 13px) scaleX(0.3) scaleY(0.3) translate(-13px, -13px);
  }
  83.33% {
    transform: translateX(7px) translateY(7px) translate(13px, 13px) scaleX(1.6) scaleY(1.6) translate(-13px, -13px);
  }
  100% {
    transform: translateX(7px) translateY(7px) translate(13px, 13px) scaleX(1.6) scaleY(1.6) translate(-13px, -13px);
  }
}
@keyframes wydsp-like-2 {
  0% {
    animation-timing-function: linear;
    stroke-width: 3px;
  }
  20% {
    animation-timing-function: ease-out;
    stroke-width: 3px;
  }
  83.33% {
    animation-timing-function: linear;
    stroke-width: 0.5px;
  }
  100% {
    stroke-width: 0.5px;
  }
}
@keyframes wydsp-like-3 {
  0% {
    animation-timing-function: linear;
    opacity: 0;
  }
  20% {
    animation-timing-function: ease-out;
    opacity: 0;
  }
  30% {
    animation-timing-function: ease-in;
    opacity: 0.9;
  }
  83.33% {
    animation-timing-function: linear;
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
[data-mobile-like-motion].is-like-animating .mobile-like-motion-vector__ring {
  transform-origin: 0 0;
  animation:
    wydsp-like-1 0.6s linear both,
    wydsp-like-2 0.6s linear both,
    wydsp-like-3 0.6s linear both;
}
@keyframes wydsp-like-4 {
  0% {
    transform: translateX(10px) translateY(10px) translate(10px, 10px) scaleX(0.2) scaleY(0.2) translate(-10px, -10px);
  }
  23.33% {
    animation-timing-function: ease-out;
    transform: translateX(10px) translateY(10px) translate(10px, 10px) scaleX(0.2) scaleY(0.2) translate(-10px, -10px);
  }
  75% {
    transform: translateX(10px) translateY(10px) translate(10px, 10px) scaleX(1.8) scaleY(1.8) translate(-10px, -10px);
  }
  100% {
    transform: translateX(10px) translateY(10px) translate(10px, 10px) scaleX(1.8) scaleY(1.8) translate(-10px, -10px);
  }
}
@keyframes wydsp-like-5 {
  0% {
    animation-timing-function: linear;
    stroke-width: 4px;
  }
  23.33% {
    animation-timing-function: ease-out;
    stroke-width: 4px;
  }
  75% {
    animation-timing-function: linear;
    stroke-width: 1px;
  }
  100% {
    stroke-width: 1px;
  }
}
@keyframes wydsp-like-6 {
  0% {
    animation-timing-function: linear;
    opacity: 0;
  }
  23.33% {
    animation-timing-function: ease-out;
    opacity: 0;
  }
  33.33% {
    animation-timing-function: ease-in;
    opacity: 1;
  }
  75% {
    animation-timing-function: linear;
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
[data-mobile-like-motion].is-like-animating .mobile-like-motion-vector__dots {
  transform-origin: 0 0;
  animation:
    wydsp-like-4 0.6s linear both,
    wydsp-like-5 0.6s linear both,
    wydsp-like-6 0.6s linear both;
}

/* Figma 49012:376421: original 40x40 vectors and baked 600ms keyframes. */
.mobile-like-motion-vector { overflow: visible; }
[data-mobile-like-motion][aria-pressed="false"]:not(.is-like-animating) .mobile-like-motion-vector__heart { fill: #fff; }
[data-mobile-like-motion][data-like-animation="unliking"] .mobile-like-motion-vector > g > * { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  [data-mobile-like-motion].is-like-animating .mobile-like-motion-vector > g > * { animation: none; }
  [data-mobile-like-motion][aria-pressed="false"] .mobile-like-motion-vector__heart { fill: #fff; }
}