/* --- Mascot Animations --- */
.hero-mascot-float {
    position: absolute;
    top: -40px; /* Float above top */
    right: -30px; /* Float off right corner */
    z-index: 10;
    animation: float-mascot 6s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

/* Ensure feature image container allows overflow for mascots */
.feature-image {
    overflow: visible !important;
    z-index: 1;
}

.feature-mascot {
    position: absolute;
    width: 100px;
    z-index: 20; /* High z-index to float above card */
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
    animation: float-mascot 5s ease-in-out infinite;
    pointer-events: none;
}

/* Adjusted positions to float ON TOP of corners, not cut off */
.corner-top-right {
    top: -40px;
    right: -30px;
    transform: rotate(10deg);
}

.corner-bottom-left {
    bottom: -30px;
    left: -30px;
    transform: rotate(-10deg);
}

.corner-bottom-right {
    bottom: -30px;
    right: -30px;
    transform: rotate(5deg);
}

@keyframes float-mascot {
    0%, 100% { transform: translateY(0) rotate(var(--rotation, 0deg)); }
    50% { transform: translateY(-12px) rotate(var(--rotation, 0deg)); }
}

/* Specific overrides */
.corner-top-right { --rotation: 10deg; animation-name: float-tilt-right; }
.corner-bottom-left { --rotation: -10deg; animation-name: float-tilt-left; }
.corner-bottom-right { --rotation: 5deg; animation-name: float-tilt-right-subtle; }

@keyframes float-tilt-right {
    0%, 100% { transform: translateY(0) rotate(10deg); }
    50% { transform: translateY(-12px) rotate(12deg); }
}

@keyframes float-tilt-left {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-12px) rotate(-12deg); }
}

@keyframes float-tilt-right-subtle {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-12px) rotate(7deg); }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-mascot-float {
        width: 70px;
        top: -30px;
        right: 0px; /* Tucked closer on mobile */
    }
    
    .feature-mascot {
        width: 70px;
    }
    
    /* On mobile, pull them in slightly so they don't overflow screen width */
    .corner-top-right { right: -10px; }
    .corner-bottom-left { left: -10px; }
    .corner-bottom-right { right: -10px; }
}