#navbar .logo i,
#navbar .flex a {
    opacity: 0;
    animation: slideRight 1.5s ease-in-out forwards;
    animation-delay: calc(0.2s * var(--i));
    text-decoration: none;
}

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

/* Hero Section */
.hero-image-animation {
    opacity: 0;
    animation: zoomBounce 2s ease-in-out forwards;
    animation-delay: 1s;
}

@keyframes zoomBounce {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-40deg);
    }
    50% {
        transform: scale(1.1) rotate(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Hero section */
.hero-image img {
    filter: drop-shadow(0 0 60px var(--color-primary-accent));
}

.hero-content {
    max-width: 80%;
}

.hero-content h3 {
    font-size: 1.5rem;
    font-weight: 500;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
}

.hero-content h2 {
    font-size: 2rem;
    font-weight: 600;
}

.hero-content h2 span {
    color: var(--color-primary-accent);
}

.hero-content p {
    font-size: 1.2rem;
    margin: 2rem 0;
}

.hero-content-animation > * {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
    animation-delay: calc(0.5s * var(--i));
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    max-width: 90%;
}

.hero-content h3 {
    font-size: 1.5rem;
    font-weight: 500;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
}

.hero-content h2 {
    font-size: 2rem;
    font-weight: 600;
}

.hero-content h2 span {
    color: var(--color-primary-accent);
}

.hero-content p {
    font-size: 1.2rem;
    margin: 2rem 0;
}