/* ── Shimmer animation ───────────────────────────────────────────── */
@keyframes pc-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

:root {
    --pc-skeleton-base: #e4e4e4;
    --pc-skeleton-highlight: #f0f0f0;
    --pc-skeleton-banner-base: #3a3a3a;
    --pc-skeleton-banner-highlight: #525252;
}

.pc-skeleton-fill {
    background: linear-gradient(
        90deg,
        var(--pc-skeleton-base) 0%,
        var(--pc-skeleton-highlight) 50%,
        var(--pc-skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: pc-skeleton-shimmer 1.5s ease-in-out infinite;
}

.pc-skeleton-fill--banner {
    background: linear-gradient(
        90deg,
        var(--pc-skeleton-banner-base) 0%,
        var(--pc-skeleton-banner-highlight) 50%,
        var(--pc-skeleton-banner-base) 100%
    );
    background-size: 200% 100%;
    animation: pc-skeleton-shimmer 1.5s ease-in-out infinite;
}

/* ── CMS images (img) ────────────────────────────────────────────── */
html[data-public-page]:not(.pc-ready) img[data-pc-src] {
    display: block;
    width: 100%;
    min-height: 200px;
    object-fit: cover;
    border-radius: 12px;
    background: linear-gradient(
        90deg,
        var(--pc-skeleton-base) 0%,
        var(--pc-skeleton-highlight) 50%,
        var(--pc-skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: pc-skeleton-shimmer 1.5s ease-in-out infinite;
}

html[data-public-page]:not(.pc-ready) img[data-pc-src].img-fluid {
    min-height: 280px;
}

html[data-public-page]:not(.pc-ready) .slide-container img[data-pc-src] {
    min-height: 140px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
}

/* ── CMS banner backgrounds ──────────────────────────────────────── */
html[data-public-page] header .content[data-pc-bg],
html[data-public-page] .hero[data-pc-bg] {
    background-image: none;
}

html[data-public-page]:not(.pc-ready) [data-pc-bg] {
    background-image: none !important;
    position: relative;
    overflow: hidden;
}

html[data-public-page]:not(.pc-ready) [data-pc-bg]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-public-page]:not(.pc-ready) header .content[data-pc-bg]::after {
    background: linear-gradient(
        90deg,
        var(--pc-skeleton-banner-base) 0%,
        var(--pc-skeleton-banner-highlight) 50%,
        var(--pc-skeleton-banner-base) 100%
    );
    background-size: 200% 100%;
    animation: pc-skeleton-shimmer 1.5s ease-in-out infinite;
}

html[data-public-page]:not(.pc-ready) .hero[data-pc-bg]::after {
    background: linear-gradient(
        90deg,
        var(--pc-skeleton-banner-base) 0%,
        var(--pc-skeleton-banner-highlight) 50%,
        var(--pc-skeleton-banner-base) 100%
    );
    background-size: 200% 100%;
    animation: pc-skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Dim overlay stays above skeleton, below text */
html[data-public-page]:not(.pc-ready) header .content[data-pc-bg]::before,
html[data-public-page]:not(.pc-ready) .hero[data-pc-bg]::before {
    z-index: 1;
}

html[data-public-page]:not(.pc-ready) header .text-content,
html[data-public-page]:not(.pc-ready) .hero h1,
html[data-public-page]:not(.pc-ready) .hero p,
html[data-public-page]:not(.pc-ready) .hero a {
    position: relative;
    z-index: 2;
}

/* ── Slider strip placeholder while images load ──────────────────── */
html[data-public-page]:not(.pc-ready) .infinite-slider {
    position: relative;
    min-height: 160px;
}

html[data-public-page]:not(.pc-ready) .infinite-slider .slider {
    opacity: 0.35;
}

/* ── Reveal loaded content ───────────────────────────────────────── */
html[data-public-page].pc-ready img[data-pc-src] {
    animation: none;
    background: none;
    transition: opacity 0.25s ease;
}

html[data-public-page].pc-ready [data-pc-bg]::after {
    display: none;
}

html[data-public-page].pc-ready .infinite-slider .slider {
    opacity: 1;
    transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .pc-skeleton-fill,
    .pc-skeleton-fill--banner,
    html[data-public-page]:not(.pc-ready) img[data-pc-src],
    html[data-public-page]:not(.pc-ready) header .content[data-pc-bg]::after,
    html[data-public-page]:not(.pc-ready) .hero[data-pc-bg]::after {
        animation: none;
        background: var(--pc-skeleton-base);
    }

    html[data-public-page]:not(.pc-ready) header .content[data-pc-bg]::after,
    html[data-public-page]:not(.pc-ready) .hero[data-pc-bg]::after {
        background: var(--pc-skeleton-banner-base);
    }
}