/* Figma 45137:468183, 40px canvas, 600ms once in either direction. */
.mobile-like-motion-graphic {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: visible;
}

.mobile-like-motion-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--like-motion-scale, 1));
}

.mobile-like-motion-heart {
  position: absolute;
  left: 8px;
  top: 9px;
  width: 24px;
  height: 22px;
  transform-origin: center;
}

[data-mobile-like-motion] .mobile-like-motion-heart img {
  display: block;
  width: 24px;
  height: 22px;
  max-width: none;
  transition: none;
  filter: var(--like-motion-inactive-filter, brightness(0) invert(1));
}

[data-mobile-like-motion][aria-pressed="true"] .mobile-like-motion-heart img {
  filter: none;
}

.mobile-like-motion-ring {
  position: absolute;
  overflow: visible;
  opacity: 0;
  transform-origin: center;
}

.mobile-like-motion-ring--outer {
  left: 7px;
  top: 7px;
}

.mobile-like-motion-ring--inner {
  left: 10px;
  top: 10px;
}

@property --like-rotate {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

.is-like-animating .mobile-like-motion-heart {
  transform: rotate(var(--like-rotate, 0rad));
  animation: kf_45137_468184_rotate_0 0.6s linear, kf_45137_468184_scale_0 0.6s linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes kf_45137_468184_rotate_0 {
  0% {
    animation-timing-function: ease-in;
    --like-rotate: 0rad;
  }
  20% {
    animation-timing-function: ease-out;
    --like-rotate: 0.14rad;
  }
  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);
    --like-rotate: -0.07rad;
  }
  80% {
    --like-rotate: 0rad;
  }
  100% {
    --like-rotate: 0rad;
  }
}

@keyframes kf_45137_468184_scale_0 {
  0% {
    animation-timing-function: ease-in;
    scale: 1 1;
  }
  20% {
    animation-timing-function: ease-out;
    scale: 0.05 0.05;
  }
  50% {
    animation-timing-function: linear(0, 0.0985, 0.342, 0.6483, 0.9442, 1.1767, 1.3179, 1.364, 1.3302, 1.2427, 1.1314, 1.0233, 0.9377, 0.8853, 0.8675, 0.8791, 0.9105, 0.9509, 0.9904, 1.0219, 1.0414, 1.0482, 1.0443, 1.033, 1.0183, 1.0039, 0.9923, 0.9851, 0.9825, 0.9838, 0.9878, 0.9932, 0.9984, 1.0027, 1.0054, 1.0064, 1.0059, 1.0045, 1.0025, 1.0006, 0.9991, 0.9981, 0.9977, 0.9978, 0.9983, 0.9991, 0.9998, 1.0003, 1.0007, 1.0008, 1.0008);
    scale: 1.18 1.18;
  }
  80% {
    scale: 1 1;
  }
  100% {
    scale: 1 1;
  }
}

.is-like-animating .mobile-like-motion-ring--outer {
  animation: kf_45137_468185_stroke-width_0 0.6s linear, kf_45137_468185_opacity_0 0.6s linear, kf_45137_468185_scale_0 0.6s linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes kf_45137_468185_stroke-width_0 {
  0% {
    stroke-width: 3px;
  }
  20% {
    animation-timing-function: ease-out;
    stroke-width: 3px;
  }
  83.333% {
    stroke-width: 0.5px;
  }
  100% {
    stroke-width: 0.5px;
  }
}

@keyframes kf_45137_468185_opacity_0 {
  0% {
    opacity: 0;
  }
  20% {
    animation-timing-function: ease-out;
    opacity: 0;
  }
  30% {
    animation-timing-function: ease-in;
    opacity: 0.9;
  }
  83.333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes kf_45137_468185_scale_0 {
  0% {
    scale: 0.3 0.3;
  }
  20% {
    animation-timing-function: ease-out;
    scale: 0.3 0.3;
  }
  83.333% {
    scale: 1.6 1.6;
  }
  100% {
    scale: 1.6 1.6;
  }
}

.is-like-animating .mobile-like-motion-ring--inner {
  animation: kf_45137_468186_stroke-width_0 0.6s linear, kf_45137_468186_opacity_0 0.6s linear, kf_45137_468186_scale_0 0.6s linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes kf_45137_468186_stroke-width_0 {
  0% {
    stroke-width: 4px;
  }
  23.333% {
    animation-timing-function: ease-out;
    stroke-width: 4px;
  }
  75% {
    stroke-width: 1px;
  }
  100% {
    stroke-width: 1px;
  }
}

@keyframes kf_45137_468186_opacity_0 {
  0% {
    opacity: 0;
  }
  23.333% {
    animation-timing-function: ease-out;
    opacity: 0;
  }
  33.333% {
    animation-timing-function: ease-in;
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes kf_45137_468186_scale_0 {
  0% {
    scale: 0.2 0.2;
  }
  23.333% {
    animation-timing-function: ease-out;
    scale: 0.2 0.2;
  }
  75% {
    scale: 1.8 1.8;
  }
  100% {
    scale: 1.8 1.8;
  }
}

.is-like-animating .mobile-like-motion-heart img {
  animation: like-heart-color 0.6s step-end both;
}

@keyframes like-heart-color {
  0%, 20% {
    filter: var(--like-motion-inactive-filter, brightness(0) invert(1));
  }
  20.001%, 100% {
    filter: none;
  }
}

[data-like-animation="unliking"] .mobile-like-motion-heart,
[data-like-animation="unliking"] .mobile-like-motion-heart img,
[data-like-animation="unliking"] .mobile-like-motion-ring {
  animation-direction: reverse;
}

/* Preserve the existing compact long-video layout and gray inactive icon. */
.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: invert(1);
  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;
  --like-motion-scale: .6;
  --like-motion-inactive-filter: brightness(0) invert(1) opacity(.55);
}

.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;
}

@media (prefers-reduced-motion: reduce) {
  .is-like-animating .mobile-like-motion-stage * {
    animation: none !important;
  }
}