/*
  Custom CSS for Happy Pet Clinic Website
  This file is for styling that cannot be directly achieved with Tailwind CSS utility classes,
  such as custom keyframe animations.
*/

/* Basic Reset for Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Custom Keyframe Animations */

/* Fade-in-up animation for hero text */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.3s; /* Delay the animation slightly */
    opacity: 0; /* Start hidden */
}

/* Subtle pulse animation for the UGD 24 JAM badge */
@keyframes pulse-light {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.7); /* secondary color with opacity */
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 10px rgba(252, 211, 77, 0); /* secondary color with full transparency */
    }
}

.animate-pulse-light {
    animation: pulse-light 2s infinite;
}

/* Custom Scrollbar (Optional - can be customized further) */
/* Works primarily on Webkit browsers (Chrome, Safari, Edge) */
/* ::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #10B981; /* primary color */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #059669; /* a darker shade of primary */
} */

/* Additional custom styles if needed in the future */