/* App 界面自己的动画：只在 ?live 打开时生效；离屏渲染与减少动态效果时保持最终状态 */
:root { --ease: cubic-bezier(.2, .7, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }
.live:not(.play) [data-a] { opacity: 0; }
.live.play [data-a="rise"] { animation: yj-rise .7s var(--ease) both; animation-delay: var(--d, 0s); }
.live.play [data-a="drop"] { animation: yj-drop .7s var(--spring) both; animation-delay: var(--d, 0s); }
.live.play [data-a="pop"] { animation: yj-pop .45s var(--spring) both; animation-delay: var(--d, 0s); }
.live.play [data-a="grow"] { animation: yj-grow .9s var(--ease) both; animation-delay: var(--d, 0s); transform-origin: 50% 100%; }
.live.play [data-a="fill"] { animation: yj-fill 1.1s var(--ease) both; animation-delay: var(--d, 0s); transform-origin: 0 50%; }
.live.play [data-a="fade"] { animation: yj-fade .8s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes yj-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes yj-drop { from { opacity: 0; transform: translateY(-120%) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes yj-pop { 0% { opacity: 0; transform: scale(.2); } 100% { opacity: 1; transform: none; } }
@keyframes yj-grow { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes yj-fill { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes yj-fade { from { opacity: 0; } to { opacity: 1; } }

/* 点一下的反馈 */
.tap { animation: yj-tap .5s var(--ease); }
@keyframes yj-tap { 40% { transform: scale(.9); filter: brightness(.92); } 100% { transform: none; } }
.collapse { transition: max-height .6s var(--ease), opacity .4s, margin .6s var(--ease), padding .6s var(--ease); max-height: 0 !important; opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; }
.flash { animation: yj-flash 1.2s var(--ease); }
@keyframes yj-flash { 0% { background: rgba(23, 100, 75, .14); } 100% { background: transparent; } }
.caret-blink { animation: yj-caret 1s steps(1) infinite; }
@keyframes yj-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .live:not(.play) [data-a] { opacity: 1; }
  .live.play [data-a] { animation: none !important; }
}