/* 
 * 3D Face Viewer Styles
 * 
 * These styles can be copied to your main styles.css file if preferred.
 * This CSS defines how the 3D face viewer appears in the header.
 */

#face-viewer-container {
    position: relative;
    overflow: visible; /* Changed from hidden to avoid cutting off model */
    background-color: transparent;
    cursor: default; /* Regular cursor */
    border-radius: 50%; /* Optional: makes the container circular */
    margin: 0 auto; /* Centers the container */
    opacity: 0; /* Start invisible */
    transition: opacity 0.5s ease; /* Smooth fade in */
}

/* Remove the grab effect */
#face-viewer-container:active {
    /* No special styling when active */
}

/* When model is loaded, fade in */
#face-viewer-container.loaded {
    opacity: 1;
}

/* Make the canvas responsive and transparent */
#face-viewer-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    background-color: transparent !important;
}

/* Simple loading indicator - hidden by default */
.face-viewer-loading {
    display: none; /* Hide the loading indicator */
}

/* Logo specific styling in header */
header .logo #face-viewer-container {
    display: inline-block;
    vertical-align: middle;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    #face-viewer-container {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    #face-viewer-container {
        width: 40px;
        height: 40px;
    }
}