/* ==========================================================================
   Efeito "Revelação Direta" via Filtro CSS (Com Scroll Auto e Hover)
   ========================================================================== */

/* 1. O Filtro Base (A imagem fica a preto e branco e com textura de desenho) */
.is-style-sketch-reveal img {
    /* O !important força o Stackable a respeitar o nosso filtro */
    filter: grayscale(100%) contrast(1.2) brightness(1.1) !important;
    
    /* Quando o rato SAI: demora 1.5s a voltar a ser desenho, sem atraso */
    transition: filter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
    cursor: pointer;
}

/* 2. O Hover E o Scroll (A revelação da cor e foco) */
.is-style-sketch-reveal:hover img,
.is-style-sketch-reveal:focus-within img,
.is-style-sketch-reveal.is-revealed-by-scroll img {
    /* O !important força o Stackable a revelar a cor na transição */
    filter: grayscale(0%) contrast(1) brightness(1) !important;
    
    /* Quando o rato ENTRA (ou no scroll): 
       Demora 2.5s a revelar a cor, e só começa após 0.3s (delay) */
    transition: filter 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s !important;
}

/* Garante que o isolamento se aplica para evitar problemas de empilhamento visual */
.is-style-sketch-reveal {
    position: relative;
    isolation: isolate;
}