/* =========================================================
   HOME — MARQUEE DE FRANQUIAS
   ========================================================= */

.home-franchises {
    position: relative;
    padding: 34px 0 38px;
    border-top: 1px solid rgba(26, 26, 23, 0.08);
    border-bottom: 1px solid rgba(26, 26, 23, 0.08);
    background: var(--cream-light);
}

.home-franchises-heading {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
    text-align: center;
}

.home-franchises-kicker {
    color: var(--orange);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.home-franchises-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 8px 0;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 6%,
        #000 94%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 6%,
        #000 94%,
        transparent 100%
    );
}

.home-franchises-track {
    display: flex;
    width: max-content;
    animation: home-franchises-scroll 36s linear infinite;
    will-change: transform;
}

.home-franchises-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: clamp(44px, 5vw, 82px);
    padding-right: clamp(44px, 5vw, 82px);
}

/*
 * Cada franquia ocupa o mesmo slot. O tamanho é controlado pelo
 * próprio box da imagem, e não por transform: scale(). Assim nenhum
 * logo invade a área vizinha ou é cortado pelo marquee.
 *
 * Dragon Ball, He-Man e One Piece usam SVGs com viewBox normalizado
 * para remover o espaço vazio que existia dentro dos arquivos.
 */
.home-franchise {
    --logo-max-width: 228px;
    --logo-max-height: 84px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 clamp(220px, 15vw, 250px);
    width: clamp(220px, 15vw, 250px);
    height: 104px;
    opacity: 0.9;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        filter 180ms ease;
}

.home-franchise:hover,
.home-franchise:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
    outline: none;
}

.home-franchise:focus-visible {
    border-radius: 14px;
    box-shadow: 0 0 0 3px rgba(217, 104, 18, 0.22);
}

.home-franchise img {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--logo-max-width);
    max-height: var(--logo-max-height);
    object-fit: contain;
}

/* Pokémon é a referência de presença visual. */
.home-franchise-pokemon {
    --logo-max-width: 228px;
    --logo-max-height: 84px;
}

.home-franchise-naruto {
    --logo-max-width: 228px;
    --logo-max-height: 88px;
}

.home-franchise-dragon-ball {
    --logo-max-width: 232px;
    --logo-max-height: 84px;
}

.home-franchise-one-piece {
    --logo-max-width: 232px;
    --logo-max-height: 84px;
}

.home-franchise-dungeon-and-dragons {
    --logo-max-width: 232px;
    --logo-max-height: 84px;
}

.home-franchise-marvel {
    --logo-max-width: 224px;
    --logo-max-height: 88px;
}

/* Logos verticais: mesma altura de presença, sem esticar a largura. */
.home-franchise-dcstudios {
    --logo-max-width: 92px;
    --logo-max-height: 94px;
}

.home-franchise-warner-bros {
    --logo-max-width: 102px;
    --logo-max-height: 94px;
}

/* Iron Maiden é naturalmente muito horizontal; ganha um pouco mais de largura. */
.home-franchise-iron-maiden {
    --logo-max-width: 248px;
    --logo-max-height: 72px;
}

.home-franchise-he-man {
    --logo-max-width: 232px;
    --logo-max-height: 84px;
}

@keyframes home-franchises-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 767px) {
    .home-franchises {
        padding: 28px 0 32px;
    }

    .home-franchises-heading {
        margin-bottom: 16px;
        padding: 0 18px;
    }

    .home-franchises-kicker {
        font-size: 0.64rem;
        letter-spacing: 0.13em;
    }

    .home-franchises-track {
        animation-duration: 31s;
    }

    .home-franchises-group {
        gap: 38px;
        padding-right: 38px;
    }

    .home-franchise {
        --logo-max-width: 176px;
        --logo-max-height: 66px;

        flex-basis: 184px;
        width: 184px;
        height: 84px;
    }

    .home-franchise-dcstudios {
        --logo-max-width: 70px;
        --logo-max-height: 74px;
    }

    .home-franchise-warner-bros {
        --logo-max-width: 78px;
        --logo-max-height: 74px;
    }

    .home-franchise-iron-maiden {
        --logo-max-width: 188px;
        --logo-max-height: 58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-franchises-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
        scrollbar-width: none;
    }

    .home-franchises-marquee::-webkit-scrollbar {
        display: none;
    }

    .home-franchises-track {
        animation: none;
    }

    .home-franchises-group[aria-hidden="true"] {
        display: none;
    }
}