#fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; contain: layout style paint; }
#fx-layer * { pointer-events: none; }
#fx-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.juice-ready #hero, .juice-ready #guide { opacity: 0; animation: none !important; }
.fx-rig { position: absolute; left: 0; top: 0; }
.fx-performer { position: absolute; inset: 0; transform-origin: 50% 82%; }
.fx-part { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fx-pevo .fx-body { clip-path: polygon(29% 0,100% 0,100% 100%,0 100%,0 54%,28% 54%,29% 42%); }
.fx-pevo .fx-limb { clip-path: polygon(0 0,29% 0,29% 42%,28% 54%,0 54%); transform-origin: 27% 51%; animation: pevo-claw 4.8s ease-in-out infinite; }
.fx-ori .fx-body { clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 87%,32% 87%,33% 50%,0 50%); }
.fx-ori .fx-limb { clip-path: polygon(0 50%,33% 50%,32% 87%,0 87%); transform-origin: 32% 53%; animation: ori-wing 6s ease-in-out infinite; }
.fx-pevo .fx-performer { animation: pevo-watch 8s ease-in-out infinite; }
.fx-ori .fx-performer { animation: ori-watch 7s ease-in-out infinite; }
.fx-rig[data-pose="cheer"] .fx-performer { animation: pevo-cheer 2.6s ease-in-out; }
.fx-ori[data-pose="cheer"] .fx-performer { animation: ori-cheer 2.4s ease-in-out; }
.fx-rig[data-pose="cheer"] .fx-limb { animation-duration: 1.8s; }
.fx-rig[data-pose="step"] .fx-performer { animation: pevo-step 2.4s ease-in-out; }
.fx-rig[data-pose="bow"] .fx-performer { animation: pevo-bow 2.5s ease-in-out; }
.fx-rig[data-pose="think"] .fx-performer { animation: pevo-think 2.5s ease-in-out; }
.fx-rig[data-pose="wave"] .fx-performer { animation: pevo-wave 2.8s ease-in-out; }
.fx-rig[data-pose="hello"] .fx-performer { animation: ori-cheer 2.2s ease-in-out; }
.fx-rig[data-pose="listen"] .fx-performer { animation: pevo-think 1.5s ease-in-out; }
.fx-rig.fx-still .fx-performer,.fx-rig.fx-still .fx-limb { animation: none !important; }
.fx-bloom { position: absolute; inset: 0; background: radial-gradient(ellipse at center,transparent 35%,#f2c141 100%); opacity: 0; }
.juice-ready #rewardOverlay #confetti { display: none; }
.juice-ready .answer-card.hint { animation: juice-hint 2.4s ease-in-out infinite !important; }
.juice-ready .progress-dot:last-child:not(.done):nth-child(4) { animation: none; }
.juice-ready .progress-dot.done + .progress-dot:last-child { animation: juice-last 2.6s ease-in-out infinite; }
.juice-ready .answer-card { position: relative; }
.juice-ready .answer-card.selected::before { content: ''; position: absolute; inset: -9px; border: 2px solid #f2c141; border-radius: inherit; opacity: .6; pointer-events: none; }
.juice-ready .confirm-btn.juice-cta { animation: juice-cta 2.2s ease-in-out infinite; }
.juice-ready .hero,.juice-ready .guide { animation: none !important; }
body[data-state="menu"] #fx-layer { visibility: hidden; }
body[data-state="intro"] .fx-rig,body[data-state="menu"] .fx-rig,body[data-state="level-complete"] .fx-rig,body[data-state="game-complete"] .fx-rig { display: none; }
body[data-state="menu"] .juice-cta { animation-play-state: paused !important; }
@keyframes pevo-watch {
  0%,15%,55%,100% { transform: translate(0,0) rotate(0); }
  24% { transform: translate(-4%,-2%) rotate(-4deg); }
  32% { transform: translate(-6%,0) rotate(2deg); }
  40% { transform: translate(-3%,-2%) rotate(-2deg); }
  70% { transform: scale(1.045,.965) rotate(2deg); }
  82% { transform: translateY(-3%) rotate(-2deg); }
}
@keyframes ori-watch { 0%,100%{transform:translateY(0) rotate(-2deg)} 30%{transform:translateY(-3%) rotate(3deg)} 60%{transform:translateY(-1%) rotate(-3deg)} 80%{transform:translateY(-4%) rotate(1deg)} }
@keyframes pevo-claw { 0%,42%,100%{transform:rotate(0)} 12%{transform:rotate(-7deg)} 25%{transform:rotate(5deg)} 68%{transform:rotate(-5deg)} 82%{transform:rotate(3deg)} }
@keyframes ori-wing { 0%,38%,100%{transform:rotate(0)} 15%{transform:rotate(7deg)} 23%{transform:rotate(-3deg)} 65%{transform:rotate(5deg)} 80%{transform:rotate(0)} }
@keyframes pevo-cheer {
  0%,100% { transform:none; } 12%{transform:scale(1.12,.88) rotate(-5deg)}
  28%{transform:translate(-5%,-14%) scale(.94,1.07) rotate(7deg)}
  43%{transform:translate(-6%,0) scale(1.08,.92) rotate(-7deg)}
  60%{transform:translate(-3%,-11%) rotate(8deg)} 75%{transform:translate(-1%,0) rotate(-5deg)} 87%{transform:translateY(-5%) rotate(3deg)}
}
@keyframes ori-cheer { 0%,100%{transform:none} 15%{transform:scale(1.06,.93) rotate(-4deg)} 35%{transform:translateY(-9%) rotate(6deg)} 52%{transform:translateY(0) rotate(-5deg)} 72%{transform:translateY(-5%) rotate(3deg)} }
@keyframes pevo-step { 0%,100%{transform:none} 20%{transform:translateX(-9%) rotate(-7deg)} 40%{transform:translate(-14%,-3%) rotate(6deg)} 65%{transform:translateX(-8%) rotate(-4deg)} 82%{transform:translateY(-3%) rotate(3deg)} }
@keyframes pevo-bow { 0%,100%{transform:none} 25%{transform:rotate(11deg) scale(1.06,.92)} 48%{transform:rotate(-6deg) translateX(-5%)} 75%{transform:rotate(3deg) translateY(-3%)} }
@keyframes pevo-think { 0%,100%{transform:none} 25%{transform:rotate(-8deg)} 55%{transform:rotate(7deg) translateY(-2%)} 78%{transform:rotate(-3deg)} }
@keyframes pevo-wave { 0%,100%{transform:none} 25%{transform:translate(-7%,-7%) rotate(-7deg)} 50%{transform:translate(-12%,-2%) rotate(7deg)} 75%{transform:translate(-5%,-4%) rotate(-3deg)} }
@keyframes juice-hint { 0%,100%{transform:translateY(0) scale(1);opacity:.85} 50%{transform:translateY(-3px) scale(1.035);opacity:1} }
@keyframes juice-last { 0%,100%{transform:scale(1)} 50%{transform:scale(1.10)} }
@keyframes juice-cta { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
@media (prefers-reduced-motion:reduce) {
  #fx-layer { display: none; }
  .juice-ready #hero,.juice-ready #guide { opacity: 1; }
  .juice-ready .answer-card.hint,.juice-ready .confirm-btn.juice-cta,.juice-ready .progress-dot { animation: none !important; }
}
html[data-juice-motion="reduce"] #fx-layer { display: none; }
html[data-juice-motion="reduce"] .juice-ready #hero,html[data-juice-motion="reduce"] .juice-ready #guide { opacity: 1; }
html[data-juice-motion="reduce"] .juice-ready *,html[data-juice-motion="reduce"] .juice-ready *::before,html[data-juice-motion="reduce"] .juice-ready *::after { animation: none !important; transition: none !important; }