/* avatar-3d-cards.css — live 3D GLB thumbnails inside Bootstrap cards.
   Used together with assets/js/avatar-3d-cards.js. */

.avatar-3d-thumb {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

/* The placeholder image keeps driving the box size; the 3D canvas overlays it. */
.avatar-3d-thumb > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.25s ease;
}

/* Once the live 3D render is up, the flat image disappears (it must keep
   occupying layout space, so opacity instead of display). */
.avatar-3d-thumb.is-3d-active > img {
    opacity: 0;
}

/* While a model is downloading/parsing, dim the placeholder and show a
   spinner (most useful for cards that only have the generic default image). */
.avatar-3d-thumb.is-3d-loading:not(.is-3d-active) > img {
    opacity: 0.35;
}

.avatar-3d-thumb.is-3d-loading:not(.is-3d-active)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    animation: avatar-3d-spin 0.8s linear infinite;
    pointer-events: none;
}

@keyframes avatar-3d-spin {
    to {
        transform: rotate(360deg);
    }
}

/* If the 3D load fails on a card that has no thumbnail image, fall back to
   the default avatar so the tile is never left blank. */
.avatar-3d-thumb[data-avatar-3d="failed"]:not(:has(> img)) {
    background: url("/static/assets/img/default-avatar.png") center / contain no-repeat;
}

.avatar-3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: grab;
    /* Horizontal drags orbit the avatar; vertical swipes keep scrolling the page. */
    touch-action: pan-y;
}

.avatar-3d-thumb.is-3d-active .avatar-3d-canvas {
    opacity: 1;
}

.avatar-3d-canvas.is-dragging {
    cursor: grabbing;
}

/* Large single-model preview variant (avatar page hero, avatar form step 2). */
.avatar-3d-preview {
    height: 400px;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}