header {
    opacity: 0;
    animation: slideDown;         /* Name defined above */
    animation-duration: 0.8s;            /* How long the animation lasts */
    animation-timing-function: ease-out; /* Makes the movement smooth */
    animation-fill-mode: forwards;     /* CRITICAL: Ensures the element stays in its final (slid-down) state after the animation finishes */
    animation-delay: 0.2s;             /* Optional: Add a slight delay before it starts */
    z-index: 2;
}

.hero-content {
    opacity: 0;
    animation: slideDown 0.8s ease-out 0.2s forwards;         /* Name defined above */
    z-index: 2;
}

.special-text {
    opacity: 0;
    z-index: 2;
}

/* This class will be added when the element is visible */
.special-text.animate {
  animation: slideDown 0.8s ease-out 0.2s forwards;
}

.special-offers {
    opacity: 0;
    z-index: 2;
}

.special-offers.animate {
  animation: slideUp 0.8s ease-out 0.6s forwards;
}

.about-main-img {
    opacity: 0;
    z-index: 2;
}

.about-main-img.animate {
    animation: slideRight 0.8s ease-out 0.2s forwards;
}

.about-us-sub-images {
    opacity: 0;
    z-index: 2;
}

.about-us-sub-images.animate {
    animation: slideUp 0.8s ease-out 0.8s forwards;
}

.aboutus-textbox {
    opacity: 0;
    z-index: 2;
}

.aboutus-textbox.animate {
    animation: slideLeft 0.8s ease-out 0.2s forwards;
}

.team-photo {
    opacity: 0;
}

.team-photo.animate {
  animation: slideDown 0.8s ease-out 0.2s forwards;
}

.team-name, .team-role {
    opacity: 0;
}

.team-name.animate, .team-role.animate {
    animation: fadeIn 0.8s ease-out 0.8s forwards;
}

.fa-brands {
    opacity: 0;
}

.fa-brands.animate {
    animation: fadeIn 0.8s ease-out 1.4s forwards;
}

#brands-ani-no {
    opacity: 1;
    animation: none;
}

.menuname {
    /* Set a fixed width for the animation to work correctly (based on final text width) */
    width: 7ch; /* 'ch' unit is width of the '0' character, 7 chars in "Menu 1" */
    overflow: hidden; /* Hides the excess text until typed */
    white-space: nowrap; /* Keeps text on a single line */
    border-right: .15em solid black; /* The "cursor" */
    animation: 
        typing 1.5s steps(7, end) forwards, /* 7 steps for 7 characters */
        blink-caret .75s step-end 4 forwards;
}

#search-box {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 100%);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(to bottom, black 0%, black 100%);
    mask-size: 0% 100%;
    mask-repeat: no-repeat;

    animation: revealMask 2s ease forwards;
}


.menu-food-img {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 100%);
    -webkit-mask-size: 100% 0%;
    -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(to bottom, black 0%, black 100%);
    mask-size: 100% 0%;
    mask-repeat: no-repeat;

    animation: revealMask 1.75s ease forwards;
}

.menu-item-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FDDADA; /* The starting red/pink color you want to wipe away */
    z-index: 10; /* Make sure it sits above the content */
    
    /* Apply the animation */
    animation: wipe-reveal 1.51s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    /* Use animation-delay to sequence them */
    /* animation-delay is set inline in the HTML below for staggering */
}


/* Define the keyframes for typing */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* Define the keyframes for a blinking cursor */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black; }
}

@keyframes fadeIn {
    from{
        transform: translateY(0);
        opacity: 0;
    }

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

@keyframes fadeOut {
    from{
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 0;
    }
}

@keyframes slideDown {
    /* Start state: The element is moved up by 100 pixels (adjust as needed) 
       and completely transparent (opacity 0). */
    from {
        transform: translateY(-100px); 
        opacity: 0;
    }
    /* End state: The element is at its normal position (0 movement) 
       and fully visible (opacity 1). */
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100px); 
        opacity: 0;
    }
    
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

@keyframes slideRight {
    from {
        transform: translateX(-100px); 
        opacity: 0;
    }
    
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes wipe-reveal {
    0% {
        transform: scaleX(1); /* Starts fully covering the content */
        transform-origin: left;
    }
    100% {
        transform: scaleX(0); /* Wipes away to the right */
        transform-origin: right;
    }
}

@keyframes revealMask {
    to {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
}