/* PJ116 动效库：纯 CSS + js/studio.js 里的 IntersectionObserver。全部尊重"减少动态效果"。
   用法：给元素加 data-reveal / .float / .marquee / .shimmer / .tilt 即可 */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="zoom"] { transform: scale(.92); }
[data-reveal].in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .1s; } [data-delay="2"] { transition-delay: .2s; } [data-delay="3"] { transition-delay: .3s; }

.float { animation: float 6s ease-in-out infinite; }
.float.b { animation-duration: 8s; animation-delay: -2s; } .float.c { animation-duration: 7s; animation-delay: -4s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(3deg); } }

.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 48px; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.shimmer { background: linear-gradient(100deg, var(--text) 30%, var(--brand-text) 50%, var(--text) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.14); }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; display: inline-block; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.grow-bar { height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.grow-bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width 1.2s ease; border-radius: 8px; }
.in .grow-bar i, .grow-bar.in i { width: var(--v, 60%); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .float, .marquee .track, .shimmer, .pulse-dot { animation: none; }
  .shimmer { color: var(--text); background: none; }
}