/* Custom styles on top of Tailwind */

html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1c1e; /* piter-dark */
}

::-webkit-scrollbar-thumb {
    background: #374151; /* gray-700 */
}

::-webkit-scrollbar-thumb:hover {
    background: #4b5563; /* gray-600 */
}

/* Menu Item Entrance Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item-card {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Rain Effect */
#rain-container {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='100'%3E%3Crect width='1' height='20' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    animation: rainDrop 0.5s linear infinite;
}

@keyframes rainDrop {
    0% { background-position: 0 0; }
    100% { background-position: 10px 100px; }
}

/* Typewriter Cursor */
.cursor::after {
    content: '|';
    animation: blink 1s step-end infinite;
    color: #fbbf24; /* piter-sun color */
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}