/* ==========================================================================
   animations.css — todas as animações e transições da LP
   (os estados ficam no style.css; aqui só o movimento)
   ========================================================================== */

:root {
    --ease: cubic-bezier(.2, .75, .2, 1);
}

/* keyframes */

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(60%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

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

/* entrada do hero (linha a linha) */

.js-anim [data-rise] {
    opacity: 0;
    animation: rise 1s var(--ease) forwards;
}

.js-anim #hero h1 > span:nth-child(1) { animation-delay: .1s; }
.js-anim #hero h1 > span:nth-child(2) { animation-delay: .2s; }
.js-anim #hero .tagline > span:nth-child(1) { animation-delay: .3s; }
.js-anim #hero .tagline > span:nth-child(2) { animation-delay: .4s; }
.js-anim #hero .tagline > span:nth-child(3) { animation-delay: .5s; }

/* revelar ao rolar */

.js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}

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

.js-anim #equipe .member[data-reveal] {
    transform: none;
}

.js-anim .cases [data-reveal]:nth-child(even),
.js-anim .team [data-reveal]:nth-child(2) {
    transition-delay: .1s;
}

.js-anim .team [data-reveal]:nth-child(3) {
    transition-delay: .2s;
}

/* header */

header {
    transition: top .4s var(--ease);
}

header.is-scrolled {
    top: 20px;
}

header nav a,
.button {
    transition: color .25s, background-color .3s, border-color .3s;
}

/* faixas e logos (conteúdo duplicado pelo animations.js) */

#faixas .marquee {
    animation: marquee 30s linear infinite;
}

#faixas .ribbon--pink .marquee {
    animation-direction: reverse;
    animation-duration: 36s;
}

#clientes .marquee {
    animation: marquee 44s linear infinite;
}

#clientes .logos--reverse .marquee {
    animation-direction: reverse;
    animation-duration: 50s;
}

#clientes .borders {
    transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
}

#clientes .partners span {
    transition: background-color .3s, color .3s;
}

/* cases */

#cases figure img {
    transition: transform 1.2s var(--ease), filter .6s;
}

#cases .case:hover figure img {
    transform: scale(1.04);
}

#cases .case h3 {
    transition: color .3s;
}

.case-cursor {
    transition: transform .35s var(--ease);
}

/* serviços */

.service::before {
    transition: transform .5s var(--ease);
}

.service button {
    transition: padding .5s var(--ease), min-height .5s var(--ease), border-color .3s;
}

.service .num,
.service .title,
.service .small {
    transition: color .3s, transform .5s var(--ease);
}

.service:hover .title {
    transform: translateX(10px);
}

.service .plus {
    transition: transform .45s var(--ease), background-color .3s, color .3s, border-color .3s;
}

.service-body {
    transition: grid-template-rows .5s var(--ease);
}

.service-body ul {
    transition: padding .5s var(--ease), opacity .4s, transform .5s var(--ease);
    opacity: 0;
    transform: translateY(12px);
}

.service.is-open .service-body ul {
    opacity: 1;
    transform: none;
    transition-delay: .15s;
}

/* equipe */

.member img {
    transition: transform 1.2s var(--ease);
}

.member:hover img {
    transform: scale(1.05);
}

#equipe .team.is-dragging .member img,
#equipe .team.is-dragging .member:hover img {
    transition: none;
    transform: none;
}

#equipe .team-hint span {
    animation: team-nudge 1.1s var(--ease) infinite;
}

@keyframes team-nudge {
    50% {
        transform: translateX(8px);
    }
}

.member::before {
    transition: transform .6s var(--ease);
}

.member a {
    transition: background-color .3s, border-color .3s;
}

/* depoimentos */

#depoimentos .tabs button {
    transition: color .25s;
}

#depoimentos blockquote {
    transform: translateY(14px);
    transition: opacity .35s, transform .45s var(--ease), visibility .35s;
}

#depoimentos blockquote.is-active {
    transform: none;
}

/* contato */

#contato address a {
    transition: background-size .4s var(--ease);
}

#contact-form .field::after {
    transition: transform .45s var(--ease);
}

.dropdown > button {
    transition: color .25s;
}

.dropdown svg {
    transition: transform .35s var(--ease);
}

.dropdown ul {
    transform: translateY(-10px);
    transition: opacity .25s, transform .35s var(--ease);
}

.dropdown.is-open ul {
    transform: none;
}

.dropdown li {
    opacity: 0;
    transform: translateY(6px);
    transition: background-color .2s, color .2s, opacity .3s, transform .35s var(--ease);
}

.dropdown.is-open li {
    opacity: 1;
    transform: none;
}

.dropdown.is-open li:nth-child(2) { transition-delay: .03s; }
.dropdown.is-open li:nth-child(3) { transition-delay: .06s; }
.dropdown.is-open li:nth-child(4) { transition-delay: .09s; }
.dropdown.is-open li:nth-child(5) { transition-delay: .12s; }
.dropdown.is-open li:nth-child(6) { transition-delay: .15s; }
.dropdown.is-open li:nth-child(7) { transition-delay: .18s; }

/* rodapé: letras do ENGAGE sobem */

.js-anim footer .wordmark img {
    transform: translateY(105%);
    transition: transform 1.1s var(--ease);
}

.js-anim footer .wordmark.is-visible img {
    transform: none;
}

.js-anim footer .wordmark span:nth-child(2) img { transition-delay: .07s; }
.js-anim footer .wordmark span:nth-child(3) img { transition-delay: .14s; }
.js-anim footer .wordmark span:nth-child(4) img { transition-delay: .21s; }
.js-anim footer .wordmark span:nth-child(5) img { transition-delay: .28s; }
.js-anim footer .wordmark span:nth-child(6) img { transition-delay: .35s; }

footer .f--column a {
    transition: color .25s;
}

/* acessibilidade */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .js-anim [data-rise],
    .js-anim [data-reveal],
    .js-anim footer .wordmark img {
        opacity: 1;
        transform: none;
    }
}