@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}
/* Updated modal animation for pure fade */
.modal-enter {
    opacity: 0;
}
.modal-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-out;
}
.modal-leave {
    opacity: 1;
}
.modal-leave-active {
    opacity: 0;
    transition: opacity 300ms ease-in;
}
.filter-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.filter-btn.active {
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
}
.filter-btn:not(.active) {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #374151; /* text-gray-700 */
}
.filter-btn:not(.active):hover {
    background-color: #e5e7eb; /* bg-gray-200 */
}
/* Styles for scroll animation */
.portfolio-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.portfolio-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Hide arrows on number input */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
/* Styles for menu zoom */
#menu-lightbox-image {
    transition: transform 0.3s ease-out;
    cursor: zoom-in;
    touch-action: none; /* Prevents scrolling on touch devices when panning */
}
#menu-lightbox-image.is-zoomed {
    cursor: grab;
}
 #menu-lightbox-image.is-panning {
    cursor: grabbing;
}