/* Base Overrides for Brutalist Style */
html {
    scroll-behavior: smooth;
    background-color: #004551;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbar for cleaner look if desired, but keep functionality */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #002a31;
}
::-webkit-scrollbar-thumb {
    background: #fd3d1d;
    border: 3px solid #002a31;
}
::-webkit-scrollbar-thumb:hover {
    background: #ff5235;
}

/* Animations Classes */
.reveal-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-slide {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal-slide.active {
    opacity: 1;
    transform: translateX(0);
}

/* Fix for mix-blend-mode bug on some mobile browsers */
.mix-blend-difference {
    mix-blend-mode: difference;
    /* isolation: isolate; */
}

/* Image Hover Grayscale Logic is handled via group-hover in Tailwind, but we ensure transitions are smooth */
.shop-card img {
    will-change: transform, opacity;
}