/* 
================================================================
BANSURI - THE MELODY OF TASTE
Premium CSS Keyframes and Animation Utilities
================================================================
*/

/* 1. Keyframes definitions */

/* Flute floating animation */
@keyframes fluteFloat {
    0% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-12px) rotate(1deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Floating musical notes */
@keyframes noteFloat {
    0% {
        transform: translateY(40px) translateX(0) scale(0.6) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px) translateX(15px) scale(0.9) rotate(15deg);
    }
    85% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-70px) translateX(-10px) scale(1) rotate(-15deg);
        opacity: 0;
    }
}

/* Scroll indicator wheel */
@keyframes scrollMouse {
    0% {
        opacity: 0;
        top: 8px;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        top: 24px;
    }
}

/* Peacock feather glow */
@keyframes peacockGlow {
    0% {
        filter: drop-shadow(0 0 10px rgba(245, 124, 0, 0.5));
        transform: rotate(-5deg) scale(1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(251, 140, 0, 0.8));
        transform: rotate(3deg) scale(1.03);
    }
    100% {
        filter: drop-shadow(0 0 10px rgba(245, 124, 0, 0.5));
        transform: rotate(-5deg) scale(1);
    }
}

/* Golden pulse effect */
@keyframes goldPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 140, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(251, 140, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(251, 140, 0, 0);
    }
}

/* Slow background gradient shift */
@keyframes gradientBg {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Soft rotation for decorative shapes */
@keyframes slowRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Floating animation for general shapes */
@keyframes floatShape {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Subtle steam animation (for hot food items) */
@keyframes steamRise {
    0% {
        transform: translateY(5px) scaleX(0.8);
        opacity: 0;
    }
    30% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(-25px) scaleX(1.3);
        opacity: 0;
    }
}

/* 2. Interactive and Applied Animation Classes */

.anim-flute {
    animation: fluteFloat 6s ease-in-out infinite;
}

.anim-feather {
    animation: peacockGlow 5s ease-in-out infinite;
}

.anim-pulse {
    animation: goldPulse 2.5s infinite;
}

.anim-rotate-slow {
    animation: slowRotate 25s linear infinite;
}

.anim-float {
    animation: floatShape 8s ease-in-out infinite;
}

/* Musical notes emission from flute */
.music-note {
    position: absolute;
    color: var(--golden-orange);
    font-size: 1.25rem;
    pointer-events: none;
    opacity: 0;
    z-index: 12;
    animation: noteFloat 4s ease-in-out infinite;
}

.music-note:nth-child(2n) {
    color: var(--primary-button);
    animation-delay: 1.3s;
    font-size: 1rem;
}

.music-note:nth-child(3n) {
    color: var(--deep-orange);
    animation-delay: 2.6s;
    font-size: 1.4rem;
}

/* 3. Reveal on Scroll Classes (via Intersection Observer) */

.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal-fade {
    transform: translateY(0);
}

.reveal-slide-up {
    transform: translateY(50px);
}

.reveal-slide-down {
    transform: translateY(-50px);
}

.reveal-slide-left {
    transform: translateX(-50px);
}

.reveal-slide-right {
    transform: translateX(50px);
}

.reveal-zoom {
    transform: scale(0.9);
}

/* Active states (applied when visible in viewport) */
.reveal.active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Delay modifiers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-800 { transition-delay: 800ms; }

/* Micro-interactions */
.hover-scale {
    transition: var(--transition-smooth);
}
.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: var(--transition-smooth);
}
.hover-glow:hover {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
}

.hover-lift {
    transition: var(--transition-smooth);
}
.hover-lift:hover {
    transform: translateY(-5px);
}