/* =====================================================================
   Efeitos de UX/UI reutilizáveis (opt-in por classe/atributo)
   Carregado por base.html em todas as páginas.
   ===================================================================== */

/* --- Revelar ao rolar: elementos com [data-revelar] surgem suavemente ---
   html.ux-js é marcado no <head> por base.js, então os elementos já nascem ocultos (sem "piscar") */
html.ux-js [data-revelar] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
html.ux-js [data-revelar].ux-visivel {
    opacity: 1;
    transform: none;
}

/* --- Card que se eleva ao passar o mouse (usa `translate`, não conflita com `transform`) ---
   Seletores com "html" para vencer a classe `transition` do Tailwind */
html .ux-card-elevar {
    transition: translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}
html.ux-js [data-revelar].ux-card-elevar {
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1),
                translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover: hover) {
    html .ux-card-elevar:hover {
        translate: 0 -3px;
        box-shadow: 0 12px 28px -12px rgba(47, 199, 207, .35);
    }
}

/* --- Voto: pulso no botão, número "saltando" e bolha "+1" subindo --- */
.ux-voto-pop {
    animation: ux-voto-pop .45s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes ux-voto-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(.88); }
    70%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.ux-voto-anel::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid currentColor;
    animation: ux-voto-anel .6s ease-out forwards;
    pointer-events: none;
}
@keyframes ux-voto-anel {
    from { opacity: .8; transform: scale(1); }
    to   { opacity: 0;  transform: scale(1.45); }
}
.ux-mais-um {
    position: absolute;
    left: 50%;
    top: -4px;
    font-size: 12px;
    font-weight: 900;
    color: #5CE1E6;
    pointer-events: none;
    animation: ux-mais-um .8s ease-out forwards;
    text-shadow: 0 1px 6px rgba(47, 199, 207, .6);
}
@keyframes ux-mais-um {
    from { opacity: 1; transform: translate(-50%, 0) scale(.9); }
    to   { opacity: 0; transform: translate(-50%, -26px) scale(1.15); }
}
.ux-contagem-salto {
    display: inline-block;
    animation: ux-contagem-salto .4s ease;
}
@keyframes ux-contagem-salto {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
.ux-tremer {
    animation: ux-tremer .35s ease;
}
@keyframes ux-tremer {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* --- Brilho passando (selos de Boost / Destaque) --- */
.ux-brilho {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ux-brilho::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .45) 50%, transparent 75%);
    transform: translateX(-120%);
    animation: ux-brilho 3.2s ease-in-out infinite;
    z-index: -1;
}
@keyframes ux-brilho {
    0%, 55% { transform: translateX(-120%); }
    100%    { transform: translateX(120%); }
}

/* --- Skeleton (carregamento) --- */
.ux-skeleton {
    background: linear-gradient(90deg, rgba(51, 65, 85, .45) 25%, rgba(71, 85, 105, .65) 50%, rgba(51, 65, 85, .45) 75%);
    background-size: 200% 100%;
    animation: ux-skeleton 1.3s linear infinite;
}
html.light .ux-skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
}
@keyframes ux-skeleton {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* --- Imagem progressiva: img[data-progressivo] brilha enquanto carrega e surge suavemente --- */
/* Tons neutros semitransparentes: funcionam sobre fundo claro e escuro */
html.ux-js img[data-progressivo]:not(.ux-img-ok) {
    background: linear-gradient(90deg, rgba(127, 127, 127, .10) 25%, rgba(127, 127, 127, .24) 50%, rgba(127, 127, 127, .10) 75%);
    background-size: 200% 100%;
    animation: ux-skeleton 1.3s linear infinite;
    color: transparent;  /* oculta o texto alternativo durante o carregamento */
}
img.ux-img-ok { animation: ux-img-surgir .45s ease-out; }
@keyframes ux-img-surgir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Acessibilidade: quem prefere menos movimento não recebe animações --- */
@media (prefers-reduced-motion: reduce) {
    html.ux-js [data-revelar] { opacity: 1; transform: none; transition: none; }
    html .ux-card-elevar, html .ux-card-elevar:hover { translate: none; }
    .ux-voto-pop, .ux-contagem-salto, .ux-tremer, .ux-mais-um,
    .ux-voto-anel::after, .ux-brilho::after, .ux-skeleton,
    html.ux-js img[data-progressivo], img.ux-img-ok { animation: none; }
    .ux-mais-um { display: none; }
}