@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700&display=swap');

body {
    background-color: #fcfaf7;
    color: #5c5248;
    font-family: "Zen Maru Gothic", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-feature-settings: "vhal" 1, "vpal" 1;
}

.clip-blob {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

/* Gallery Auto Scroll Animation */
.gallery-scroll {
    animation: galleryScroll 10s linear infinite;
}

.gallery-scroll:hover {
    animation-play-state: paused;
}

@keyframes galleryScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Fade in animation */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Campaign Button Styles */
#campaign-button {
    animation: campaignBounce 2s ease-in-out infinite;
}

#campaign-button:hover {
    animation-play-state: paused;
}

@keyframes campaignBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Campaign Modal Styles */
#campaign-modal.show {
    opacity: 1 !important;
}

#campaign-modal.show #campaign-modal-content {
    transform: scale(1) !important;
}

/* Campaign Button Responsive */
@media (max-width: 640px) {
    #campaign-button {
        bottom: 120px; /* Same height as other floating buttons */
        left: 16px;
    }
    
    #campaign-button .bg-gradient-to-r {
        padding: 12px;
    }
    
    #campaign-button .text-xs {
        font-size: 10px;
    }
    
    #campaign-button .text-sm {
        font-size: 12px;
    }
}