/* css/style.css */

@keyframes toast-in { from { opacity:0; transform: translate(-50%, -12px); } to { opacity:1; transform: translate(-50%, 0); } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; transform: translate(-50%, -8px); } }
.animate-toast-in { animation: toast-in .25s ease-out; }
.animate-toast-out { animation: toast-out .3s ease-in forwards; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float { animation: float 3s ease-in-out infinite; }

@keyframes wiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.wiggle:hover { animation: wiggle .4s ease-in-out infinite; }

@keyframes pop-in { 0% { opacity:0; transform: scale(.7); } 70% { transform: scale(1.05); } 100% { opacity:1; transform: scale(1); } }
.pop-in { animation: pop-in .35s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes flame-flicker { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }
.flame { animation: flame-flicker 1.1s ease-in-out infinite; display: inline-block; }

@keyframes bar-fill { from { width: 0%; } }
.bar-fill { animation: bar-fill 1s cubic-bezier(.22,1,.36,1) both; }

@keyframes badge-pop {
  0% { opacity: 0; transform: translateY(20px) scale(.6) rotate(-8deg); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
.badge-pop { animation: badge-pop .5s cubic-bezier(.34,1.56,.64,1) both; }

.card-fun { box-shadow: 0 8px 0 0 rgba(0,0,0,.06), 0 12px 24px -8px rgba(0,0,0,.12); }
.btn-fun { box-shadow: 0 4px 0 0 rgba(0,0,0,.15); transition: transform .08s ease, box-shadow .08s ease; }
.btn-fun:active { transform: translateY(3px); box-shadow: 0 1px 0 0 rgba(0,0,0,.15); }

.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 999px; }

input:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .float, .wiggle:hover, .flame, .pop-in, .badge-pop { animation: none !important; }
}