/* CTAI-AD logo motion — use with logo-nav.png / favicon.png / logo-mark.png */

.logo-motion {
  display: inline-block;
  line-height: 0;
  transform-origin: center bottom;
}

.logo-motion img {
  display: block;
  width: 100%;
  height: auto;
}

/* ① Idle — 轻呼吸 */
.logo-motion--idle {
  animation: ctai-logo-bob 2.8s ease-in-out infinite;
}

/* ② Entrance — 出场（播一次） */
.logo-motion--entrance {
  animation: ctai-logo-in 1.05s cubic-bezier(0.22, 1.35, 0.36, 1) both;
}

/* ③ Wink stand-in — 轻歪头 */
.logo-motion--wink {
  animation: ctai-logo-tilt 3.2s ease-in-out infinite;
}

/* ④ Loading — 脉冲 */
.logo-motion--loading {
  animation: ctai-logo-bob 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0 transparent);
}
.logo-motion--loading img {
  animation: ctai-logo-glow 1.4s ease-in-out infinite;
}

/* ⑤ Celebrate — 欢庆 */
.logo-motion--celebrate {
  animation: ctai-logo-bounce 1.55s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}

@keyframes ctai-logo-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes ctai-logo-in {
  0% { transform: translateY(28px) scale(0.55); opacity: 0; }
  70% { transform: translateY(-6px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes ctai-logo-tilt {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  55% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
}

@keyframes ctai-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 212, 240, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(0, 212, 240, 0.55)); }
}

@keyframes ctai-logo-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-14px) scale(1.04); }
  55% { transform: translateY(2px) scale(0.98); }
  70% { transform: translateY(-4px) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-motion,
  .logo-motion img {
    animation: none !important;
    filter: none !important;
  }
}