/* ============================================
   BOTÕES — Delícias da Jó
   Efeito universal de "brilho passando" (shine)
   A cor é definida por cada botão específico.
   Aqui só vive o efeito.
   ============================================ */

/* Todo botão/link com a classe .jo-btn recebe o efeito */
.jo-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}

/* O "flash" — fica escondido à esquerda */
.jo-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.15) 30%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 255, 255, 0.15) 70%,
            rgba(255, 255, 255, 0) 100%);

    transform: skewX(-20deg);
    transition: none;
}

/* Ao passar o mouse (ou focar via teclado), o flash atravessa */
.jo-btn:hover::before,
.jo-btn:focus-visible::before {
    animation: jo-btn-shine 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Garante que o conteúdo do botão fique acima do flash */
.jo-btn>* {
    position: relative;
    z-index: 2;
}

@keyframes jo-btn-shine {
    0% {
        left: -75%;
    }

    100% {
        left: 125%;
    }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .jo-btn::before {
        display: none;
    }
}