/* =============================================================================
 * Modern 2026 CSS Features — ServParts
 * Contains: View Transitions, Scroll-driven Animations, Container Queries
 * ============================================================================= */

/* ─── 1. VIEW TRANSITIONS API ────────────────────────────────────────────────
 * Enables smooth cross-page transitions (Chrome 111+, Edge, Opera)
 * When navigating between pages, elements with same view-transition-name
 * will morph/crossfade automatically
 * ───────────────────────────────────────────────────────────────────────────── */

@view-transition {
    navigation: auto;
}

/* Default cross-fade for all pages */
::view-transition-old(root) {
    animation: fade-out 0.2s ease-out;
}
::view-transition-new(root) {
    animation: fade-in 0.3s ease-in;
}

@keyframes fade-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.98); }
}
@keyframes fade-in {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}

/* Named transitions for persistent elements */
header {
    view-transition-name: site-header;
}
footer {
    view-transition-name: site-footer;
}
.logo, .site-logo, [class*="logo"] {
    view-transition-name: site-logo;
}

/* Header/footer don't animate (stay fixed) */
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation: none;
}

/* Logo morphs between pages */
::view-transition-old(site-logo) {
    animation: fade-out 0.15s ease-out;
}
::view-transition-new(site-logo) {
    animation: fade-in 0.25s ease-in 0.1s both;
}

/* ─── 2. SCROLL-DRIVEN ANIMATIONS ────────────────────────────────────────────
 * Elements animate as user scrolls (CSS-only, zero JavaScript)
 * Chrome 115+, Edge, Opera — graceful fallback for others
 * ───────────────────────────────────────────────────────────────────────────── */

/* Scroll-triggered fade-in-up */
@keyframes scroll-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply to sections, cards, and content blocks */
.glass-card,
.card,
section,
[class*="section"],
.hero-section,
.faq-category,
.catalog-content,
main > div {
    animation: scroll-fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

/* Scroll progress bar at top of page */
@keyframes scroll-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0d9488, #14b8a6, #2dd4bf);
    transform-origin: left;
    animation: scroll-progress linear;
    animation-timeline: scroll(root);
    z-index: 10000;
    pointer-events: none;
}

/* Parallax-style hero slow-scroll */
@keyframes parallax-slow {
    from { transform: translateY(0); }
    to   { transform: translateY(-30px); }
}

.hero-section,
[class*="hero"] {
    animation: parallax-slow linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 50%;
}

/* Scale-in for images on scroll */
@keyframes scroll-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

img[loading="lazy"],
.product-image,
[class*="product"] img {
    animation: scroll-scale-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
}

/* Fallback for browsers that don't support scroll-driven animations */
@supports not (animation-timeline: view()) {
    .glass-card,
    .card,
    section,
    [class*="section"],
    main > div {
        animation: none;
        opacity: 1;
        transform: none;
    }
    img[loading="lazy"],
    .product-image,
    [class*="product"] img {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .hero-section,
    [class*="hero"] {
        animation: none;
        transform: none;
    }
}

/* ─── 3. CONTAINER QUERIES ───────────────────────────────────────────────────
 * Components adapt to their CONTAINER size, not viewport
 * Chrome 105+, Firefox 110+, Safari 16+
 * ───────────────────────────────────────────────────────────────────────────── */

/* Mark containers */
.catalog-content,
.products-grid,
#productsGrid,
.catalog-layout,
.container {
    container-type: inline-size;
    container-name: content;
}

.catalog-sidebar,
#catalogSidebar {
    container-type: inline-size;
    container-name: sidebar;
}

/* Product card adapts to container width */
@container content (max-width: 500px) {
    .product-card,
    [class*="product-card"] {
        /* Stack vertically in narrow containers */
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    .product-card img,
    [class*="product-card"] img {
        height: 120px;
    }
    .product-card .product-actions,
    [class*="product-card"] .product-actions {
        flex-direction: column;
        gap: 0.35rem;
    }
    .product-card .product-actions button,
    [class*="product-card"] .product-actions button {
        width: 100%;
        font-size: 0.8rem;
        padding: 0.5rem;
    }
}

@container content (min-width: 501px) and (max-width: 800px) {
    .product-card,
    [class*="product-card"] {
        padding: 0.875rem;
    }
}

@container content (min-width: 801px) {
    .product-card,
    [class*="product-card"] {
        padding: 1rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .product-card:hover,
    [class*="product-card"]:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    }
}

/* Glass cards adapt to container */
@container content (max-width: 600px) {
    .glass-card {
        padding: 1rem;
        border-radius: 12px;
    }
}

@container content (min-width: 601px) {
    .glass-card {
        padding: 1.5rem;
        border-radius: 16px;
    }
}

/* Sidebar categories adapt */
@container sidebar (max-width: 200px) {
    .cat-list button,
    .cat-list a {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
    .cat-count {
        font-size: 0.7rem;
    }
}

/* Fallback for browsers without container queries */
@supports not (container-type: inline-size) {
    .product-card:hover,
    [class*="product-card"]:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    }
}