/* Питомцы — сцена, зверёк, подсказка, сердечки и «Z». Движок — js/pets.js.
   Размеры считаются от --pet-scale: пиксель-арт масштабируется только в целое
   число раз, и множитель ставит сцена. */

.vx-pets {
    --pet-scale: 1;
    --pet-size: calc(32px * var(--pet-scale));
    position: relative;
    min-height: var(--pet-size);
}

/* Сайт: свой питомец по нижней кромке окна. Сцена не ловит клики — сквозь
   пустое место вокруг зверька нажимается то, что под ней. */
.vx-pets--viewport {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--pet-size);
    pointer-events: none;
    z-index: 40;
}

.vx-pet {
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--pet-size);
    height: var(--pet-size);
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    will-change: transform;
}

.vx-pet.is-held {
    cursor: grabbing;
    z-index: 1;
}

.vx-pet__sprite {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: calc(256px * var(--pet-scale)) calc(160px * var(--pet-scale));
    image-rendering: pixelated;
    transform-origin: 50% 100%;
}

/* Подсказка с именем — над зверьком. Не отражается вместе со спрайтом: она
   сестра спрайта, а не ребёнок. */
.vx-pet__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 8px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    box-shadow: var(--shadow-2);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.vx-pet:hover .vx-pet__tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.vx-pet.is-held .vx-pet__tip {
    opacity: 0;
}

.vx-pet__name {
    font: var(--type-small-strong);
    color: var(--text-1);
}

.vx-pet__owner {
    font: var(--type-caption);
    color: var(--text-3);
}

/* Сердечки и «Z» — картинки эффектов тем же целым масштабом. Где появиться,
   ставит движок (left и bottom): сердечки — вокруг питомца, «Z» — у морды. */
.vx-pet__fx {
    position: absolute;
    left: 50%;
    bottom: 70%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    pointer-events: none;
}

.vx-pet__fx--heart {
    width: calc(8px * var(--pet-scale));
    height: calc(8px * var(--pet-scale));
    animation: vx-pet-heart 1s ease-out forwards;
}

.vx-pet__fx--z {
    --fx-side: 1;
    width: calc(16px * var(--pet-scale));
    height: calc(16px * var(--pet-scale));
    animation: vx-pet-z 2.4s linear forwards;
}

@keyframes vx-pet-heart {
    from { transform: translate(-50%, 0); opacity: 1; }
    to { transform: translate(-50%, calc(-18px * var(--pet-scale))); opacity: 0; }
}

/* «Z» уплывают вверх и в сторону морды, растворяясь к концу. */
@keyframes vx-pet-z {
    0% { transform: translate(-50%, 0) scale(.6); opacity: 0; }
    15% { opacity: 1; }
    100% {
        transform: translate(calc(-50% + var(--fx-side) * 10px * var(--pet-scale)), calc(-22px * var(--pet-scale))) scale(1);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vx-pet__fx--heart,
    .vx-pet__fx--z {
        animation: vx-pet-fade 1s steps(1, end) forwards;
    }
}

@keyframes vx-pet-fade {
    from { transform: translate(-50%, 0); opacity: 1; }
    to { transform: translate(-50%, 0); opacity: 0; }
}

/* Свой питомец на сайте — только на широком окне: на телефоне внизу
   закреплённые кнопки, а перетаскивание спорит с прокруткой пальцем. */
@media (max-width: 899px) {
    .vx-pets--wide-only {
        display: none;
    }
}

/* Один ряд листа анимацией на стилях — для витрины и админки, где зверёк
   стоит на месте. Ряд и число кадров задаются переменными; масштаб ×2. */
.vx-pet-anim {
    --pet-row: 0;
    --pet-frames: 4;
    --pet-fps: 5;
    display: block;
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    background-size: 512px 320px;
    background-position: 0 calc(var(--pet-row) * -64px);
    image-rendering: pixelated;
    animation: vx-pet-anim calc(var(--pet-frames) / var(--pet-fps) * 1s) steps(var(--pet-frames)) infinite;
}

@keyframes vx-pet-anim {
    from { background-position-x: 0; }
    to { background-position-x: calc(var(--pet-frames) * -64px); }
}

@media (prefers-reduced-motion: reduce) {
    .vx-pet-anim { animation: none; }
}