/* filename: styles.css */

/* Import Font */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700;800;900&display=swap');

body {
    font-family: 'Fredoka', sans-serif;
    touch-action: manipulation; /* Prevents double-tap zoom */
    background-color: #FFFBEB;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none; /* Prevents pull-to-refresh on mobile */
}

/* Scrollbar Hiding */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animations */
@keyframes bounce-in {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.animate-bounce-in {
    animation: bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

/* Interactive Elements */
.btn-pop {
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 6px 0 0 rgba(0,0,0,0.15);
}
.btn-pop:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 0 rgba(0,0,0,0.15);
}
.card-pop {
    box-shadow: 0 8px 0 0 rgba(0,0,0,0.1);
}