/* Purim CSS */
.purim-page {
    /* Define any custom variables if needed */
    --primary: #4f46e5;
}

.purim-page {
    scroll-behavior: smooth;
}

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

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-right {
    animation: fadeInRight 1s ease-out forwards;
}

@keyframes scaleUp {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.scale-up-anim {
    animation: scaleUp 10s ease-in-out infinite;
}

@keyframes pulseAnim {
    0%, 100% {
        transform: translate(50%, 50%) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translate(50%, 50%) scale(1.05);
        opacity: 0.3;
    }
}

.pulse-anim {
    animation: pulseAnim 8s ease-in-out infinite alternate;
}

/* Hero Floating Incense Animation */
@keyframes heroIncenseRise {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(calc(var(--rnd-scale, 1) * 0.8)) rotate(calc(var(--rnd-rot, 0deg) - 2deg));
    }
    10% {
        opacity: 0.8;
        transform: translateY(-20px) scale(calc(var(--rnd-scale, 1) * 1)) rotate(calc(var(--rnd-rot, 0deg) + 3deg));
    }
    90% {
        opacity: 0.6;
        transform: translateY(-70vh) scale(calc(var(--rnd-scale, 1) * 1.1)) rotate(calc(var(--rnd-rot, 0deg) - 3deg));
    }
    100% {
        opacity: 0;
        transform: translateY(-85vh) scale(calc(var(--rnd-scale, 1) * 1.2)) rotate(calc(var(--rnd-rot, 0deg) + 2deg));
    }
}

.incense-hero-container {
    perspective: 1000px;
}

.hero-incense-item {
    position: absolute;
    animation: heroIncenseRise 20s infinite linear;
    animation-fill-mode: both;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
    /* The widget skin should apply inline styles for left/right position and animation-delay */
}

/* Fallback delays if inline styles aren't present */
.hero-incense-item:nth-child(n) { animation-duration: 25s; animation-delay: 0s; left: 10%; bottom: -5%; }
.hero-incense-item:nth-child(2n) { animation-duration: 22s; animation-delay: 3s; left: 30%; bottom: -10%; }
.hero-incense-item:nth-child(3n) { animation-duration: 28s; animation-delay: 7s; left: 50%; bottom: -15%; }
.hero-incense-item:nth-child(4n) { animation-duration: 24s; animation-delay: 10s; left: 70%; bottom: -5%; }
.hero-incense-item:nth-child(5n) { animation-duration: 30s; animation-delay: 14s; left: 85%; bottom: -20%; }

/* Festive Confetti Background */
@keyframes confettiFall {
    0% { background-position: 0 -100px; }
    100% { background-position: 0 1000px; }
}

.confetti-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ec4899' d='M10 10 l5 10 l-10 0 Z' transform='rotate(15 10 10)'/%3E%3Crect x='30' y='40' width='6' height='12' fill='%2310b981' transform='rotate(45 30 40)'/%3E%3Ccircle cx='80' cy='20' r='4' fill='%23eab308'/%3E%3Crect x='60' y='70' width='8' height='8' fill='%233b82f6' transform='rotate(30 60 70)'/%3E%3Cpath fill='%238b5cf6' d='M40 80 l6 12 l-12 0 Z' transform='rotate(-20 40 80)'/%3E%3Ccircle cx='90' cy='90' r='5' fill='%23f43f5e'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: confettiFall 20s linear infinite;
}

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