/*
    Intro "marquee" (resources/views/includes/intros/sections/
    h1_galeria_scroll.blade.php e h2_galeria_scroll.blade.php) - adaptado do
    componente "AnimatedMarqueeHero" do 21st.dev (React/Framer Motion) pra
    CSS puro. Texto centralizado no topo (tag/título/descrição/botão), faixa
    de fotos da galeria rolando sem parar por baixo.

    A lista de fotos é escrita 2x no HTML (ver blade) e a animação anda
    exatamente a largura de UMA repetição (translateX(-50%) do trilho, que
    tem o dobro da largura) - quando completa o ciclo, a segunda cópia já
    está exatamente onde a primeira começou, então o corte do loop fica
    invisível. A segunda cópia leva aria-hidden="true" pra leitor de tela
    não repetir.

    Igual ao h1_hero.blade.php: a entrada com "revelado" (opacidade/blur/
    translate) usa transition, a rolagem contínua da faixa usa animation -
    propriedades e elementos diferentes, sem disputa entre as duas.
*/
.cms-intro-galeriascroll-content {
    padding: 60px 0 0;
    overflow: hidden;
}

/* ==================== Texto ==================== */
.cms-intro-galeriascroll-texto {
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 40px;
    text-align: center;
}

.cms-intro-galeriascroll-tag {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 18px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.03);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--thm-base, #f18535);
}

.cms-intro-galeriascroll-titulo {
    margin: 0 0 16px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .cms-intro-galeriascroll-titulo {
        font-size: 52px;
    }
}

.cms-intro-galeriascroll-descricao {
    margin: 0 auto 26px;
    max-width: 540px;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

.cms-intro-galeriascroll-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--thm-base, #f18535);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cms-intro-galeriascroll-btn:hover,
.cms-intro-galeriascroll-btn:focus {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* ==================== Faixa rolante ==================== */
.cms-intro-galeriascroll-faixa {
    position: relative;
    width: 100%;
    padding: 10px 0 40px;
    /* esmaece as pontas esquerda/direita, sem precisar recortar foto nenhuma */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.cms-intro-galeriascroll-trilho {
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: cms-intro-galeriascroll-rolar 34s linear infinite;
}

.cms-intro-galeriascroll-faixa:hover .cms-intro-galeriascroll-trilho {
    animation-play-state: paused;
}

@keyframes cms-intro-galeriascroll-rolar {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.cms-intro-galeriascroll-foto {
    flex: none;
    width: 150px;
    height: 190px;
    padding: 6px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .cms-intro-galeriascroll-foto {
        width: 190px;
        height: 240px;
    }
}

.cms-intro-galeriascroll-foto.gira-esquerda { transform: rotate(-3deg); }
.cms-intro-galeriascroll-foto.gira-direita { transform: rotate(3deg); }

.cms-intro-galeriascroll-foto:hover {
    transform: rotate(0deg) scale(1.04);
    z-index: 1;
}

.cms-intro-galeriascroll-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
}

/* ==================== Entrada ao rolar a tela ==================== */
.cms-intro-galeriascroll [data-intro-galeriascroll-item] {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(12px);
    transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
    transition-delay: var(--intro-galeriascroll-atraso, 0s);
}

.cms-intro-galeriascroll.revelado [data-intro-galeriascroll-item] {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* A faixa entra normal (fade + translateY), sem herdar o rotate individual
   de cada foto - o rotate de cada .cms-intro-galeriascroll-foto já é a
   aparência final delas, não faz parte da transição de entrada. */
.cms-intro-galeriascroll [data-intro-galeriascroll-item].cms-intro-galeriascroll-faixa {
    transform: translateY(24px);
}

.cms-intro-galeriascroll.revelado [data-intro-galeriascroll-item].cms-intro-galeriascroll-faixa {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .cms-intro-galeriascroll [data-intro-galeriascroll-item] {
        transition: none;
        filter: none;
        transform: none;
        opacity: 1;
    }

    .cms-intro-galeriascroll-trilho {
        animation: none;
    }
}