/* _content/Vekso.Api/Components/Compartilhado/VekSprite.razor.rz.scp.css */
/* Story 16.11 — CSS isolado do componente (nada em wwwroot/css/app.css).
   O movimento do mascote é 100% CSS: zero round-trip por quadro (o servidor só decide a POSE).
   Consome só variáveis globais já existentes (--vk-*), então segue os temas claro/escuro. */

.vek-sprite[b-zpwyx1n530] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Brilho suave atrás do mascote — dá "chão" ao PNG recortado nos dois temas. */
.vek-sprite[b-zpwyx1n530]::after {
    content: "";
    position: absolute;
    inset: auto 8% 2% 8%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--vk-amarelo) 0%, transparent 70%);
    opacity: .22;
    pointer-events: none;
}

.vek-sprite-toque[b-zpwyx1n530] {
    all: unset;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.vek-sprite-toque:focus-visible[b-zpwyx1n530] {
    outline: 2px solid var(--vk-amarelo);
    outline-offset: 2px;
}

.vek-sprite-img[b-zpwyx1n530] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 50% 100%;
    user-select: none;
    -webkit-user-drag: none;
}

/* Idle: a "vida" vem da respiração (o quadro só troca a cada 60–120s, decidido no C#). */
.vek-sprite.idle .vek-sprite-img[b-zpwyx1n530] {
    animation: vek-respira-b-zpwyx1n530 2.4s ease-in-out infinite alternate;
}

/* Acenar: pose de clímax + balanço; o componente volta ao idle em 1,2 s (mesma janela do WPF). */
.vek-sprite.acenar .vek-sprite-img[b-zpwyx1n530] {
    animation: vek-balanco-b-zpwyx1n530 1.2s ease-in-out 1;
}

@keyframes vek-respira-b-zpwyx1n530 {
    from { transform: scaleY(1); }
    to   { transform: scaleY(1.02); }
}

@keyframes vek-balanco-b-zpwyx1n530 {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-7deg); }
    45%  { transform: rotate(7deg); }
    70%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* Acessibilidade: quem pediu menos movimento vê o mascote parado (a pose continua a mesma).
   Os seletores repetem `.idle`/`.acenar` de propósito: media query não soma especificidade, e
   `.vek-sprite .vek-sprite-img` (0,3,0) perde para as regras de estado (0,4,0) — o bloco ficava
   inerte. Se surgir um estado novo lá em cima, ele também precisa entrar aqui. */
@media (prefers-reduced-motion: reduce) {
    .vek-sprite.idle .vek-sprite-img[b-zpwyx1n530],
    .vek-sprite.acenar .vek-sprite-img[b-zpwyx1n530] {
        animation: none;
    }
}