/* Movimento compartilhado do tema. Nenhum conteudo depende de uma animacao para aparecer. */
.tm-imagem-pendente {
    opacity: .85;
}

/* So os textos separados do banner se movem; a arte nunca e ampliada ou cortada. */
@media (prefers-reduced-motion: no-preference) {
    .tm-hero .slick-active .tm-hero__conteudo > *,
    .tm-hero__slides:not(.slick-initialized) .tm-hero__conteudo > * {
        animation: tm-banner-texto 1.2s cubic-bezier(.25, .1, .25, 1) both;
    }

    .tm-hero .tm-hero__conteudo > :nth-child(2) { animation-delay: .15s; }
    .tm-hero .tm-hero__conteudo > :nth-child(3) { animation-delay: .3s; }
}

@keyframes tm-banner-texto {
    from { opacity: .8; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
}

/* Mais espaco para os banners no desktop, mantendo as margens do tema. */
@media (min-width: 992px) {
    .tm-hero .tm-hero__moldura { max-width: 1440px; }
}

.tm-body .tm-btn {
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.tm-body .tm-btn:active:not(:disabled) { transform: translateY(1px); }
.tm-body :is(.tm-card, .tm-post, .tm-noticia, .tm-album, .tm-atalho):focus-within {
    box-shadow: var(--tm-shadow);
}

.tm-lightbox.mfp-bg { transition: opacity .35s ease; }
.tm-lightbox .mfp-content { transition: opacity .35s ease, translate .35s ease; }
.tm-lightbox:not(.mfp-ready) .mfp-content,
.tm-lightbox.mfp-removing .mfp-content { opacity: 0; translate: 0 8px; }
.tm-lightbox.mfp-ready:not(.mfp-removing) .mfp-content { opacity: 1; translate: 0 0; }

@media (hover: hover) and (pointer: fine) {
    .tm-body .tm-btn:hover:not(:disabled) { transform: translateY(-2px); }
    .tm-body .tm-btn:active:not(:disabled) { transform: translateY(0); }
    .tm-card__media img, .tm-foto img, .tm-album__img img, .tm-noticia__img img {
        transition: transform .55s cubic-bezier(.22, 1, .36, 1);
    }
}

/* Tambem se aplica aos estilos posteriores do template e aos plugins. */
@media (prefers-reduced-motion: reduce) {
    .tm-body *, .tm-body *::before, .tm-body *::after,
    .tm-lightbox, .tm-lightbox * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .tm-imagem-pendente { opacity: 1; }
}

/* ==========================================================================
   A. Banner: o ponto ativo vira uma barra que se enche até a troca de slide.
      Pausa junto com o carrossel (mouse/foco); a arte não é ampliada nem cortada.
   ========================================================================== */
.tm-hero--progresso .tm-hero__dots .slick-active button {
    position: relative;
    overflow: hidden;
    width: 44px;
    background: rgba(255, 255, 255, .45);
}

.tm-hero--progresso .tm-hero__dots .slick-active button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #fff;
    transform-origin: left center;
    animation: tm-hero-progresso var(--tm-hero-tempo, 8.5s) linear forwards;
}

.tm-hero--pausado .tm-hero__dots .slick-active button::after {
    animation-play-state: paused;
}

@keyframes tm-hero-progresso {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (max-width: 767px) {
    .tm-hero--progresso .tm-hero__dots .slick-active button {
        width: 28px;
    }
}

/* ==========================================================================
   D. Ícone do "Acesso rápido" dá um pequeno salto ao passar o mouse (só mouse/trackpad).
   ========================================================================== */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .tm-atalho:hover .tm-atalho__icone i {
        animation: tm-salto .55s cubic-bezier(.3, 1.6, .5, 1);
    }
}

@keyframes tm-salto {
    0% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* ==========================================================================
   E. Faixas de cor: manchas de luz que se deslocam muito devagar (aurora).
      Faixa de chamada (fundo na cor da marca) e faixa de título das páginas (fundo claro).
   ========================================================================== */
.tm-chamada__inner,
.tm-pagina-topo__inner {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .tm-chamada::before,
    .tm-pagina-topo:not(.tm-pagina-topo--imagem)::before {
        content: "";
        position: absolute;
        inset: -60% -20%;
        z-index: 0;
        pointer-events: none;
        animation: tm-aurora 24s ease-in-out infinite alternate;
        will-change: transform;
    }

    .tm-chamada::before {
        background:
            radial-gradient(closest-side at 22% 38%, rgba(255, 255, 255, .20), transparent),
            radial-gradient(closest-side at 72% 64%, color-mix(in srgb, var(--tm-primary) 55%, #a5f3fc), transparent),
            radial-gradient(closest-side at 50% 10%, rgba(255, 255, 255, .10), transparent);
        opacity: .65;
    }

    .tm-pagina-topo:not(.tm-pagina-topo--imagem)::before {
        background:
            radial-gradient(closest-side at 78% 30%, color-mix(in srgb, var(--tm-primary) 16%, transparent), transparent),
            radial-gradient(closest-side at 30% 75%, color-mix(in srgb, var(--tm-primary) 10%, transparent), transparent);
    }
}

@keyframes tm-aurora {
    0% { transform: translate3d(-6%, -4%, 0) rotate(0deg); }
    50% { transform: translate3d(3%, 5%, 0) rotate(6deg); }
    100% { transform: translate3d(7%, -2%, 0) rotate(-4deg); }
}