/* Nature-inspired animations for header */
@keyframes leaf-float-1 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    30% {
        transform: translate(5px, -5px) rotate(5deg) scale(1);
    }
    60% {
        opacity: 0.9;
    }
    100% {
        transform: translate(15px, -25px) rotate(25deg) scale(1.2);
        opacity: 0;
    }
}

@keyframes leaf-float-2 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.7);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    30% {
        transform: translate(-3px, -8px) rotate(-3deg) scale(0.9);
    }
    60% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-20px, -30px) rotate(-20deg) scale(1.1);
        opacity: 0;
    }
}

@keyframes leaf-float-3 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.9);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    30% {
        transform: translate(2px, -6px) rotate(8deg) scale(1.1);
    }
    60% {
        opacity: 0.7;
    }
    100% {
        transform: translate(10px, -35px) rotate(15deg) scale(1.3);
        opacity: 0;
    }
}

@keyframes leaf-float-4 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.75);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    30% {
        transform: translate(-4px, -4px) rotate(-5deg) scale(0.95);
    }
    60% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-15px, -20px) rotate(-15deg) scale(1.15);
        opacity: 0;
    }
}

.leaf {
    position: absolute;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    transition: transform 0.3s ease-out;
}

/* Animation for menu items */
.main-navigation .menu-item {
    position: relative;
    overflow: hidden;
}

.main-navigation .menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.main-navigation .menu-item > a:hover::after {
    width: 80%;
}

/* Contextual Image Animations */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%) scale(1.1);
        opacity: 0;
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 0.9;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%) scale(1.1);
        opacity: 0;
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 0.9;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

.contextual-image {
    position: absolute;
    width: 40%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.contextual-image.left {
    left: 5%;
    top: 0;
    transform-origin: left center;
}

.contextual-image.right {
    right: 5%;
    top: 0;
    transform-origin: right center;
}

.about-section:hover .contextual-image.left {
    animation: slideInFromLeft 1.2s ease-out forwards;
}

.about-section:hover .contextual-image.right {
    animation: slideInFromRight 1.2s ease-out forwards;
}

/* Nature effect on hover */
.main-navigation .menu-item > a:hover ~ .leaf {
    animation: leaf-float 1.5s ease-out forwards;
}

.main-navigation .menu-item > a:hover ~ .leaf:nth-child(2n) {
    animation: leaf-float-reverse 1.8s ease-out 0.2s forwards;
}

/* Leaf positions and animations */
.leaf-1 { 
    left: 15%; 
    top: 50%; 
    animation: leaf-float-1 1.8s ease-out forwards;
    animation-delay: 0.1s;
}
.leaf-2 { 
    left: 35%; 
    top: 45%; 
    animation: leaf-float-2 2s ease-out forwards;
    animation-delay: 0.2s;
}
.leaf-3 { 
    left: 65%; 
    top: 50%; 
    animation: leaf-float-3 2.2s ease-out forwards;
    animation-delay: 0.3s;
}
.leaf-4 { 
    left: 85%; 
    top: 55%; 
    animation: leaf-float-4 2.1s ease-out forwards;
    animation-delay: 0.15s;
}

/* Wind effect on header */
@keyframes gentle-wind {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.site-header:hover .main-navigation .menu-item > a {
    display: inline-block;
    animation: gentle-wind 3s ease-in-out infinite;
}

/* Delay animations for each menu item */
.main-navigation .menu-item:nth-child(1) > a { animation-delay: 0.1s; }
.main-navigation .menu-item:nth-child(2) > a { animation-delay: 0.2s; }
.main-navigation .menu-item:nth-child(3) > a { animation-delay: 0.3s; }
.main-navigation .menu-item:nth-child(4) > a { animation-delay: 0.4s; }
.main-navigation .menu-item:nth-child(5) > a { animation-delay: 0.5s; }