/* /static/css/modern_tools_styles.css */

/* Custom CSS for animations and enhanced design for modern tools */

/* Universal Animations */
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-modal {
    animation: fadeInModal 0.3s ease-out forwards;
}

@keyframes fadeOutModal {
    from { opacity: 1; }
    to { opacity: 0; }
}

.animate-fade-out-modal {
    animation: fadeOutModal 0.3s ease-out forwards;
}

@keyframes scaleInModalContent {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in-modal-content {
    animation: scaleInModalContent 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; /* Spring effect */
}

@keyframes scaleOutModalContent {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

.animate-scale-out-modal-content {
    animation: scaleOutModalContent 0.3s ease-in forwards;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.animate-bounce-in {
    animation: bounceIn 0.5s ease-out forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.7s ease-out forwards;
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-left {
    animation: slide-in-left 0.7s ease-out forwards;
}

@keyframes shake-x {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.animate-shake-x {
    animation: shake-x 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes pulseIcon {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.animate-pulse-icon {
    animation: pulseIcon 2s infinite ease-in-out;
}

@keyframes resultPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.01);
        opacity: 0.98;
    }
}

.result-pulse {
    animation: resultPulse 1.5s ease-out; /* Single pulse on load */
}


/* Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }


/* Specific styles for the DNS lookup modal */
.modal-content-card {
    @apply bg-gray-50 p-4 rounded-lg shadow-sm mb-3 border border-gray-200; /* Adjusted background for contrast */
}
.modal-content-header {
    @apply text-lg font-semibold text-gray-700 mb-2;
}
.copy-button {
    @apply ml-2 px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 transition-colors duration-200;
}


/* Utility for FAQ accordion - ensures smooth transition */
.accordion-content {
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    max-height: 0; /* Default collapsed state */
}
.accordion-content.hidden {
    max-height: 0 !important; /* Force hide */
}

/* Ensure material symbols have correct font-feature-settings */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24; /* Default optical size */
}
/* You can override opsz as needed for different sizes, e.g., text-5xl might warrant opsz 48 */
.text-5xl.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.text-6xl.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.text-7xl.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }