/* Header Hover */
@keyframes HeaderHover{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #190D08;} 80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover1{0%{color: #9B3B23;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #190D08;}80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover2{0%{color: #190D08;} 10%{color: #9B3B23;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #190D08;} 80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover3{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #9B3B23;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #190D08;} 80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover4{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #9B3B23;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #190D08;} 80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover5{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #9B3B23;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #190D08;} 80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover6{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #9B3B23;} 60%{color: #190D08;} 70%{color: #190D08;} 80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover7{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #9B3B23;} 70%{color: #190D08;} 80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover8{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #9B3B23;} 80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover9{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #190D08;} 80%{color: #9B3B23;} 90%{color: #190D08;} 100%{color: #190D08;}}
@keyframes HeaderHover10{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #190D08;} 80%{color: #190D08;} 90%{color: #9B3B23;} 100%{color: #190D08;}}
@keyframes HeaderHover11{0%{color: #190D08;} 10%{color: #190D08;} 20%{color: #190D08;} 30%{color: #190D08;} 40%{color: #190D08;} 50%{color: #190D08;} 60%{color: #190D08;} 70%{color: #190D08;} 80%{color: #190D08;} 90%{color: #190D08;} 100%{color: #9B3B23;}}
h1:hover .HH1{animation: linear HeaderHover1 0.25s;}
h1:hover .HH2{animation: linear HeaderHover2 0.25s;}
h1:hover .HH3{animation: linear HeaderHover3 0.25s;}
h1:hover .HH4{animation: linear HeaderHover4 0.25s;}
h1:hover .HH5{animation: linear HeaderHover5 0.25s;}
h1:hover .HH6{animation: linear HeaderHover6 0.25s;}
h1:hover .HH7{animation: linear HeaderHover7 0.25s;}
h1:hover .HH8{animation: linear HeaderHover8 0.25s;}
h1:hover .HH9{animation: linear HeaderHover9 0.25s;}
h1:hover .HH10{animation: linear HeaderHover10 0.25s;}
h1:hover .HH11{animation: linear HeaderHover11 0.25s;}

/* Error Message */
@keyframes shake{
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Menu Item Hover Bounce */
@keyframes bounce{
    0%, 100% { transform: scale(1.05) translateY(0); }
    50% { transform: scale(1.05) translateY(-10); }
}

.menuItem:hover{
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    border-color: #e46f3b;
    cursor: pointer;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* Item Image Pop */
@keyframes pop{
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.itemImage:hover{
    animation: pop 0.5s ease forwards;
    border: 3px solid #e46f3b;
}

/* Cart Item Fade In */
@keyframes fadeIn{
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.cartItem{
    animation: fadeIn 0.5s ease forwards;
}

/* Checkout input focus glow */
#guestCheckoutForm input:focus,
#guestCheckoutForm select:focus,
#userCheckoutForm input:focus
#userCheckoutForm select:focus{
    border-color: #e46f3b;
    box-shadow: 0 0 15px rgba(288,111,59,0.7);
    transform: scale(1.02);
    transition: all 0.3s ease;
}

/* Progress bar fill animation */
#deliveryProgress > div{
    height: 100%;
    width: 0;
    background-color: #e46f3b;
    border-radius: 12px;
    animation: fillProgress 2s forwards;
}

@keyframes fillProgress{
    0% { width: 0; }
    100% { width: var(--progress, 0%); }
}