/* Custom Styles & Animations for Doge Dough */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Comic Text Style */
.comic-text {
    -webkit-text-stroke: 2px #2d1b08;
    paint-order: stroke fill;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 16px;
}
::-webkit-scrollbar-track {
    background: #fffbd6;
    border-left: 4px solid #2d1b08;
}
::-webkit-scrollbar-thumb {
    background: #FF9900;
    border: 4px solid #2d1b08;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #FF3366;
}

/* Animations */
@keyframes bounceSlow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
.bounce-slow {
    animation: bounceSlow 3s ease-in-out infinite;
}

@keyframes bounceFast {
    0%, 100% {
        transform: translateY(0) rotate(12deg) scale(1);
    }
    50% {
        transform: translateY(-8px) rotate(14deg) scale(1.05);
    }
}
.bounce-fast {
    animation: bounceFast 1s ease-in-out infinite;
}

@keyframes floatElem {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(10px, -20px) rotate(5deg);
    }
    66% {
        transform: translate(-10px, -10px) rotate(-5deg);
    }
}
.float-elem {
    animation: floatElem 6s ease-in-out infinite;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Reveal Animation Class (managed by JS) */
.reveal.active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* Background Patterns */
.pattern-dots {
    background-image: radial-gradient(#2d1b08 15%, transparent 16%);
    background-size: 20px 20px;
}

/* Mobile Link Styles */
.mobile-link {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 2px dashed #ccc;
}
.mobile-link:last-child {
    border-bottom: none;
}