/* Performance & UX Enhancements 2025 */

/* 1. Skeleton Loading Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.skeleton-box {
    display: inline-block;
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: #f3f4f6;
    border-radius: 0.25rem;
}

/* 2. Content Transitions */
.reveal-on-load {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.reveal-on-load.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-load {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* 3. Image Loading States */
.img-loading {
    background: #f3f4f6;
    filter: blur(5px);
    transition: filter 0.3s ease;
}

.img-loaded {
    filter: blur(0);
}

/* 4. JS Fallback Utilities */
.no-js .reveal-on-load {
    opacity: 1 !important;
    transform: none !important;
}

.no-js [loading="lazy"] {
    display: block;
}
/* 5. Image Placeholder System */
.img-placeholder-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    /* background-color: #f8f9fa; */
    overflow: hidden;
    display: block;
}

.img-placeholder-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: auto;
    opacity: 0.4;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.img-main-real {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.img-main-real.loaded {
    opacity: 1;
}

.img-main-real.loaded + .img-placeholder-svg {
    opacity: 0;
}
/* 6. Section Gating Styles */
.section-loader {
    position: relative;
    width: 100%;
}

.real-section-container {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hidden {
    display: none !important;
}

.opacity-0 {
    opacity: 0 !important;
}

/* Ensure content is centered in skeletons */
.section-skeleton .product-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Accessibility: respect reduced motion for section reveals */
@media (prefers-reduced-motion: reduce) {
    .real-section-container {
        transition: none !important;
        opacity: 1 !important;
    }
}

/* No-JS fallback: hide skeletons, show real content */
.no-js .section-skeleton {
    display: none !important;
}

.no-js .hidden {
    display: block !important;
}

.no-js .opacity-0 {
    opacity: 1 !important;
}