/* Game art demos (scripts/site-art.mjs): each game's little board acts out its game while an
   ancestor has .game.demo-on. Shared by the website (copied to site/art.css by build-site) and the app. */
.art { --spring: cubic-bezier(0.26, 1.6, 0.44, 1); }
.art polygon, .art g, .art text, .art circle { transform-box: fill-box; transform-origin: center; }
.game.demo-on .demo-journey .swap { animation: swap 3.4s var(--spring) infinite; }
.game.demo-on .demo-journey .lift { animation-name: swapLift; }
.game.demo-on .demo-journey .wave { animation: wave 3.4s ease-out infinite; animation-delay: var(--d); }
@keyframes swapLift { 0%, 12% { transform: none; } 24% { transform: translateY(-8px) scale(1.14); } 50%, 58% { transform: translate(var(--dx), calc(var(--dy) - 8px)) scale(1.14); } 66%, 100% { transform: translate(var(--dx), var(--dy)); } }
@keyframes swap { 0%, 26% { transform: none; } 52%, 100% { transform: translate(var(--dx), var(--dy)); } }
@keyframes wave { 0%, 66% { transform: none; filter: none; } 72% { transform: scale(1.1); filter: brightness(1.45); } 80%, 100% { transform: none; filter: none; } }
.game.demo-on .demo-daily .pop { animation: pop 3.8s var(--spring) infinite; animation-delay: var(--d); }
.game.demo-on .demo-daily .swap { opacity: 1; animation: dailySwap 3.8s var(--spring) infinite; }
.game.demo-on .demo-daily .lift { animation-name: dailyLift; }
.game.demo-on .demo-daily .date { animation: date 3.8s var(--spring) infinite; }
@keyframes dailySwap { 0%, 30% { transform: none; opacity: 0; } 34% { opacity: 1; transform: none; } 58%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 1; } }
@keyframes dailyLift { 0%, 30% { transform: none; opacity: 0; } 34% { opacity: 1; transform: none; } 42% { transform: translateY(-8px) scale(1.14); } 56% { transform: translate(var(--dx), calc(var(--dy) - 8px)) scale(1.14); } 62%, 100% { transform: translate(var(--dx), var(--dy)); } }
@keyframes pop { 0% { transform: scale(0.2); opacity: 0; } 14% { transform: scale(1.08); opacity: 1; } 22%, 100% { transform: none; opacity: 1; } }
@keyframes date { 0%, 64% { transform: none; filter: none; } 74% { transform: scale(1.3) rotate(-6deg); filter: drop-shadow(0 0 10px #fff); } 86%, 100% { transform: none; filter: none; } }
.game.demo-on .demo-endless .swap { animation: swap 3s var(--spring) infinite; }
.game.demo-on .demo-endless .lift { animation-name: swapLift; }
.game.demo-on .demo-endless .fuse { animation: burn 3s linear infinite; }
.game.demo-on .demo-endless .spark { animation: spark 3s linear infinite; opacity: 1; }
.game.demo-on .demo-endless .f1 { animation: floatUp 3s ease-out infinite; }
.game.demo-on .demo-endless .f2 { animation: floatUp 3s ease-out infinite; animation-delay: .25s; }
@keyframes burn { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--per); } }
@keyframes spark { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes floatUp { 0%, 58% { opacity: 0; transform: none; } 64% { opacity: 1; } 88% { opacity: 1; transform: translateY(-26px); } 100% { opacity: 0; transform: translateY(-30px); } }
.game.demo-on .demo-drift .drift { animation: drift 4.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes drift { 0%, 15% { transform: none; } 45%, 60% { transform: translate(var(--dx), var(--dy)) rotate(8deg); } 90%, 100% { transform: none; } }
.game.demo-on .demo-memory .card { animation: flip 4.2s ease-in-out infinite; animation-delay: var(--d); }
.game.demo-on .demo-memory .front { animation: face 4.2s step-end infinite; animation-delay: var(--d); }
@keyframes flip { 0% { transform: none; } 6% { transform: scaleX(0); } 12% { transform: none; } 30% { transform: translateY(-4px) scale(1.08); } 36%, 76% { transform: none; } 82% { transform: scaleX(0); } 88%, 100% { transform: none; } }
@keyframes face { 0% { opacity: 0; } 6% { opacity: 1; } 82% { opacity: 0; } }
.game.demo-on .demo-bloom .flood { animation: flood 3.6s var(--spring) infinite; animation-delay: var(--d); }
@keyframes flood { 0% { opacity: 0; transform: scale(.4); } 10% { opacity: 1; transform: scale(1.1); } 16%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: none; } }
.game.demo-on .demo-spot .finger { animation: finger 3.2s ease-in-out infinite; }
.game.demo-on .demo-spot .burst { animation: burst 3.2s ease-out infinite; }
.game.demo-on .demo-spot .odd { animation: odd 3.2s var(--spring) infinite; }
@keyframes finger { 0% { opacity: 0; transform: none; } 10% { opacity: 1; transform: none; } 45% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 50% { transform: translate(var(--dx), var(--dy)) scale(.8); } 56% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 70%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes burst { 0%, 49% { opacity: 0; transform: scale(.8); } 52% { opacity: 1; } 75%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes odd { 0%, 48% { transform: none; filter: none; } 56% { transform: scale(1.25); filter: brightness(1.5); } 72%, 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .game.demo-on .art * { animation: none !important; } }