/* 元素入场动画（编辑预览 / 阅读器共用） */
@keyframes hc-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hc-bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes hc-flyIn-up {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hc-flyIn-down {
  from { opacity: 0; transform: translateY(-80px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hc-flyIn-left {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hc-flyIn-right {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hc-slideIn-up {
  from { transform: translateY(100%); opacity: 0.2; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes hc-slideIn-down {
  from { transform: translateY(-100%); opacity: 0.2; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes hc-slideIn-left {
  from { transform: translateX(100%); opacity: 0.2; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes hc-slideIn-right {
  from { transform: translateX(-100%); opacity: 0.2; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes hc-flip {
  from { transform: perspective(600px) rotateY(-90deg); opacity: 0; }
  to { transform: perspective(600px) rotateY(0); opacity: 1; }
}
@keyframes hc-driveIn {
  from { opacity: 0; transform: translateX(-120%) skewX(12deg); }
  to { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes hc-spinIn {
  from { opacity: 0; transform: rotate(-180deg) scale(0.4); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes hc-dropIn {
  0% { opacity: 0; transform: translateY(-120px); }
  60% { opacity: 1; transform: translateY(12px); }
  100% { transform: translateY(0); }
}
@keyframes hc-expand {
  from { opacity: 0; transform: scaleX(0.1); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes hc-zoomToss {
  0% { opacity: 0; transform: scale(2.2) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes hc-meteor {
  from { opacity: 0; transform: translate(-80px, -80px) scale(0.4); filter: blur(2px); }
  to { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
}
@keyframes hc-flyShake {
  0% { opacity: 0; transform: translateY(60px); }
  60% { opacity: 1; transform: translateY(0); }
  70% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
  90% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
@keyframes hc-scrollIn {
  from { opacity: 0; transform: translateY(40px) rotateX(40deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* —— 新增入场效果 —— */
@keyframes hc-zoomIn {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hc-zoomOut {
  from { opacity: 0; transform: scale(1.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hc-fadeScale {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hc-popIn {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes hc-flipX {
  from { opacity: 0; transform: perspective(700px) rotateX(90deg); }
  to { opacity: 1; transform: perspective(700px) rotateX(0); }
}
@keyframes hc-flipY {
  from { opacity: 0; transform: perspective(700px) rotateY(-90deg); }
  to { opacity: 1; transform: perspective(700px) rotateY(0); }
}
@keyframes hc-rotateIn {
  from { opacity: 0; transform: rotate(-45deg) scale(0.6); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes hc-swing {
  0% { opacity: 0; transform: rotate(-18deg); transform-origin: top center; }
  40% { opacity: 1; transform: rotate(12deg); }
  70% { transform: rotate(-6deg); }
  100% { transform: rotate(0); transform-origin: top center; }
}
@keyframes hc-rubberBand {
  0% { opacity: 0; transform: scaleX(0.3); }
  40% { opacity: 1; transform: scaleX(1.2); }
  60% { transform: scaleX(0.9); }
  80% { transform: scaleX(1.05); }
  100% { transform: scaleX(1); }
}
@keyframes hc-heartbeat {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; transform: scale(1.15); }
  50% { transform: scale(0.92); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes hc-floatIn {
  0% { opacity: 0; transform: translateY(28px); }
  60% { opacity: 1; transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@keyframes hc-blurIn {
  from { opacity: 0; filter: blur(12px); transform: scale(1.05); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes hc-tiltIn {
  from { opacity: 0; transform: perspective(800px) rotateY(35deg) translateX(40px); }
  to { opacity: 1; transform: perspective(800px) rotateY(0) translateX(0); }
}
@keyframes hc-foldIn {
  from { opacity: 0; transform: perspective(900px) rotateX(-75deg); transform-origin: bottom; }
  to { opacity: 1; transform: perspective(900px) rotateX(0); transform-origin: bottom; }
}
@keyframes hc-spiralIn {
  from { opacity: 0; transform: rotate(540deg) scale(0.1); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes hc-lightSpeed-left {
  from { opacity: 0; transform: translateX(100%) skewX(-22deg); }
  to { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes hc-lightSpeed-right {
  from { opacity: 0; transform: translateX(-100%) skewX(22deg); }
  to { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes hc-lightSpeed-up {
  from { opacity: 0; transform: translateY(80%) skewY(12deg); }
  to { opacity: 1; transform: translateY(0) skewY(0); }
}
@keyframes hc-lightSpeed-down {
  from { opacity: 0; transform: translateY(-80%) skewY(-12deg); }
  to { opacity: 1; transform: translateY(0) skewY(0); }
}
@keyframes hc-rollIn-left {
  from { opacity: 0; transform: translateX(100%) rotate(120deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes hc-rollIn-right {
  from { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes hc-rollIn-up {
  from { opacity: 0; transform: translateY(100%) rotate(90deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes hc-rollIn-down {
  from { opacity: 0; transform: translateY(-100%) rotate(-90deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes hc-wipe-up {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes hc-wipe-down {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes hc-wipe-left {
  from { opacity: 0; clip-path: inset(0 0 0 100%); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes hc-wipe-right {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes hc-bounceSoft {
  0% { opacity: 0; transform: translateY(40px); }
  55% { opacity: 1; transform: translateY(-10px); }
  75% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}
@keyframes hc-flashIn {
  0% { opacity: 0; }
  20% { opacity: 1; }
  40% { opacity: 0.35; }
  60% { opacity: 1; }
  80% { opacity: 0.7; }
  100% { opacity: 1; }
}
@keyframes hc-growUp {
  from { opacity: 0; transform: scaleY(0); transform-origin: bottom center; }
  to { opacity: 1; transform: scaleY(1); transform-origin: bottom center; }
}

.hc-animating {
  animation-fill-mode: both;
  pointer-events: none;
}

/* 尚未翻到的页面：有入场动画的元素先隐藏，翻到再播 */
.hc-anim-pending {
  opacity: 0 !important;
  pointer-events: none;
}