/* Custom animations and additional styles for the Dog Age Calculator */

/* Smooth transitions for all interactive elements */
* {
    transition: all 0.2s ease-in-out;
}

/* Custom focus states for better accessibility */
input:focus,
select:focus,
button:focus {
    outline: 2px solid #8B5CF6;
    outline-offset: 2px;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #8B5CF6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #7C3AED;
}

/* Pulse animation for the result container */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.pulse-once {
    animation: pulse 0.6s ease-in-out;
}

/* Floating animation for the dog emoji */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* Mobile responsiveness improvements */
@media (max-width: 480px) {
    .container {
        margin: 1rem;
        padding: 1.5rem;
    }
}

/* Print styles */
@media print {
    .bg-gradient-to-br {
        background: white !important;
    }
    
    .shadow-2xl {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}