/* ========================= ANIMATIONS ========================= */
/* Base hidden states */
.anim-from-top {
    opacity: 0;
    transform: translateY(-60px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-from-bottom {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-from-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-from-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Visible state */
.anim-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}
/* Delay helpers */
.anim-delay-1 { transition-delay: 0.15s; }
.anim-delay-2 { transition-delay: 0.3s; }
.anim-delay-3 { transition-delay: 0.45s; }
.anim-delay-4 { transition-delay: 0.6s; }

/* Header slide-down on load */
@keyframes headerSlideDown {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}
/*#header {
    animation: headerSlideDown 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}*/

/* Hero h1 and info-hero — dedicated keyframes for strong visibility */
@keyframes heroRiseUp {
    0%   { opacity: 0; transform: translateY(100px); }
    100% { opacity: 1; transform: translateY(0); }
}
#hero h1 {
    opacity: 0;
    animation: heroRiseUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
#hero .info-hero {
    opacity: 0;
    animation: heroRiseUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

/* ========= Tab gradient flow effect ========= */
/* Use background-size animation — no overflow:hidden needed, arrow stays visible */
.tab-btn {
    position: relative;
    z-index: 0;
    transition: color 0.4s ease, background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-position 0s linear 0.5s;
    background-image: linear-gradient(135deg, rgba(0, 79, 187, 0.4), rgba(1, 116, 198, 0.4), rgba(1, 152, 204, 0.4)), linear-gradient(0deg, #6C8DB4, #6C8DB4);
    background-size: 0% 100%, 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
}
.tab-btn.active {
    background-size: 100% 100%, 100% 100%;
    background-position: left center;
    transition: color 0.4s ease, background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-position 0s linear 0s;
    color: #fff;
    background-color: transparent;
}
/* When flowing out — shrink from the other side */
.tab-btn.flow-out {
    background-size: 0% 100%, 0% 100%;
    background-position: right center;
    transition: color 0.4s ease, background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-position 0s linear 0s;
}

.agents-btn {
    position: relative;
    z-index: 0;
    transition: color 0.4s ease, background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-position 0s linear 0.5s;
    background-image: linear-gradient(135deg, rgba(0, 79, 187, 0.4), rgba(1, 116, 198, 0.4), rgba(1, 152, 204, 0.4)), linear-gradient(0deg, #6C8DB4, #6C8DB4);
    background-size: 0% 100%, 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
}
.agents-btn.active {
    background-size: 100% 100%, 100% 100%;
    background-position: left center;
    transition: color 0.4s ease, background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-position 0s linear 0s;
    color: white;
    background-color: transparent;
}
.agents-btn.flow-out {
    background-size: 0% 100%, 0% 100%;
    background-position: right center;
    transition: color 0.4s ease, background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-position 0s linear 0s;
}

/* ========= Tab content exit/enter animations ========= */
.tab-content {
    position: relative;
}
.tab-content .about-img {
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tab-content .about-text {
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tab-content.active .about-img {
    animation: slideInFromLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.tab-content.active .about-text {
    animation: slideInFromRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-80px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(80px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutToRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(80px); }
}
@keyframes slideOutToLeft {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-80px); }
}

/* Sections overflow hidden for animations */
#about, #products, #reviews, #info, #agents, #faq {
    overflow: hidden;
}