html {
    scroll-behavior: smooth;
}

header {
    animation: fadeSlideDown 0.6s ease both;
}

footer a {
    transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

footer nav a:hover,
footer > div:last-child a:hover {
    opacity: 0.7;
}

footer .container > div:last-child a:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

#hero .hero-art img {
    animation: fadeIn 0.8s ease both;
    animation-delay: 0.15s;
}

#hero .blocos {
    animation: fadeSlideUp 0.7s ease both;
    animation-delay: 0.35s;
}

.blocos-track {
    animation: marquee 30s linear infinite;
}

#projetos figure button,
#redes figure button {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#projetos figure button:hover,
#redes figure button:hover {
    transform: translate(-50%, -50%) scale(1.06);
}

#redes .f--column > div a {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#redes .f--column > div a:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

#agenda article > div {
    transition: transform 0.6s ease;
}

#agenda article.is-flipped > div {
    transform: rotateY(180deg);
}

#onde article a,
#onde .f--column > .button {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#onde article a:hover,
#onde .f--column > .button:hover {
    opacity: 0.85;
}

#baixada figure img {
    transition: transform 0.4s ease;
}

#baixada figure:hover img {
    transform: scale(1.04);
}

#canal article > div > div a {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#canal article > div > div a:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

#movimento form .button,
#movimento #form-success a {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#movimento form .button:hover,
#movimento #form-success a:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

#movimento form,
#movimento #form-success {
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s ease;
}

#movimento #form-success {
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);
    pointer-events: none;
}

#movimento.is-sent form {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-40px);
    pointer-events: none;
}

#movimento.is-sent #form-success {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0.12s;
}

#fatos article {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#fatos article:hover {
    background: var(--color-auxiliar-cinza);
}

#capitulo article {
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#capitulo article:hover {
    background: var(--color-auxiliar-cinza);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(11, 17, 87, 0.08);
}

#capitulo-modal[open] .capitulo-modal-panel {
    animation: capituloModalIn 0.22s ease;
}

#capitulo-modal[open]::backdrop {
    animation: capituloBackdropIn 0.22s ease;
}

.capitulo-modal-close {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.capitulo-modal-close:hover {
    background: #E6E9F5;
    transform: scale(1.06);
}

@keyframes capituloModalIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes capituloBackdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#lucas article {
    transition: background-color 0.2s ease;
}

#lucas article:hover {
    background: var(--color-auxiliar-cinza);
}

[data-anim].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.has-anim [data-anim] {
    opacity: 0;
    transform: translateY(24px);
}

.has-anim [data-anim].is-visible {
    opacity: 1;
    transform: none;
}

.has-anim [data-anim="from-right"] {
    opacity: 0;
    transform: translateX(80px);
}

.has-anim [data-anim="from-left"] {
    opacity: 0;
    transform: translateX(-80px);
}

.has-anim #trabalho article img:nth-child(1)[data-anim="from-right"] {
    transform: translateX(80px) rotate(-8deg);
}

.has-anim #trabalho article img:nth-child(2)[data-anim="from-right"] {
    transform: translateX(100px) rotate(7deg);
}

.has-anim #trabalho article img:nth-child(1)[data-anim="from-left"] {
    transform: translateX(-80px) rotate(-8deg);
}

.has-anim #trabalho article img:nth-child(2)[data-anim="from-left"] {
    transform: translateX(-100px) rotate(7deg);
}

.has-anim #trabalho article img:nth-child(1)[data-anim="from-right"].is-visible,
.has-anim #trabalho article img:nth-child(1)[data-anim="from-left"].is-visible {
    opacity: 1;
    transform: rotate(-8deg);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: 0s;
}

.has-anim #trabalho article img:nth-child(2)[data-anim="from-right"].is-visible,
.has-anim #trabalho article img:nth-child(2)[data-anim="from-left"].is-visible {
    opacity: 1;
    transform: rotate(7deg);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: 0.7s;
}

.has-anim #trabalho article img:only-child[data-anim="from-right"] {
    transform: translateX(80px) rotate(4deg);
}

.has-anim #trabalho article img:only-child[data-anim="from-right"].is-visible {
    transform: rotate(4deg);
}

.has-anim [data-anim="from-right"].is-visible,
.has-anim [data-anim="from-left"].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

#trabalho h2[data-anim].is-visible {
    transition-delay: 0.1s;
}

#lucas h2[data-anim].is-visible {
    transition-delay: 0.1s;
}

#lucas article[data-anim]:nth-child(1).is-visible { transition-delay: 0.1s; }
#lucas article[data-anim]:nth-child(2).is-visible { transition-delay: 0.2s; }
#lucas article[data-anim]:nth-child(3).is-visible { transition-delay: 0.3s; }
#lucas article[data-anim]:nth-child(4).is-visible { transition-delay: 0.4s; }
#lucas article[data-anim]:nth-child(5).is-visible { transition-delay: 0.5s; }

@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    header,
    #hero .hero-art img,
    #hero .blocos,
    .blocos-track {
        animation: none;
    }

    header,
    #hero .hero-art img,
    #hero .blocos,
    [data-anim],
    [data-anim="from-left"],
    [data-anim="from-right"] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    header a,
    header .button,
    .menu-toggle span,
    footer a,
    #projetos figure button,
    #redes figure button,
    #redes .f--column > div a,
    #agenda article > div,
    #baixada figure img,
    #canal article > div > div a,
    #movimento form .button,
    #movimento #form-success a,
    #movimento form,
    #movimento #form-success,
    #onde article a,
    #onde .f--column > .button {
        transition: none;
    }

    #baixada figure:hover img,
    #canal article > div > div a:hover,
    #movimento form .button:hover,
    #movimento #form-success a:hover {
        transform: none;
    }
}