/* =========================================================
   皮圈 CMS · 通用动效库 (animations.css)
   作用：滚动揭示 / 图片悬停 / 循环动画 / 视差 / 跑马灯 / 数字滚动 / 打字机
   编辑器与线上站点共用；类名统一以 pq- 前缀，避免与 style.css 冲突
   ========================================================= */

/* ---------- 滚动揭示（进入视口触发） ---------- */
.pq-reveal,
.pq-reveal-left,
.pq-reveal-right,
.pq-reveal-zoom {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
              transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.pq-reveal        { transform: translateY(48px); }
.pq-reveal-left   { transform: translateX(-64px); }
.pq-reveal-right  { transform: translateX(64px); }
.pq-reveal-zoom   { transform: scale(.86); }
.pq-reveal.is-visible,
.pq-reveal-left.is-visible,
.pq-reveal-right.is-visible,
.pq-reveal-zoom.is-visible { opacity: 1; transform: none; }

/* 分级延迟 */
.pq-reveal-delay-1 { transition-delay: .15s; }
.pq-reveal-delay-2 { transition-delay: .30s; }
.pq-reveal-delay-3 { transition-delay: .45s; }

/* ---------- 图片悬停特效 ---------- */
.pq-hover-zoom { overflow: hidden; }
.pq-hover-zoom img {
  display: block; width: 100%; height: auto;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.pq-hover-zoom:hover img { transform: scale(1.08); }

.pq-hover-lift { transition: transform .35s ease, box-shadow .35s ease; }
.pq-hover-lift:hover { transform: translateY(-10px); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }

.pq-hover-glow { transition: box-shadow .35s ease; }
.pq-hover-glow:hover { box-shadow: 0 0 28px rgba(184, 153, 106, .55); }

/* ---------- 循环动画 ---------- */
.pq-float  { animation: pq-float 3.2s ease-in-out infinite; }
.pq-pulse  { animation: pq-pulse 2s ease-in-out infinite; }
.pq-rotate { animation: pq-rotate 9s linear infinite; }
.pq-zoom   { animation: pq-zoom 3.5s ease-in-out infinite alternate; }
.pq-shake  { animation: pq-shake 1.6s ease-in-out infinite; }

@keyframes pq-float  { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(-14px); } }
@keyframes pq-pulse  { 0%, 100% { transform: scale(1);    opacity: 1;  } 50% { transform: scale(1.05); opacity: .9; } }
@keyframes pq-rotate { to { transform: rotate(360deg); } }
@keyframes pq-zoom   { from { transform: scale(1); }      to { transform: scale(1.12); } }
@keyframes pq-shake  { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

/* ---------- 视差背景 ---------- */
.pq-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- 跑马灯 ---------- */
.pq-marquee { overflow: hidden; white-space: nowrap; width: 100%; }
.pq-marquee__track {
  display: inline-block; white-space: nowrap; padding-left: 100%;
  animation: pq-marquee 18s linear infinite;
}
.pq-marquee:hover .pq-marquee__track { animation-play-state: paused; }
@keyframes pq-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- 数字滚动 ---------- */
.pq-count { font-variant-numeric: tabular-nums; }

/* ---------- 打字机 ---------- */
.pq-typed { display: inline-block; }
.pq-typed::after {
  content: '|'; margin-left: 2px;
  animation: pq-caret 1s steps(1) infinite; color: #B8996A;
}
@keyframes pq-caret { 50% { opacity: 0; } }

/* 尊重「减少动态效果」的系统偏好 */
@media (prefers-reduced-motion: reduce) {
  .pq-reveal, .pq-reveal-left, .pq-reveal-right, .pq-reveal-zoom { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pq-float, .pq-pulse, .pq-rotate, .pq-zoom, .pq-shake, .pq-marquee__track { animation: none !important; }
}