/* Hover preview of a species thumbnail (js/species-preview.js) */
.has-image[data-preview-name] { cursor: zoom-in; }

.species-preview {
    position: fixed; z-index: 1080; width: 260px; pointer-events: none;
    background: var(--vw-surface); border: 1px solid var(--vw-border); border-radius: var(--vw-radius);
    box-shadow: 0 12px 32px rgb(74 60 40 / .16), 0 2px 6px rgb(74 60 40 / .08);
    overflow: hidden; opacity: 0; transform: translateX(-6px) scale(.97);
    transition: opacity .16s ease, transform .16s ease, visibility 0s .16s; visibility: hidden;
}
.species-preview[data-side="left"] { transform: translateX(6px) scale(.97); }
.species-preview.open { opacity: 1; transform: none; visibility: visible; transition: opacity .16s ease, transform .16s ease; }

.species-preview-image { position: relative; aspect-ratio: 1; background: var(--vw-paper); border-bottom: 1px solid var(--vw-border); }
.species-preview-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .75rem; mix-blend-mode: multiply; transition: opacity .2s; }
.species-preview-image.loading img { opacity: 0; }
.species-preview-image.loading::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .7) 50%, transparent 70%) #efe8da;
    background-size: 200% 100%; animation: species-preview-shimmer 1.1s linear infinite;
}
@keyframes species-preview-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.species-preview-caption { padding: .65rem .85rem .75rem; display: grid; gap: .1rem; }
.species-preview-caption strong { color: var(--vw-text); font-size: .95rem; line-height: 1.3; }
.species-preview-caption em { color: var(--vw-muted); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
    .species-preview, .species-preview.open { transition: none; transform: none; }
    .species-preview-image.loading::after { animation: none; }
}