/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* === CUSTOM ANIMATIONS === */
@keyframes noise {
    0%, 100% { transform: translate(0, 0) }
    10% { transform: translate(-5%, -5%) }
    20% { transform: translate(-10%, 5%) }
    30% { transform: translate(5%, -10%) }
    40% { transform: translate(-5%, 15%) }
    50% { transform: translate(-10%, 5%) }
    60% { transform: translate(15%, 0) }
    70% { transform: translate(0, 10%) }
    80% { transform: translate(-15%, 0) }
    90% { transform: translate(10%, 5%) }
}

/* === EFFECTS === */
.noise-overlay::after {
    content: "";
    position: fixed;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
    animation: noise 8s steps(10) infinite;
}

.craft-border {
    position: relative;
}
.craft-border::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid #7D6E5D;
    opacity: 0.2;
    pointer-events: none;
}

/* module: catalog */
.product-card-zoom img {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card-zoom:hover img {
    transform: scale(1.08);
}

/* module: home */
.hero-gradient {
    background: radial-gradient(circle at top right, rgba(163, 177, 138, 0.1), transparent);
}