/* --- CJ Artworks | Global Imports --- */
@import url("colors.css");
@import url("layout.css");
@import url("header.css");
@import url("nav.css");
@import url("hero.css");
@import url("banner.css");
@import url("featured.css");
@import url("quickview.css");
@import url("collections.css");
@import url("studio.css");
@import url("gallery.css");
@import url("artwork-detail.css");
@import url("blog.css");
@import url("cart.css");
@import url("checkout.css");
@import url("contact.css");
@import url("legal.css");
@import url("values.css");
@import url("connect.css");
@import url("footer.css");
@import url("langSelector.css");
@import url("currencySelector.css");
@import url("cookie-banner.css");
@import url("buttons.css");
@import url("auth.css");
@import url("account.css");

/* --- Base typography & background --- */

body {
    font-family: var(--font-body);
    background-color: var(--primary);
    color: var(--text);
    line-height: 1.65;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

p {
    margin: 0 0 1rem 0;
}

a {
    color: var(--brown-warm);
    transition: color 0.3s var(--ease-elegant);
}

    a:hover {
        color: var(--brown-deep);
    }

*:focus-visible {
    outline: 1px solid var(--brown-warm);
    outline-offset: 3px;
}

/* --- Reveal: pure-CSS fade-in, auto-plays once on render ---
   No JS, no IntersectionObserver, no class toggling. The animation always
   ends at opacity:1 with `both` fill mode, so content can never get stuck
   invisible — even if Blazor reconciles the DOM mid-animation. */

@keyframes cj-reveal-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.reveal {
    animation: cj-reveal-in 1s var(--ease-elegant) both;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        animation: none;
    }

    .art-card:hover .art-card-media img,
    .art-card:hover .art-card-media::before {
        transform: none;
    }

    .banner-fallback::before {
        animation: none;
        transform: none;
    }
}

/* --- Responsive base --- */

@media (max-width: 768px) {
    body {
        font-size: 0.95rem;
    }
}