.jike-motion-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  background: #fffdf5;
}

.jike-motion-cover__plate {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  transform: none;
}

.jike-motion-cover::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at 86% 55%, rgba(255, 226, 36, 0.13), transparent 16%),
    radial-gradient(circle at 80% 55%, rgba(33, 164, 244, 0.1), transparent 14%);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.jike-motion-cover::after {
  position: absolute;
  z-index: 9;
  inset: 0;
  border: 1px solid rgba(108, 118, 255, 0);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 223, 21, 0),
    inset 0 0 2.2vw rgba(108, 118, 255, 0);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.jike-motion-cover__person {
  position: absolute !important;
  z-index: 5;
  display: block;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, filter;
}

.jike-motion-cover__person--woman {
  left: 75.08%;
  top: 48.05%;
  width: 11.72% !important;
  transform: none;
  transform-origin: 51% 99%;
}

.jike-motion-cover__person--man {
  left: 86.68%;
  top: 46.72%;
  width: 10.98% !important;
  transform: none;
  transform-origin: 50% 99%;
}

.jike-motion-cover__connection {
  position: absolute;
  z-index: 6;
  left: 82.25%;
  top: 53.2%;
  width: 5.7%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, #18a4f4, rgba(108, 118, 255, 0.72), #ffdf15);
  box-shadow: 0 0 0.55vw rgba(52, 139, 255, 0.18);
  opacity: 0;
  transform: rotate(-10deg) scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.jike-motion-cover__connection::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(3px, 0.34vw, 6px);
  height: clamp(3px, 0.34vw, 6px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 clamp(2px, 0.18vw, 3px) rgba(24, 164, 244, 0.26);
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%);
}

.jike-motion-cover__spark {
  position: absolute;
  z-index: 7;
  left: 85.25%;
  top: 49.5%;
  width: clamp(5px, 0.56vw, 10px);
  height: clamp(5px, 0.56vw, 10px);
  background: #ffdf15;
  box-shadow: 0 0 0.7vw rgba(255, 223, 21, 0.25);
  opacity: 0;
  transform: rotate(45deg) scale(0);
  pointer-events: none;
}

.jike-motion-cover__wash {
  position: absolute;
  z-index: 3;
  inset: -28%;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 48%,
    transparent 58%
  );
  opacity: 0;
  transform: translateX(-55%);
  pointer-events: none;
}

.jike-motion-cover__phone-ping {
  position: absolute;
  z-index: 7;
  left: 80.35%;
  top: 22.4%;
  width: clamp(6px, 0.64vw, 11px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 223, 21, 0.84);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0.65vw rgba(255, 223, 21, 0.2);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  pointer-events: none;
}

.jike-motion-cover__phone-ping::before,
.jike-motion-cover__phone-ping::after {
  position: absolute;
  inset: -46%;
  border: 1px solid rgba(24, 164, 244, 0.42);
  border-radius: 50%;
  content: "";
  opacity: 0;
  transform: scale(0.55);
}

.jike-motion-cover__topics {
  position: absolute;
  z-index: 7;
  left: 83.6%;
  top: 58.4%;
  width: clamp(4px, 0.42vw, 7px);
  height: clamp(4px, 0.42vw, 7px);
  border-radius: 50%;
  background: #18a4f4;
  box-shadow:
    1.15vw -0.88vw 0 -0.04vw #ffdf15,
    2vw 0.12vw 0 -0.07vw #6c76ff;
  opacity: 0;
  transform: translateY(0) scale(0.5);
  pointer-events: none;
}

.jike-motion-cover__footer-sheen {
  position: absolute;
  z-index: 4;
  left: -35%;
  bottom: 0;
  width: 30%;
  height: 6.8%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.56),
    transparent
  );
  opacity: 0;
  transform: skewX(-18deg);
  pointer-events: none;
}

.jike-motion-cover__title-trace {
  position: absolute;
  z-index: 7;
  left: 5.35%;
  top: 59.05%;
  width: 4.15%;
  height: clamp(2px, 0.38vw, 7px);
  border-radius: 999px;
  background: linear-gradient(90deg, #ffdf15, #ffe940 68%, rgba(255, 233, 64, 0));
  box-shadow: 0 0 0.75vw rgba(255, 223, 21, 0.28);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.jike-motion-cover__phone-sheen {
  position: absolute;
  z-index: 4;
  left: 56.35%;
  top: 13.2%;
  width: 27.1%;
  height: 91%;
  border-radius: 16% 16% 2% 2%;
  background:
    linear-gradient(
      106deg,
      transparent 40%,
      rgba(255, 255, 255, 0.08) 45%,
      rgba(255, 255, 255, 0.5) 49%,
      rgba(255, 255, 255, 0.1) 53%,
      transparent 58%
    );
  background-position: 130% 0;
  background-size: 260% 100%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.jike-motion-cover__ground-glow {
  position: absolute;
  z-index: 4;
  left: 74.2%;
  bottom: -1.4%;
  width: 23.8%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255, 223, 21, 0.28) 0%,
    rgba(24, 164, 244, 0.1) 46%,
    transparent 72%
  );
  filter: blur(0.36vw);
  opacity: 0;
  transform: scaleX(0.7);
  pointer-events: none;
}

.jike-motion-cover__reactions {
  position: absolute;
  z-index: 8;
  left: 84.1%;
  top: 45.6%;
  width: clamp(7px, 0.72vw, 13px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: #18a4f4;
  box-shadow: 0 0.28vw 0.7vw rgba(24, 164, 244, 0.22);
  opacity: 0;
  transform: translateY(0) scale(0.6);
  pointer-events: none;
}

.jike-motion-cover__reactions::before,
.jike-motion-cover__reactions::after {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  content: "";
  opacity: 0;
}

.jike-motion-cover__reactions::before {
  left: -145%;
  top: 110%;
  background: #ffdf15;
  box-shadow: 0 0.24vw 0.65vw rgba(255, 223, 21, 0.22);
}

.jike-motion-cover__reactions::after {
  left: 118%;
  top: 190%;
  background: #6c76ff;
  box-shadow: 0 0.24vw 0.65vw rgba(108, 118, 255, 0.2);
}

.jike-motion-cover__screen {
  position: absolute;
  left: 58.15%;
  top: 26.5%;
  z-index: 3;
  width: 23.05%;
  height: 55%;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 32%, 79% 47%, 79% 100%, 0 100%);
  background: transparent;
  opacity: 0;
  transform: translateZ(0);
  pointer-events: none;
}

.jike-motion-cover__screen::before,
.jike-motion-cover__screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.jike-motion-cover__screen::before {
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  opacity: 0;
}

.jike-motion-cover__screen::after {
  left: 10%;
  top: 10.5%;
  width: 19%;
  height: clamp(1px, 0.13vw, 2px);
  border-radius: 999px;
  background: #ffdc13;
  box-shadow: 0 0 0 clamp(1px, 0.08vw, 2px) rgba(255, 220, 19, 0.12);
  opacity: 0;
  transform: translateX(0) scaleX(0.55);
  transform-origin: center;
}

.jike-motion-cover__screen-image {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.006);
  will-change: opacity, transform;
}

.jike-motion-cover__screen-image--home {
  left: -252.28% !important;
  top: -48.18% !important;
  width: 433.84% !important;
  height: auto !important;
  object-fit: initial !important;
  object-position: initial !important;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: none;
}

.jike-motion-cover__foreground {
  position: absolute !important;
  right: 1.1%;
  bottom: -1.5%;
  z-index: 5;
  display: block;
  width: auto !important;
  height: 57.5% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  transform: none !important;
  filter: drop-shadow(0 0.45vw 0.75vw rgba(25, 45, 60, 0.04));
  opacity: 0;
  pointer-events: none;
}

.jike-motion-cover__cursor {
  position: absolute;
  left: 69%;
  top: 31%;
  z-index: 7;
  width: clamp(8px, 1.15vw, 19px);
  height: clamp(8px, 1.15vw, 19px);
  border: clamp(1px, 0.12vw, 2px) solid #fff;
  border-radius: 50%;
  background: #ffdc13;
  box-shadow:
    0 0 0 clamp(2px, 0.3vw, 5px) rgba(255, 220, 19, 0.22),
    0 0.45vw 1vw rgba(20, 47, 67, 0.26);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  pointer-events: none;
}

.jike-motion-cover__cursor::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210%;
  height: 210%;
  border: 1px solid rgba(24, 161, 242, 0.68);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
}

.jike-motion-cover__cursor::after {
  content: "";
  position: absolute;
  right: -54%;
  bottom: -66%;
  width: 0;
  height: 0;
  border-top: clamp(5px, 0.6vw, 10px) solid #132f43;
  border-right: clamp(3px, 0.36vw, 6px) solid transparent;
  transform: rotate(-22deg);
  filter: drop-shadow(0 1px 0 #fff);
}

.jike-motion-cover__swipe {
  display: none;
}

.jike-motion-cover__hint {
  position: absolute;
  right: 3.1%;
  bottom: 4.4%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.7em;
  border: 1px solid rgba(19, 47, 67, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #132f43;
  font: 500 clamp(6px, 0.62vw, 10px) / 1 "DM Mono", monospace;
  letter-spacing: 0.04em;
  box-shadow: 0 0.6vw 1.4vw -0.9vw rgba(19, 47, 67, 0.34);
  opacity: 0;
  transform: translateY(4px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.jike-motion-cover__hint::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #ffdc13;
  box-shadow: 0 0 0 0.25em rgba(255, 220, 19, 0.2);
}

.jike-motion-cover.is-playing .jike-motion-cover__screen {
  animation: jike-screen-stage 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__person--woman {
  animation: jike-woman-signal 7.2s ease both;
}

.jike-motion-cover.is-playing .jike-motion-cover__person--man {
  animation: jike-man-signal 7.2s ease both;
}

.jike-motion-cover.is-playing::before {
  animation: jike-community-glow 7.2s ease both;
}

.jike-motion-cover.is-playing::after {
  animation: jike-frame-breath 7.2s ease both;
}

.jike-motion-cover.is-playing .jike-motion-cover__wash {
  animation: jike-opening-wash 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__connection {
  animation: jike-connection-line 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__connection::after {
  animation: jike-connection-dot 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__spark {
  animation: jike-community-spark 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-ping {
  animation: jike-phone-ping 7.2s ease both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-ping::before {
  animation: jike-phone-ring-a 7.2s ease-out both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-ping::after {
  animation: jike-phone-ring-b 7.2s ease-out both;
}

.jike-motion-cover.is-playing .jike-motion-cover__topics {
  animation: jike-topic-particles 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__footer-sheen {
  animation: jike-footer-sheen 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__title-trace {
  animation: jike-title-trace 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-sheen {
  animation: jike-phone-sheen 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__ground-glow {
  animation: jike-ground-glow 7.2s ease both;
}

.jike-motion-cover.is-playing .jike-motion-cover__reactions {
  animation: jike-reaction-main 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__reactions::before {
  animation: jike-reaction-a 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__reactions::after {
  animation: jike-reaction-b 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__screen-image--home {
  animation: jike-screen-home-switch 7.2s ease both;
}

.jike-motion-cover.is-playing .jike-motion-cover__screen::before {
  animation: jike-screen-switch-wash 7.2s ease both;
}

.jike-motion-cover.is-playing .jike-motion-cover__screen::after {
  animation: jike-screen-tab-indicator 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__cursor {
  animation: jike-cursor-tour 7.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__cursor::before {
  animation: jike-click-rings 7.2s ease-out both;
}

.jike-motion-cover.is-playing .jike-motion-cover__hint {
  animation: jike-hint 7.2s ease both;
}

@keyframes jike-screen-stage {
  0%,
  11%,
  91%,
  100% {
    opacity: 0;
  }
  15%,
  87% {
    opacity: 1;
  }
}

@keyframes jike-woman-signal {
  0%,
  10%,
  32%,
  68%,
  84%,
  100% {
    opacity: 0;
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(24, 164, 244, 0));
  }

  17%,
  23% {
    opacity: 0.72;
    filter: brightness(1.055) saturate(1.04) drop-shadow(0 0 0.52vw rgba(24, 164, 244, 0.32));
  }

  28% {
    opacity: 0.2;
    filter: brightness(1.02) saturate(1.02) drop-shadow(0 0 0.24vw rgba(24, 164, 244, 0.16));
  }

  74%,
  79% {
    opacity: 0.28;
    filter: brightness(1.035) saturate(1.025) drop-shadow(0 0 0.36vw rgba(24, 164, 244, 0.2));
  }
}

@keyframes jike-man-signal {
  0%,
  39%,
  62%,
  68%,
  84%,
  100% {
    opacity: 0;
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255, 223, 21, 0));
  }

  46%,
  52% {
    opacity: 0.68;
    filter: brightness(1.055) saturate(1.035) drop-shadow(0 0 0.52vw rgba(255, 223, 21, 0.3));
  }

  58% {
    opacity: 0.18;
    filter: brightness(1.02) saturate(1.015) drop-shadow(0 0 0.24vw rgba(255, 223, 21, 0.15));
  }

  74%,
  79% {
    opacity: 0.27;
    filter: brightness(1.035) saturate(1.025) drop-shadow(0 0 0.36vw rgba(255, 223, 21, 0.2));
  }
}

@keyframes jike-community-glow {
  0%,
  10%,
  67%,
  84%,
  100% {
    opacity: 0;
  }

  20%,
  50% {
    opacity: 0.74;
  }

  75%,
  79% {
    opacity: 0.32;
  }
}

@keyframes jike-frame-breath {
  0%,
  6%,
  32%,
  69%,
  88%,
  100% {
    border-color: rgba(108, 118, 255, 0);
    box-shadow:
      inset 0 0 0 1px rgba(255, 223, 21, 0),
      inset 0 0 2.2vw rgba(108, 118, 255, 0);
    opacity: 0;
  }

  13%,
  23% {
    border-color: rgba(108, 118, 255, 0.24);
    box-shadow:
      inset 0 0 0 1px rgba(255, 223, 21, 0.08),
      inset 0 0 2.2vw rgba(108, 118, 255, 0.07);
    opacity: 1;
  }

  76%,
  82% {
    border-color: rgba(108, 118, 255, 0.18);
    box-shadow:
      inset 0 0 0 1px rgba(255, 223, 21, 0.13),
      inset 0 0 2.2vw rgba(108, 118, 255, 0.055);
    opacity: 1;
  }
}

@keyframes jike-opening-wash {
  0%,
  5% {
    opacity: 0;
    transform: translateX(-55%);
  }

  12% {
    opacity: 0.52;
  }

  25%,
  100% {
    opacity: 0;
    transform: translateX(55%);
  }
}

@keyframes jike-connection-line {
  0%,
  25% {
    opacity: 0;
    transform: rotate(-10deg) scaleX(0);
  }

  33%,
  49% {
    opacity: 0.74;
    transform: rotate(-10deg) scaleX(1);
  }

  57%,
  100% {
    opacity: 0;
    transform: rotate(-10deg) scaleX(1);
  }
}

@keyframes jike-connection-dot {
  0%,
  27% {
    left: 0;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }

  32% {
    left: 0;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  48% {
    left: 100%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  53%,
  100% {
    left: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
}

@keyframes jike-community-spark {
  0%,
  43%,
  62%,
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(0);
  }

  50% {
    opacity: 0.92;
    transform: rotate(45deg) scale(1);
  }

  56% {
    opacity: 0.3;
    transform: rotate(135deg) scale(0.72);
  }
}

@keyframes jike-phone-ping {
  0%,
  53%,
  72%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }

  58%,
  64% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1);
  }

  68% {
    opacity: 0.24;
    transform: translate(-50%, -50%) scale(0.78);
  }
}

@keyframes jike-phone-ring-a {
  0%,
  55% {
    opacity: 0;
    transform: scale(0.55);
  }

  60% {
    opacity: 0.62;
  }

  69%,
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes jike-phone-ring-b {
  0%,
  59% {
    opacity: 0;
    transform: scale(0.55);
  }

  64% {
    opacity: 0.46;
  }

  73%,
  100% {
    opacity: 0;
    transform: scale(2.15);
  }
}

@keyframes jike-topic-particles {
  0%,
  61% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }

  67% {
    opacity: 0.88;
    transform: translateY(0) scale(1);
  }

  80%,
  100% {
    opacity: 0;
    transform: translateY(-1.8vw) scale(0.8);
  }
}

@keyframes jike-footer-sheen {
  0%,
  74% {
    left: -35%;
    opacity: 0;
  }

  79% {
    opacity: 0.48;
  }

  92%,
  100% {
    left: 110%;
    opacity: 0;
  }
}

@keyframes jike-title-trace {
  0%,
  6% {
    opacity: 0;
    transform: scaleX(0);
  }

  13% {
    opacity: 0.92;
    transform: scaleX(1);
  }

  22% {
    opacity: 0.34;
    transform: scaleX(1);
  }

  31%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes jike-phone-sheen {
  0%,
  26% {
    background-position: 130% 0;
    opacity: 0;
  }

  32% {
    opacity: 0.48;
  }

  45% {
    background-position: -130% 0;
    opacity: 0;
  }

  100% {
    background-position: -130% 0;
    opacity: 0;
  }
}

@keyframes jike-ground-glow {
  0%,
  40%,
  88%,
  100% {
    opacity: 0;
    transform: scaleX(0.7);
  }

  51%,
  78% {
    opacity: 0.7;
    transform: scaleX(1);
  }
}

@keyframes jike-reaction-main {
  0%,
  52% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }

  58% {
    opacity: 0.94;
    transform: translateY(-0.25vw) scale(1);
  }

  73%,
  100% {
    opacity: 0;
    transform: translateY(-2.25vw) scale(0.78);
  }
}

@keyframes jike-reaction-a {
  0%,
  56% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }

  62% {
    opacity: 0.9;
    transform: translateY(-0.2vw) scale(1);
  }

  78%,
  100% {
    opacity: 0;
    transform: translateY(-2.65vw) scale(0.72);
  }
}

@keyframes jike-reaction-b {
  0%,
  60% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }

  66% {
    opacity: 0.82;
    transform: translateY(-0.15vw) scale(1);
  }

  82%,
  100% {
    opacity: 0;
    transform: translateY(-2.4vw) scale(0.7);
  }
}

@keyframes jike-screen-home-switch {
  0%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
  }

  15%,
  37%,
  58% {
    opacity: 0.94;
    transform: translate3d(0, 0, 0);
    filter: brightness(1.025) saturate(0.96);
  }

  19%,
  41%,
  62% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
  }
}

@keyframes jike-screen-switch-wash {
  0%,
  13%,
  20%,
  35%,
  42%,
  56%,
  63%,
  100% {
    opacity: 0;
  }

  16%,
  38%,
  59% {
    opacity: 0.16;
  }
}

@keyframes jike-screen-tab-indicator {
  0%,
  10% {
    opacity: 0;
    transform: translateX(0) scaleX(0.55);
  }

  14%,
  28% {
    opacity: 0.95;
    transform: translateX(0) scaleX(1);
  }

  36%,
  49% {
    opacity: 0.95;
    transform: translateX(116%) scaleX(1);
  }

  57%,
  72% {
    opacity: 0.95;
    transform: translateX(229%) scaleX(1);
  }

  81%,
  100% {
    opacity: 0;
    transform: translateX(229%) scaleX(0.6);
  }
}

@keyframes jike-cursor-tour {
  0%,
  6% {
    left: 62.5%;
    top: 32.5%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  10% {
    left: 62.5%;
    top: 32.5%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  13% {
    left: 62.5%;
    top: 32.5%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.78);
  }
  17% {
    left: 62.5%;
    top: 32.5%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  31% {
    left: 67.9%;
    top: 32.5%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  34% {
    left: 67.9%;
    top: 32.5%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.76);
  }
  39% {
    left: 67.9%;
    top: 32.5%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  48% {
    left: 73.2%;
    top: 32.5%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  51% {
    left: 73.2%;
    top: 32.5%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.76);
  }
  56% {
    left: 73.2%;
    top: 32.5%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    left: 67.8%;
    top: 52%;
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1);
  }
  74% {
    left: 67.8%;
    top: 52%;
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(0.76);
  }
  79% {
    left: 67.8%;
    top: 52%;
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1);
  }
  86% {
    left: 67.8%;
    top: 52%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
  100% {
    opacity: 0;
  }
}

@keyframes jike-click-rings {
  0%,
  11%,
  18%,
  32%,
  40%,
  49%,
  57%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  14%,
  35%,
  52% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  17%,
  39%,
  56% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.55);
  }
}

@keyframes jike-hint {
  0%,
  15%,
  84%,
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
  19%,
  80% {
    opacity: 0.86;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .jike-motion-cover__hint {
    display: none;
  }

  .jike-motion-cover__cursor {
    width: 8px;
    height: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jike-motion-cover::before,
  .jike-motion-cover::after,
  .jike-motion-cover__person,
  .jike-motion-cover__connection,
  .jike-motion-cover__connection::after,
  .jike-motion-cover__spark,
  .jike-motion-cover__wash,
  .jike-motion-cover__phone-ping,
  .jike-motion-cover__phone-ping::before,
  .jike-motion-cover__phone-ping::after,
  .jike-motion-cover__topics,
  .jike-motion-cover__footer-sheen,
  .jike-motion-cover__title-trace,
  .jike-motion-cover__phone-sheen,
  .jike-motion-cover__ground-glow,
  .jike-motion-cover__reactions,
  .jike-motion-cover__reactions::before,
  .jike-motion-cover__reactions::after,
  .jike-motion-cover__screen,
  .jike-motion-cover__screen-image,
  .jike-motion-cover__cursor,
  .jike-motion-cover__cursor::before,
  .jike-motion-cover__swipe,
  .jike-motion-cover__hint {
    animation: none !important;
  }

  .jike-motion-cover__screen,
  .jike-motion-cover__cursor,
  .jike-motion-cover__swipe,
  .jike-motion-cover__hint {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Community cover v2: a short, readable "discovery" sequence                */
/* -------------------------------------------------------------------------- */

.jike-motion-cover__plate {
  transform-origin: 64% 54%;
  will-change: transform, filter, opacity;
}

.jike-motion-cover__phone-focus {
  position: absolute;
  z-index: 6;
  left: 56.35%;
  top: 13.2%;
  width: 27.1%;
  height: 91%;
  border: clamp(1px, 0.14vw, 2px) solid rgba(255, 223, 21, 0.76);
  border-radius: 16% 16% 2% 2%;
  box-shadow:
    0 0 0 clamp(2px, 0.3vw, 5px) rgba(255, 223, 21, 0.15),
    0 0 clamp(10px, 2.4vw, 32px) rgba(24, 164, 244, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.82);
  transform-origin: 50% 52%;
}

.jike-motion-cover__phone-focus::before {
  position: absolute;
  inset: -10%;
  border: 1px solid rgba(24, 164, 244, 0.56);
  border-radius: inherit;
  content: "";
  opacity: 0;
  transform: scale(0.84);
}

.jike-motion-cover.is-playing .jike-motion-cover__plate {
  animation: jike-v2-camera-arrive 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing::before {
  animation: jike-v2-community-glow 1.88s ease both;
}

.jike-motion-cover.is-playing::after {
  animation: jike-v2-frame-flash 1.88s ease both;
}

.jike-motion-cover.is-playing .jike-motion-cover__person {
  animation: none;
}

.jike-motion-cover.is-playing .jike-motion-cover__wash {
  animation: jike-v2-opening-wash 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__title-trace {
  animation: jike-v2-title-trace 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-sheen {
  animation: jike-v2-phone-sheen 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-focus {
  animation: jike-v2-phone-focus 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-focus::before {
  animation: jike-v2-focus-ring 1.88s ease-out both;
}

.jike-motion-cover.is-playing .jike-motion-cover__cursor {
  animation: jike-v2-cursor-tour 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__cursor::before {
  animation: jike-v2-click-ring 1.88s ease-out both;
}

.jike-motion-cover.is-playing .jike-motion-cover__connection {
  animation: jike-v2-connection 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__connection::after {
  animation: jike-v2-connection-dot 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__spark {
  animation: jike-v2-spark 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-ping {
  animation: jike-v2-phone-ping 1.88s ease both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-ping::before {
  animation: jike-v2-phone-ring-a 1.88s ease-out both;
}

.jike-motion-cover.is-playing .jike-motion-cover__phone-ping::after {
  animation: jike-v2-phone-ring-b 1.88s ease-out both;
}

.jike-motion-cover.is-playing .jike-motion-cover__topics {
  animation: jike-v2-topics 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__reactions {
  animation: jike-v2-reaction-main 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__reactions::before {
  animation: jike-v2-reaction-a 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__reactions::after {
  animation: jike-v2-reaction-b 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-playing .jike-motion-cover__ground-glow {
  animation: jike-v2-ground-glow 1.88s ease both;
}

.jike-motion-cover.is-playing .jike-motion-cover__footer-sheen {
  animation: jike-v2-footer-sheen 1.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Hover is a short confirmation, not a replay of the whole entrance. */
.jike-motion-cover.is-hovering .jike-motion-cover__plate {
  animation: jike-v2-hover-nudge 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-hovering .jike-motion-cover__phone-sheen {
  animation: jike-v2-hover-sheen 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-hovering .jike-motion-cover__phone-focus {
  animation: jike-v2-hover-focus 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jike-motion-cover.is-hovering .jike-motion-cover__phone-ping {
  animation: jike-v2-hover-ping 720ms ease both;
}

@keyframes jike-v2-camera-arrive {
  0% {
    opacity: 0.24;
    filter: saturate(0.76) brightness(1.1) blur(1.2px);
    transform: translate3d(7%, 2.6%, 0) scale(1.115);
  }
  40% {
    opacity: 1;
    filter: saturate(0.94) brightness(1.02) blur(0);
    transform: translate3d(0.85%, 0.25%, 0) scale(1.035);
  }
  72% {
    filter: none;
    transform: translate3d(-0.65%, -0.18%, 0) scale(0.992);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes jike-v2-community-glow {
  0%, 10%, 100% { opacity: 0; }
  28% { opacity: 0.72; }
  60% { opacity: 0.38; }
  82% { opacity: 0.08; }
}

@keyframes jike-v2-frame-flash {
  0%, 12%, 100% {
    border-color: rgba(108, 118, 255, 0);
    box-shadow: none;
    opacity: 0;
  }
  32%, 68% {
    border-color: rgba(108, 118, 255, 0.36);
    box-shadow:
      inset 0 0 0 1px rgba(255, 223, 21, 0.14),
      inset 0 0 2.4vw rgba(108, 118, 255, 0.1);
    opacity: 1;
  }
  87% { opacity: 0.34; }
}

@keyframes jike-v2-opening-wash {
  0%, 5% { opacity: 0; transform: translateX(-68%); }
  16% { opacity: 0.68; }
  48% { opacity: 0.22; transform: translateX(18%); }
  100% { opacity: 0; transform: translateX(72%); }
}

@keyframes jike-v2-title-trace {
  0%, 12%, 100% { opacity: 0; transform: scaleX(0); }
  27% { opacity: 1; transform: scaleX(1.22); }
  49% { opacity: 0.42; transform: scaleX(1); }
  65% { opacity: 0; transform: scaleX(1); }
}

@keyframes jike-v2-phone-sheen {
  0%, 18% { background-position: 130% 0; opacity: 0; }
  31% { opacity: 0.92; }
  61% { background-position: -130% 0; opacity: 0.2; }
  82%, 100% { background-position: -130% 0; opacity: 0; }
}

@keyframes jike-v2-phone-focus {
  0%, 20%, 100% { opacity: 0; transform: scale(0.82); }
  36% { opacity: 0.94; transform: scale(1); }
  56% { opacity: 0.62; transform: scale(1.025); }
  76% { opacity: 0; transform: scale(1.08); }
}

@keyframes jike-v2-focus-ring {
  0%, 31%, 100% { opacity: 0; transform: scale(0.84); }
  44% { opacity: 0.86; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.13); }
}

@keyframes jike-v2-cursor-tour {
  0%, 26% {
    left: 63.2%; top: 31.5%; opacity: 0; transform: translate(-50%, -50%) scale(0.68);
  }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  40% { left: 67.8%; top: 31.5%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(0.7); }
  52% { left: 72.6%; top: 31.5%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  59% { left: 72.6%; top: 45%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  64% { transform: translate(-50%, -50%) scale(0.7); }
  78% { left: 76.6%; top: 56%; opacity: 0.82; transform: translate(-50%, -50%) scale(1); }
  88%, 100% { left: 76.6%; top: 56%; opacity: 0; transform: translate(-50%, -50%) scale(0.68); }
}

@keyframes jike-v2-click-ring {
  0%, 35%, 44%, 59%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.36); }
  39%, 54% { opacity: 0.94; transform: translate(-50%, -50%) scale(1); }
  43%, 58% { opacity: 0; transform: translate(-50%, -50%) scale(1.72); }
}

@keyframes jike-v2-connection {
  0%, 48%, 100% { opacity: 0; transform: rotate(-10deg) scaleX(0); }
  57% { opacity: 0.94; transform: rotate(-10deg) scaleX(1); }
  75% { opacity: 0.52; transform: rotate(-10deg) scaleX(1); }
  88% { opacity: 0; transform: rotate(-10deg) scaleX(1); }
}

@keyframes jike-v2-connection-dot {
  0%, 51%, 100% { left: 0; opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  59% { left: 0; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75% { left: 100%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  87% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

@keyframes jike-v2-spark {
  0%, 62%, 100% { opacity: 0; transform: rotate(45deg) scale(0); }
  69% { opacity: 1; transform: rotate(45deg) scale(1.25); }
  83% { opacity: 0; transform: rotate(165deg) scale(0.78); }
}

@keyframes jike-v2-phone-ping {
  0%, 49%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  58% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  74% { opacity: 0.28; transform: translate(-50%, -50%) scale(0.86); }
}

@keyframes jike-v2-phone-ring-a {
  0%, 53%, 100% { opacity: 0; transform: scale(0.48); }
  61% { opacity: 0.72; transform: scale(1); }
  77% { opacity: 0; transform: scale(2.12); }
}

@keyframes jike-v2-phone-ring-b {
  0%, 57%, 100% { opacity: 0; transform: scale(0.48); }
  65% { opacity: 0.54; transform: scale(1); }
  82% { opacity: 0; transform: scale(2.62); }
}

@keyframes jike-v2-topics {
  0%, 62%, 100% { opacity: 0; transform: translateY(0) scale(0.4); }
  70% { opacity: 0.98; transform: translateY(-0.1vw) scale(1.12); }
  86% { opacity: 0; transform: translateY(-2.2vw) scale(0.78); }
}

@keyframes jike-v2-reaction-main {
  0%, 57%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  67% { opacity: 1; transform: translateY(-0.32vw) scale(1.16); }
  88% { opacity: 0; transform: translateY(-2.8vw) scale(0.72); }
}

@keyframes jike-v2-reaction-a {
  0%, 62%, 100% { opacity: 0; transform: translateY(0) scale(0.45); }
  72% { opacity: 0.95; transform: translateY(-0.26vw) scale(1.12); }
  91% { opacity: 0; transform: translateY(-3.1vw) scale(0.68); }
}

@keyframes jike-v2-reaction-b {
  0%, 66%, 100% { opacity: 0; transform: translateY(0) scale(0.45); }
  76% { opacity: 0.9; transform: translateY(-0.18vw) scale(1.08); }
  94% { opacity: 0; transform: translateY(-2.8vw) scale(0.64); }
}

@keyframes jike-v2-ground-glow {
  0%, 49%, 100% { opacity: 0; transform: scaleX(0.64); }
  62% { opacity: 0.84; transform: scaleX(1.12); }
  82% { opacity: 0.16; transform: scaleX(1); }
}

@keyframes jike-v2-footer-sheen {
  0%, 66% { left: -35%; opacity: 0; }
  74% { opacity: 0.68; }
  94%, 100% { left: 112%; opacity: 0; }
}

@keyframes jike-v2-hover-nudge {
  0% { filter: none; transform: translate3d(0, 0, 0) scale(1); }
  48% { filter: saturate(1.06) brightness(1.025); transform: translate3d(-1.25%, -0.45%, 0) scale(1.036); }
  100% { filter: none; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes jike-v2-hover-sheen {
  0% { background-position: 124% 0; opacity: 0; }
  24% { opacity: 0.82; }
  72%, 100% { background-position: -124% 0; opacity: 0; }
}

@keyframes jike-v2-hover-focus {
  0%, 100% { opacity: 0; transform: scale(0.9); }
  36% { opacity: 0.76; transform: scale(1); }
  68% { opacity: 0; transform: scale(1.05); }
}

@keyframes jike-v2-hover-ping {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.44); }
  48% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.08); }
  72% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .jike-motion-cover.is-playing .jike-motion-cover__plate,
  .jike-motion-cover.is-hovering .jike-motion-cover__plate,
  .jike-motion-cover__phone-focus,
  .jike-motion-cover__phone-focus::before {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .jike-motion-cover__phone-focus {
    display: none;
  }
}