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

@layer utilities {
    .animate-bounce-slow {
        animation: bounce-slow 3s ease-in-out infinite;
    }

    .animate-pulse-glow {
        animation: pulse-glow 2s ease-in-out infinite;
    }

    .animate-smoke {
        animation: float-smoke 4s linear infinite;
    }

    .material-symbols-outlined {
        font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48
    }

    .bg-factory-pattern {
        background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9)), url(https://lh3.googleusercontent.com/aida-public/AB6AXuACpdYoU7EFU_5haUnRvqjGjP6bd56gsXeDJVPoRhclMwKV08uFCJV5Um6Z2dgJA52zRE-zj3qJNdcM73xtV1DyhuVy8kSWuSVciAwD2rC1EbpHfQ2qrP8JcZ0odiXD0Vq1b4tBQ-7O7OM8Mnd4cPcaU5-qguXrafzd8wNGouvqUs6nwp_0BvgP25gkVRgasbhrddWMQZEIGblcYnecAnbWogiMLb2MJbEgQY1IUVElGeiArBbVj-9WNdBAJfmaRwwwCd7gZP_gc_M);
        background-size: cover;
        background-position: center;
    }

    .coin-3d {
        background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
        box-shadow:
            0 10px 0 #8b6508,
            0 15px 20px rgba(0, 0, 0, 0.4),
            inset -4px -4px 10px rgba(0, 0, 0, 0.2);
    }

    .coin-3d:active {
        transform: translateY(8px);
        box-shadow:
            0 2px 0 #8b6508,
            0 5px 10px rgba(0, 0, 0, 0.4);
    }

    .neon-border {
        box-shadow: 0 0 10px theme('colors.primary'), inset 0 0 5px theme('colors.primary');
    }

    /* Goal Celebration Styles */
    .animate-fall-coin {
        animation: fall-coin 4s linear infinite;
    }

    .animate-fall-confetti {
        animation: fall-confetti 5s linear infinite;
    }

    .text-3d-gold {
        color: #ffd700;
        text-shadow:
            0 1px 0 #b8860b,
            0 2px 0 #b8860b,
            0 3px 0 #b8860b,
            0 4px 0 #b8860b,
            0 5px 0 #b8860b,
            0 6px 1px rgba(0, 0, 0, .1),
            0 0 5px rgba(0, 0, 0, .1),
            0 1px 3px rgba(0, 0, 0, .3),
            0 3px 5px rgba(0, 0, 0, .2),
            0 5px 10px rgba(0, 0, 0, .25),
            0 10px 10px rgba(0, 0, 0, .2),
            0 20px 20px rgba(0, 0, 0, .15);
    }

    .sparkle-text {
        background: linear-gradient(90deg, #fff, #ffd700, #fff);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shine 3s linear infinite;
    }

    .scroll-plaque {
        background: #fef3c7;
        box-shadow:
            inset 0 0 40px rgba(184, 134, 11, 0.2),
            0 10px 15px -3px rgba(0, 0, 0, 0.4);
        border: 8px solid #d97706;
        border-style: double;
    }
}

@keyframes bounce-slow {

    0%,
    100% {
        transform: translateY(-5%);
    }

    50% {
        transform: translateY(0);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
    }

    50% {
        filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9));
    }
}

@keyframes float-smoke {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }

    100% {
        transform: translateY(-40px) scale(1.5);
        opacity: 0;
    }
}

/* Celebration Animations */
@keyframes fall-coin {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0.8;
    }
}

@keyframes fall-confetti {
    0% {
        transform: translateY(-10vh) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(720deg);
    }
}

@keyframes shine {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

body {
    min-height: max(884px, 100dvh);
}