/* Sheep Interaction Container Styles */
#sheep-interaction-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind content but in front of background if needed. Or 10 if overlay. Let's use 0 and pointer-events none to be safe overlay */
    z-index: 10;
    pointer-events: none; /* Crucial: Allow clicks to pass through to the gallery items */
    overflow: hidden;
    border-radius: 0; /* Match parent if needed, or just fill */
}

/* Sheep Element */
.sheep-element {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none; 
    transform-origin: center bottom;
    will-change: transform, left, top;
    z-index: 20; /* Above trails */
}

/* Canvas for Trails */
#sheep-trail-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

/* Animations */
@keyframes sheep-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes sheep-idle-ears {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}

.sheep-anim-bob {
    animation: sheep-bob 2s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sheep-element {
        width: 40px;
        height: 40px;
    }
}