@tailwind base;
@tailwind components;
@tailwind utilities;

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

/* Background Effects */
#background-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.balloon {
    position: absolute;
    width: 50px;
    height: 60px;
    background-color: var(--color);
    border-radius: 50%;
    opacity: 0.7;
    animation: floatUp 10s infinite linear;
}

.balloon::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid var(--color);
}

@keyframes floatUp {
    0% {
        bottom: -100px;
        transform: translateX(0);
    }
    100% {
        bottom: 100vh;
        transform: translateX(100px) rotate(15deg);
    }
}

/* Countdown Page Timer */
.timer-box {
    @apply flex flex-col items-center justify-center bg-indigo-100/70 rounded-2xl w-24 h-24 sm:w-32 sm:h-32;
}
.timer-digit {
    @apply text-4xl sm:text-6xl font-bold;
}
.timer-label {
    @apply text-sm sm:text-base text-indigo-500 font-medium mt-1;
}

/* Wall Page Filters */
.filter-btn {
    @apply px-4 py-2 rounded-lg text-sm font-semibold text-indigo-500 transition-all duration-300;
}
.active-filter {
    @apply bg-indigo-500 text-white shadow;
}

/* Share Buttons */
.share-btn {
    @apply flex items-center justify-center gap-2 text-white font-bold py-2 px-5 rounded-full hover:opacity-90 active:scale-95 transform transition-all duration-300 shadow-lg;
}

/* Toast Notification */
.toast {
    @apply flex items-center gap-3 bg-white/80 backdrop-blur-md text-indigo-700 font-medium py-3 px-5 rounded-xl shadow-2xl shadow-indigo-200/50 transition-all duration-500 translate-x-full opacity-0;
}
.toast.show {
    @apply translate-x-0 opacity-100;
}