/* Unified Loading UI System (n9) */
:root {
    --n9-accent: var(--seo-primary, #f7a984);
    --n9-accent-soft: #fbc8ae;
    --n9-bg: #ffffff;
    --n9-border: rgba(16, 24, 40, 0.08);
    --n9-skel-base: #edf1f5;
    --n9-skel-highlight: rgba(255, 255, 255, 0.72);
    --n9-radius-xs: 6px;
    --n9-radius-s: 8px;
    --n9-radius-m: 12px;
    --n9-radius-l: 16px;
    --n9-progress-h: 3px;
}

/* Global progress bar */
#n9-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--n9-progress-h);
    opacity: 0;
    pointer-events: none;
    z-index: 999999;
    transition: opacity 0.2s ease;
}

#n9-progress.is-visible {
    opacity: 1;
}

#n9-progress .n9-progress-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#n9-progress .n9-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: min(38vw, 420px);
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, var(--n9-accent) 0%, var(--n9-accent) 78%, var(--n9-accent-soft) 100%);
    box-shadow: 0 0 8px rgba(247, 169, 132, 0.2);
    will-change: transform;
}

#n9-progress .n9-progress-glint {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    will-change: transform;
}

/* Loading region state */
[data-n9-loading-region] {
    position: relative;
}

[data-n9-loading-region][data-n9-state='pending'],
[data-n9-loading-region][data-n9-state='skeleton-visible'] {
    contain: layout paint;
}

/* Primitive base */
.n9-sk {
    position: relative;
    overflow: hidden;
    border-color: transparent !important;
}

.n9-sk::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translate3d(-120%, 0, 0);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--n9-skel-highlight), rgba(255, 255, 255, 0));
    animation: n9-shimmer 1.65s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

/* Primitive variants (used as semantic tokens + safe geometry hints) */
.n9-sk--title {
    border-radius: var(--n9-radius-s) !important;
    min-height: 1.05em;
}

.n9-sk--text {
    border-radius: var(--n9-radius-xs) !important;
    min-height: 0.95em;
}

.n9-sk--media {
    border-radius: var(--n9-radius-m) !important;
    background: var(--n9-skel-base) !important;
}

.n9-sk--avatar {
    border-radius: 50% !important;
}

.n9-sk--button {
    border-radius: 999px !important;
}

.n9-sk--chip {
    border-radius: 999px !important;
}

.n9-sk--row {
    border-radius: var(--n9-radius-s) !important;
}

/* Unified skeleton appearance on live nodes */
.n9-region-loading .n9-skelized {
    color: transparent !important;
    text-shadow: none !important;
    background-color: var(--n9-skel-base) !important;
}

.n9-region-loading .n9-skelized * {
    color: transparent !important;
}

.n9-region-loading .n9-sk--button,
.n9-region-loading .n9-sk--chip {
    border-color: transparent !important;
}

/* Keep media placeholder until media itself is ready */
.n9-media-pending {
    position: relative;
    overflow: hidden;
    background: var(--n9-skel-base) !important;
}

.n9-media-pending::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translate3d(-120%, 0, 0);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
    animation: n9-shimmer 1.45s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

.n9-media-pending > img,
.n9-media-pending > picture,
.n9-media-pending > iframe,
.n9-media-pending > video,
.n9-media-pending > .wp-post-image {
    opacity: 0 !important;
}

.n9-media-ready > img,
.n9-media-ready > picture,
.n9-media-ready > iframe,
.n9-media-ready > video,
.n9-media-ready > .wp-post-image {
    opacity: 1;
    transition: opacity 0.22s ease;
}

[data-n9-loading-region][data-n9-state='reveal-complete'] .n9-skelized {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Optional template helpers for consistent spacing where needed */
[data-n9-template='catalog'] .n9-sk--row,
[data-n9-template='article-like'] .n9-sk--row,
[data-n9-template='account-orders'] .n9-sk--row,
[data-n9-template='vendor-dashboard'] .n9-sk--row,
[data-n9-template='checkout'] .n9-sk--row,
[data-n9-template='product-card'] .n9-sk--row {
    margin-bottom: 8px;
}

@keyframes n9-shimmer {
    0% {
        transform: translate3d(-120%, 0, 0);
        opacity: 0.74;
    }
    50% {
        opacity: 0.52;
    }
    100% {
        transform: translate3d(120%, 0, 0);
        opacity: 0.74;
    }
}

@media (prefers-reduced-motion: reduce) {
    #n9-progress,
    #n9-progress .n9-progress-bar,
    #n9-progress .n9-progress-glint {
        transition: none;
    }

    .n9-sk::after,
    .n9-media-pending::before {
        animation: none;
        transform: none;
        opacity: 0;
    }
}