/* style.css - Custom CSS for Tsabita Vanilla App */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

.dotted-bg {
  background-image: radial-gradient(#A3B18A 2px, transparent 2px);
  background-size: 30px 30px;
}

@keyframes slide-up-fade { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse-fast { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes spin-reverse-slow { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

.animate-slide-up-fade { animation: slide-up-fade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.animate-scale-in { animation: scale-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.animate-pulse-fast { animation: pulse-fast 1s infinite; }
.animate-spin-slow { animation: spin 6s linear infinite; }
.animate-spin-reverse-slow { animation: spin-reverse-slow 8s linear infinite; }
.animate-shake { animation: shake 0.4s ease-in-out; }

.stagger-1 { opacity: 0; animation: slide-up-fade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards; }
.stagger-2 { opacity: 0; animation: slide-up-fade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards; }
.stagger-3 { opacity: 0; animation: slide-up-fade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards; }
.stagger-4 { opacity: 0; animation: slide-up-fade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards; }
.stagger-5 { opacity: 0; animation: slide-up-fade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards; }
.stagger-6 { opacity: 0; animation: slide-up-fade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards; }

.custom-scrollbar::-webkit-scrollbar { width: 8px; }
@media (min-width: 640px) { .custom-scrollbar::-webkit-scrollbar { width: 12px; } }
.custom-scrollbar::-webkit-scrollbar-track { background: #F4F6F6; border-left: 2px solid #003D44; }
@media (min-width: 640px) { .custom-scrollbar::-webkit-scrollbar-track { border-left: 4px solid #003D44; } }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #006D77; border: 2px solid #F4F6F6; }