*{ transition: all 0.3s ease;}

/* LANG SELECTOR ANIMS */
.lang-btn:hover {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.lang-btn.active {
    background: var(--color-primary);
    color: white;
}

/* sticky navbar */
header{
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

header.scrolled{
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 20px rgba(75, 46, 30, 0.1);
}

header nav ul a{
    position: relative;
    transition: color 0.3s ease;
}

header nav ul a:hover{
    color: var(--color-accent);
    transform: translateY(-2px);
}

header nav ul a::after{
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background-color: var(--color-accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
header nav ul a:hover::after{ width: 100%;}

header img{ transition: transform 0.3s ease;}
header img:hover{ transform: scale(1.1);}

/* btn hover animations */
section#s3 .form form button{
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

section#s3 .form form button:hover{
    background-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.4);
}
section#s3 .form form button:active{ transform: translateY(0);}


section#s3 .form form input{ transition: all 0.3s ease;}
section#s3 .form form input:focus{
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.2);
    transform: translateY(-2px);
}

/* app store buttons hover */
section#s1 .intro > div a{
    display: inline-block;
    transition: transform 0.3s ease;
}

section#s1 .intro > div a:hover{ transform: scale(1.05);}

footer a{
    transition: all 0.3s ease;
    position: relative;
}

footer a:hover{
    color: var(--color-accent);
    transform: translateY(-2px);
}

/* section 2 cards hover effects */
section#s2 > div div{
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 15px;
    padding: 1rem;
}

section#s2 > div div:hover{
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(75, 46, 30, 0.1);
    background-color: white;
}

section#s2 > div div img{ transition: transform 0.3s ease;}
section#s2 > div div:hover img{ transform: scale(1.1);}

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

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

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

/* apply animations on page load */
section#s1 .intro{ animation: fadeInLeft 1s ease;}
section#s1 .img{ animation: fadeInRight 1s ease;}
section#s2 h1{ animation: fadeInUp 1s ease 0.2s both;}
section#s2 > div div:nth-child(1){ animation: fadeInUp 1s ease 0.4s both;}
section#s2 > div div:nth-child(2){ animation: fadeInUp 1s ease 0.6s both;}
section#s2 > div div:nth-child(3){ animation: fadeInUp 1s ease 0.8s both;}
section#s3 .form{ animation: fadeInLeft 1s ease 0.3s both;}
section#s3 > div:last-child{ animation: fadeInRight 1s ease 0.3s both;}

/* pulse anim for submit btn */
@keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(255, 140, 66, 0.7);}
    70%{ box-shadow: 0 0 0 10px rgba(255, 140, 66, 0);}
    100%{ box-shadow: 0 0 0 0 rgba(255, 140, 66, 0);}
}

section#s3 .form form button:hover #submitBtn{ animation: pulse 2s infinite;}

/* loading animation for form submission */
@keyframes spin{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}

.loading::after{
    content: '';
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* smooth scrolling */
html{ scroll-behavior: smooth;}

::selection{
    background-color: var(--color-accent);
    color: white;
}

::-moz-selection{
    background-color: var(--color-accent);
    color: white;
}