@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

/* Custom utilities that might not be fully covered by Tailwind or specific overrides */
body {
    background-image: url('../images/HOAVANBg.svg');
    background-repeat: repeat;
    background-size: 200px;
}

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar for hidden overflows if needed later */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* --- Performance Optimization for Animations --- */
.scroll-animate {
    will-change: opacity, transform;
    backface-visibility: hidden;
    /* Force GPU acceleration */
    transform: translateZ(0);
}

.scroll-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --- Peach Blossom Mouse Trail --- */
.peach-blossom {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
    animation: fall-fade 1s linear forwards;
}

@keyframes fall-fade {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

    100% {
        /* Move down 100px-200px and slight rotation */
        transform: translate(var(--tx, 20px), var(--ty, 100px)) rotate(var(--r, 180deg)) scale(0.5);
        opacity: 0;
    }
}

/* --- Premium Hover Effects for Images --- */
article .aspect-3\/2,
article .rounded-lg,
article .rounded {
    overflow: hidden;
    /* Ensure zoom stays within box */
    transform: translateZ(0);
    /* Hardware acceleration */
}

article img {
    /* Override Tailwind transition-duration-500 */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease !important;
    filter: brightness(1);
    will-change: transform, filter;
}

article:hover img {
    /* Smooth zoom and slight brightness increase */
    transform: scale(1.08) !important;
    filter: brightness(1.08) !important;
}

/* Optional: Slight shadow on the card itself */
article:hover {
    z-index: 10;
}