/* every animation used by the app, played through tweens.ts or directly by class */

@keyframes page-in { from { opacity: 0; transform: translateY(14px) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(0.6) rotate(-6deg); } 70% { opacity: 1; transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(6deg) scale(1.08); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes drift { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(-40px, 30px) scale(1.15) rotate(40deg); } 100% { transform: translate(30px, -20px) scale(0.9) rotate(-30deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes glance { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes glow-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes squish { 0% { transform: scale(1); } 30% { transform: scale(1.12, 0.88); } 60% { transform: scale(0.94, 1.06); } 100% { transform: scale(1); } }
@keyframes dots { 0%, 20% { content: ""; } 40% { content: "."; } 60% { content: ".."; } 80%, 100% { content: "..."; } }

/* lists drop in one card at a time, backwards fill so the tilt comes back afterwards */
.card-list > *, .scrapbook > * { animation: pop-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(var(--index, 0) * 45ms); }

.tween-pulse { animation: glow-pulse 1s ease-in-out infinite; }
.tween-flash { animation: squish 420ms ease-out; }
.tween-dots::after { content: ""; animation: dots 1.2s steps(1) infinite; }