/*
=================================================================
  TOMORO COFFEE BANGKA - ANIMATIONS STYLESHEET
  Version: 1.0.0
  Author: Professional Web Designer
  Description: Advanced Animations & Effects
=================================================================
*/

/* =================================================================
   TABLE OF CONTENTS
   =================================================================
   1. Page Transitions
   2. Entrance Animations
   3. Hover Animations
   4. Scroll Animations
   5. Loading Animations
   6. Text Animations
   7. Background Animations
   8. 3D Transforms
   9. Parallax Effects
   10. Interactive Animations
   11. Coffee-Themed Animations
   12. Menu Animations
   13. Gallery Animations
   14. Form Animations
   15. Navigation Animations
   16. Modal Animations
   17. Notification Animations
   18. Particle Effects
   19. SVG Animations
   20. Advanced Keyframes
================================================================= */

/* =================================================================
   1. PAGE TRANSITIONS
================================================================= */

/* Page Load Animation */
.page-transition {
    animation: pageLoad 1s ease-out;
}

@keyframes pageLoad {
    0% {
        opacity: 0;
        transform: scale(0.98);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Section Reveal */
.section-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Animation */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
}

.stagger-item.animate {
    animation: staggerFadeIn 0.6s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }

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

/* =================================================================
   2. ENTRANCE ANIMATIONS
================================================================= */

/* Fade In Variations */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInBlur {
    0% {
        opacity: 0;
        filter: blur(20px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Slide In Variations */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Flip Animations */
@keyframes flipInX {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(-90deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0);
    }
}

@keyframes flipInY {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(-90deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0);
    }
}

/* Bounce In */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Elastic In */
@keyframes elasticIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    55% {
        opacity: 1;
        transform: scale(1.15);
    }
    75% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* =================================================================
   3. HOVER ANIMATIONS
================================================================= */

/* Lift & Shadow */
.hover-lift-shadow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift-shadow:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(139, 69, 19, 0.35);
}

/* Tilt Effect */
.hover-tilt {
    transition: transform 0.3s ease;
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
}

/* 3D Rotate */
.hover-3d-rotate {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.hover-3d-rotate:hover {
    transform: rotateY(180deg);
}

/* Glow Effect */
.hover-glow {
    position: relative;
    transition: all 0.3s ease;
}

.hover-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(139, 69, 19, 0.4) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
    z-index: -1;
}

.hover-glow:hover::before {
    opacity: 1;
    animation: glowPulse 1.5s infinite;
}

/* Shine Effect */
.hover-shine {
    position: relative;
    overflow: hidden;
}

.hover-shine::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition: transform 0.6s ease;
}

.hover-shine:hover::before {
    transform: translateX(100%) translateY(100%) rotate(45deg);
}

/* Ripple Effect */
.hover-ripple {
    position: relative;
    overflow: hidden;
}

.hover-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.hover-ripple:hover::after {
    width: 300px;
    height: 300px;
}

/* Underline Slide */
.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #8B4513, #D4A574);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-underline:hover::after {
    width: 100%;
}

/* Border Expand */
.hover-border-expand {
    position: relative;
}

.hover-border-expand::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #8B4513;
    border-radius: inherit;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s ease;
}

.hover-border-expand:hover::before {
    transform: scale(1.05);
    opacity: 1;
}

/* Zoom & Blur */
.hover-zoom-blur {
    transition: all 0.3s ease;
}

.hover-zoom-blur:hover {
    transform: scale(1.1);
    filter: blur(2px);
}

.hover-zoom-blur:hover + * {
    filter: blur(0);
}

/* =================================================================
   4. SCROLL ANIMATIONS
================================================================= */

/* Scroll Fade In */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-fade-in.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll Scale */
.scroll-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease-out;
}

.scroll-scale.in-view {
    opacity: 1;
    transform: scale(1);
}

/* Scroll Rotate */
.scroll-rotate {
    opacity: 0;
    transform: rotate(-45deg) scale(0.5);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-rotate.in-view {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Scroll Slide Directions */
.scroll-slide-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-out;
}

.scroll-slide-left.in-view {
    opacity: 1;
    transform: translateX(0);
}

.scroll-slide-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease-out;
}

.scroll-slide-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Scroll Reveal with Delay */
.scroll-reveal-delay-1 { transition-delay: 0.1s; }
.scroll-reveal-delay-2 { transition-delay: 0.2s; }
.scroll-reveal-delay-3 { transition-delay: 0.3s; }
.scroll-reveal-delay-4 { transition-delay: 0.4s; }
.scroll-reveal-delay-5 { transition-delay: 0.5s; }

/* =================================================================
   5. LOADING ANIMATIONS
================================================================= */

/* Coffee Cup Loading */
@keyframes coffeeLoading {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

.coffee-loader {
    animation: coffeeLoading 2s ease-in-out infinite;
}

/* Dots Loading */
@keyframes dotsLoading {
    0%, 20% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.dots-loader span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #8B4513;
    border-radius: 50%;
    margin: 0 4px;
    animation: dotsLoading 1.4s infinite ease-in-out;
}

.dots-loader span:nth-child(1) { animation-delay: 0s; }
.dots-loader span:nth-child(2) { animation-delay: 0.2s; }
.dots-loader span:nth-child(3) { animation-delay: 0.4s; }

/* Spinner Loading */
@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner-loader {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(139, 69, 19, 0.1);
    border-top-color: #8B4513;
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}

/* Progress Bar Loading */
@keyframes progressBar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.progress-loader {
    width: 100%;
    height: 4px;
    background: rgba(139, 69, 19, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.progress-loader::after {
    content: '';
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8B4513, #D4A574);
    border-radius: 10px;
    animation: progressBar 2s ease-in-out infinite;
}

/* Pulse Loading */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.9);
    }
}

.pulse-loader {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Wave Loading */
@keyframes wave {
    0%, 40%, 100% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-20px);
    }
}

.wave-loader span {
    display: inline-block;
    width: 8px;
    height: 40px;
    background: #8B4513;
    margin: 0 2px;
    border-radius: 10px;
    animation: wave 1.2s ease-in-out infinite;
}

.wave-loader span:nth-child(1) { animation-delay: 0s; }
.wave-loader span:nth-child(2) { animation-delay: 0.1s; }
.wave-loader span:nth-child(3) { animation-delay: 0.2s; }
.wave-loader span:nth-child(4) { animation-delay: 0.3s; }
.wave-loader span:nth-child(5) { animation-delay: 0.4s; }

/* =================================================================
   6. TEXT ANIMATIONS
================================================================= */

/* Typing Effect */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #8B4513;
    }
}

.typing-text {
    overflow: hidden;
    border-right: 3px solid #8B4513;
    white-space: nowrap;
    animation: 
        typing 3.5s steps(40, end),
        blink-caret 0.75s step-end infinite;
}

/* Text Reveal */
@keyframes textReveal {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.text-reveal {
    animation: textReveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Gradient Text Animation */
@keyframes gradientText {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-text-animated {
    background: linear-gradient(
        90deg,
        #8B4513,
        #D4A574,
        #8B4513,
        #D4A574
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientText 3s ease infinite;
}

/* Text Glitch Effect */
@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

.text-glitch {
    position: relative;
}

.text-glitch::before,
.text-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-glitch::before {
    animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    color: #ff00ff;
    z-index: -1;
}

.text-glitch::after {
    animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse infinite;
    color: #00ffff;
    z-index: -2;
}

/* Text Float */
@keyframes textFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.text-float {
    animation: textFloat 3s ease-in-out infinite;
}

/* Character Animation */
.char-animate span {
    display: inline-block;
    opacity: 0;
    animation: charFadeIn 0.5s forwards;
}

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

.char-animate span:nth-child(1) { animation-delay: 0.05s; }
.char-animate span:nth-child(2) { animation-delay: 0.1s; }
.char-animate span:nth-child(3) { animation-delay: 0.15s; }
.char-animate span:nth-child(4) { animation-delay: 0.2s; }
.char-animate span:nth-child(5) { animation-delay: 0.25s; }

/* =================================================================
   7. BACKGROUND ANIMATIONS
================================================================= */

/* Gradient Background Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.bg-gradient-animate {
    background: linear-gradient(
        135deg,
        #8B4513,
        #D4A574,
        #5D2F0E,
        #A0522D
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Parallax Background */
.bg-parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Moving Particles */
@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-1000px) translateX(200px) rotate(360deg);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    background: rgba(139, 69, 19, 0.3);
    border-radius: 50%;
    animation: particleFloat 15s linear infinite;
}

.particle:nth-child(1) {
    width: 10px;
    height: 10px;
    left: 10%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    width: 15px;
    height: 15px;
    left: 30%;
    animation-delay: 2s;
}

.particle:nth-child(3) {
    width: 8px;
    height: 8px;
    left: 50%;
    animation-delay: 4s;
}

.particle:nth-child(4) {
    width: 12px;
    height: 12px;
    left: 70%;
    animation-delay: 6s;
}

.particle:nth-child(5) {
    width: 20px;
    height: 20px;
    left: 90%;
    animation-delay: 8s;
}

/* Wave Animation */
@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55);
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}

.wave-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M0,50 Q300,0 600,50 T1200,50 L1200,100 L0,100 Z' fill='%238B4513' opacity='0.5'/%3E%3C/svg%3E");
    animation: wave 10s linear infinite;
}

/* =================================================================
   8. 3D TRANSFORMS
================================================================= */

/* 3D Card Flip */
.card-3d-flip {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-3d-flip:hover {
    transform: rotateY(180deg);
}

.card-3d-flip .card-front,
.card-3d-flip .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-3d-flip .card-back {
    transform: rotateY(180deg);
}

/* 3D Cube Rotation */
@keyframes cubeRotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube-3d {
    transform-style: preserve-3d;
    animation: cubeRotate 20s linear infinite;
}

/* 3D Perspective Hover */
.perspective-hover {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.perspective-hover:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
}

/* 3D Book Open */
@keyframes bookOpen {
    0% {
        transform: perspective(2000px) rotateY(0deg);
    }
    100% {
        transform: perspective(2000px) rotateY(-120deg);
    }
}

.book-open {
    transform-origin: left center;
    animation: bookOpen 1.5s ease-in-out forwards;
}

/* =================================================================
   9. PARALLAX EFFECTS
================================================================= */

/* Multi-layer Parallax */
.parallax-layer-1 {
    transform: translateZ(-1px) scale(2);
}

.parallax-layer-2 {
    transform: translateZ(-2px) scale(3);
}

.parallax-layer-3 {
    transform: translateZ(-3px) scale(4);
}

/* Scroll Parallax */
@keyframes scrollParallax {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50px);
    }
}

.scroll-parallax {
    animation: scrollParallax 1s linear;
    animation-timeline: scroll();
}

/* =================================================================
   10. INTERACTIVE ANIMATIONS
================================================================= */

/* Button Press */
.btn-press:active {
    animation: buttonPress 0.2s ease;
}

@keyframes buttonPress {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
}

/* Magnetic Effect */
.magnetic-hover {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.magnetic-hover:hover {
    transform: translate(var(--mouse-x, 0), var(--mouse-y, 0));
}

/* Cursor Follow */
.cursor-follow {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid #8B4513;
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.1s ease;
    z-index: 9999;
}

.cursor-follow.active {
    transform: scale(2);
    background: rgba(139, 69, 19, 0.2);
}

/* Tilt on Mouse Move */
.tilt-effect {
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
}

/* Shake on Hover */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.hover-shake:hover {
    animation: shake 0.5s ease;
}

/* =================================================================
   11. COFFEE-THEMED ANIMATIONS
================================================================= */

/* Coffee Pour */
@keyframes coffeePour {
    0% {
        height: 0%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        height: 100%;
        opacity: 1;
    }
}

.coffee-pour {
    animation: coffeePour 2s ease-out forwards;
}

/* Coffee Bean Rotate */
@keyframes beanRotate {
    0% {
        transform: rotate(0deg) translateX(0);
    }
    25% {
        transform: rotate(90deg) translateX(20px);
    }
    50% {
        transform: rotate(180deg) translateX(0);
    }
    75% {
        transform: rotate(270deg) translateX(-20px);
    }
    100% {
        transform: rotate(360deg) translateX(0);
    }
}

.coffee-bean-animate {
    animation: beanRotate 4s linear infinite;
}

/* Steam Rising */
@keyframes steamRise {
    0% {
        bottom: 0;
        opacity: 0.8;
        transform: translateY(0) scale(1);
    }
    100% {
        bottom: 100px;
        opacity: 0;
        transform: translateY(-50px) scale(1.5);
    }
}

.steam-animate {
    animation: steamRise 3s ease-in-out infinite;
}

/* Coffee Drip */
@keyframes coffeeDrip {
    0% {
        top: 0;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

.coffee-drip {
    animation: coffeeDrip 1.5s ease-in infinite;
}

.coffee-drip:nth-child(1) { animation-delay: 0s; left: 20%; }
.coffee-drip:nth-child(2) { animation-delay: 0.3s; left: 50%; }
.coffee-drip:nth-child(3) { animation-delay: 0.6s; left: 80%; }

/* Latte Art Swirl */
@keyframes latteArtSwirl {
    0% {
        transform: rotate(0deg) scale(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(720deg) scale(1);
        opacity: 1;
    }
}

.latte-art-swirl {
    animation: latteArtSwirl 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* =================================================================
   12. MENU ANIMATIONS
================================================================= */

/* Menu Item Appear */
@keyframes menuItemAppear {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.menu-item-appear {
    animation: menuItemAppear 0.5s ease-out forwards;
}

/* Price Tag Animation */
@keyframes priceTagPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.price-tag-pulse {
    animation: priceTagPulse 2s ease-in-out infinite;
}

/* Menu Filter Slide */
@keyframes filterSlide {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.filter-slide {
    animation: filterSlide 0.4s ease-out forwards;
}

/* Food Image Hover */
.food-img-hover {
    position: relative;
    overflow: hidden;
}

.food-img-hover img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.food-img-hover:hover img {
    transform: scale(1.2) rotate(5deg);
}

/* =================================================================
   13. GALLERY ANIMATIONS
================================================================= */

/* Gallery Grid Appear */
@keyframes galleryGridAppear {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.gallery-grid-appear {
    animation: galleryGridAppear 0.6s ease-out forwards;
}

/* Image Zoom on Scroll */
.gallery-zoom-scroll {
    transition: transform 0.3s ease;
}

.gallery-zoom-scroll.in-view {
    transform: scale(1.05);
}

/* Masonry Layout Animation */
.masonry-item {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.5s ease-out;
}

.masonry-item.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Lightbox Open */
@keyframes lightboxOpen {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-open {
    animation: lightboxOpen 0.3s ease-out forwards;
}

/* Gallery Hover Overlay */
.gallery-hover-overlay {
    position: relative;
    overflow: hidden;
}

.gallery-hover-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(139, 69, 19, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.gallery-hover-overlay:hover::before {
    left: 100%;
}

/* =================================================================
   14. FORM ANIMATIONS
================================================================= */

/* Input Focus Animation */
.input-focus-animate {
    position: relative;
}

.input-focus-animate::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #8B4513;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.input-focus-animate:focus::after {
    width: 100%;
}

/* Label Float */
@keyframes labelFloat {
    to {
        top: -20px;
        font-size: 12px;
        color: #8B4513;
    }
}

.label-float.active {
    animation: labelFloat 0.3s ease forwards;
}

/* Form Submit Animation */
@keyframes formSubmit {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        background: #28a745;
    }
}

.form-submit-animate {
    animation: formSubmit 0.5s ease forwards;
}

/* Input Error Shake */
@keyframes inputError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.input-error {
    animation: inputError 0.4s ease;
    border-color: #dc3545 !important;
}

/* Success Checkmark */
@keyframes checkmarkDraw {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.checkmark-animate {
    stroke-dasharray: 100;
    animation: checkmarkDraw 0.5s ease forwards;
}

/* =================================================================
   15. NAVIGATION ANIMATIONS
================================================================= */

/* Nav Slide Down */
@keyframes navSlideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.nav-slide-down {
    animation: navSlideDown 0.4s ease-out forwards;
}

/* Menu Item Stagger */
.nav-item-stagger {
    opacity: 0;
    transform: translateY(-20px);
}

.nav-item-stagger.show {
    animation: navItemAppear 0.3s ease-out forwards;
}

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

.nav-item-stagger:nth-child(1) { animation-delay: 0.05s; }
.nav-item-stagger:nth-child(2) { animation-delay: 0.1s; }
.nav-item-stagger:nth-child(3) { animation-delay: 0.15s; }
.nav-item-stagger:nth-child(4) { animation-delay: 0.2s; }
.nav-item-stagger:nth-child(5) { animation-delay: 0.25s; }
.nav-item-stagger:nth-child(6) { animation-delay: 0.3s; }

/* Hamburger Menu Animation */
.hamburger-animate span {
    transition: all 0.3s ease;
}

.hamburger-animate.active span:nth-child(1) {
    transform: rotate(45deg) translateY(10px);
}

.hamburger-animate.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-animate.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-10px);
}

/* =================================================================
   16. MODAL ANIMATIONS
================================================================= */

/* Modal Fade In */
@keyframes modalFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-fade-in {
    animation: modalFadeIn 0.3s ease-out forwards;
}

/* Modal Slide Up */
@keyframes modalSlideUp {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-slide-up {
    animation: modalSlideUp 0.4s ease-out forwards;
}

/* Modal Backdrop */
@keyframes backdropFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.modal-backdrop-fade {
    animation: backdropFadeIn 0.3s ease-out forwards;
}

/* =================================================================
   17. NOTIFICATION ANIMATIONS
================================================================= */

/* Toast Slide In */
@keyframes toastSlideIn {
    0% {
        transform: translateX(400px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-slide-in {
    animation: toastSlideIn 0.4s ease-out forwards;
}

/* Notification Bounce */
@keyframes notificationBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.notification-bounce {
    animation: notificationBounce 1s ease;
}

/* Alert Shake */
.alert-shake {
    animation: shake 0.5s ease;
}

/* =================================================================
   18. PARTICLE EFFECTS
================================================================= */

/* Confetti */
@keyframes confetti {
    0% {
        transform: translateY(0) rotateZ(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(1000px) rotateZ(720deg);
        opacity: 0;
    }
}

.confetti-particle {
    animation: confetti 3s ease-in-out forwards;
}

/* Sparkle */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.sparkle-effect {
    animation: sparkle 1s ease-in-out infinite;
}

/* Snow Fall */
@keyframes snowFall {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}

.snow-particle {
    animation: snowFall 10s linear infinite;
}

/* =================================================================
   19. SVG ANIMATIONS
================================================================= */

/* SVG Path Draw */
@keyframes svgDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.svg-draw-animate {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: svgDraw 2s ease-in-out forwards;
}

/* SVG Fill Animation */
@keyframes svgFill {
    to {
        fill: #8B4513;
    }
}

.svg-fill-animate {
    fill: transparent;
    animation: svgFill 1s ease-in-out 2s forwards;
}

/* SVG Morph */
@keyframes svgMorph {
    0%, 100% {
        d: path("M10,10 L90,10 L90,90 L10,90 Z");
    }
    50% {
        d: path("M50,10 L90,50 L50,90 L10,50 Z");
    }
}

/* =================================================================
   20. ADVANCED KEYFRAMES
================================================================= */

/* Complex Rotation */
@keyframes complexRotate {
    0% {
        transform: perspective(1000px) rotateX(0) rotateY(0) rotateZ(0);
    }
    33% {
        transform: perspective(1000px) rotateX(360deg) rotateY(0) rotateZ(0);
    }
    66% {
        transform: perspective(1000px) rotateX(360deg) rotateY(360deg) rotateZ(0);
    }
    100% {
        transform: perspective(1000px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

.complex-rotate {
    animation: complexRotate 10s linear infinite;
}

/* Morphing Shape */
@keyframes morphShape {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

.morph-shape {
    animation: morphShape 8s ease-in-out infinite;
}

/* Color Shift */
@keyframes colorShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.color-shift {
    animation: colorShift 10s linear infinite;
}

/* Breathing Effect */
@keyframes breathing {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.breathing-effect {
    animation: breathing 4s ease-in-out infinite;
}

/* =================================================================
   END OF ANIMATIONS.CSS
================================================================= */