/* HolidaySG Panda Mascot Styles
   Include via <link rel="stylesheet" href="{{ asset('css/mascot.css') }}"> in layouts/app.blade.php
   when wiring the mascot into the site. */

/* Gentle floating animation for homepage duo */
.mascot-float {
    animation: mascot-float 3s ease-in-out infinite;
}
.mascot-float-delay {
    animation-delay: 1.5s;
}
@keyframes mascot-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Soft bounce for empty states */
.mascot-bounce {
    animation: mascot-bounce 2s ease-in-out infinite;
}
@keyframes mascot-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Head tilt for 404 */
.mascot-tilt {
    animation: mascot-tilt 4s ease-in-out infinite;
}
@keyframes mascot-tilt {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-3deg); }
    75%      { transform: rotate(3deg); }
}

/* Chat avatar pulse (for Luna widget) */
.mascot-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #7c3aed;
}
.mascot-chat-avatar-pulse {
    animation: mascot-pulse 2s ease-in-out infinite;
}
@keyframes mascot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mascot-float,
    .mascot-bounce,
    .mascot-tilt,
    .mascot-chat-avatar-pulse {
        animation: none;
    }
}

/* Homepage intro gradient (matches brand) */
.mascot-intro {
    background: linear-gradient(135deg, #f5f3ff 0%, #fff7ed 100%);
}