/* ===== HOME PAGE SPECIFIC CSS ===== */

/* Home page specific body styles */
body {
    height: auto;
    padding-bottom: 0;
}

/* Override flex-grow to set exact height instead */
main {
    height: 100vh;
    flex-grow: 0;
    flex-shrink: 0;
}

/* Match insights page scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Animation Keyframes */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 0.765;
        transform: translateY(0);
    }
}

@keyframes fade-in-up-full {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-opacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.7;
    }
}

@keyframes subtitle-reveal {
    0% {
        visibility: visible;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 0.7;
    }
}

/* Animation Classes */
.animate-fade-in-up {
    animation: fade-in-up 1s ease-out;
}

.subtitle-delayed {
    visibility: hidden;
    opacity: 0;
    animation: subtitle-reveal 1s ease-out forwards;
    animation-delay: 1.4s;
} 

/* Vision Button Animation */
@keyframes button-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.vision-button-container {
    animation: button-fade-in 1s ease-out forwards;
    animation-delay: 2.4s; /* 1.4s (subtitle) + 1.0s = 2.4s */
}

/* Vision Button Styles */
.vision-button {
    background: transparent;
    border-radius: 2px;
    transition: all 0.5s ease-out;
}

.vision-button:hover {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}