/* ==========================================================================
   Onboarding gate — fade + subtle-white-glow pulse on the active destination.

   Activated by setting   data-onb-stage="1"   or   data-onb-stage="2"
   on <html>, <body>, or any ancestor of the gated surface. chess_sidebar.html
   sets it on <html> via a tiny inline script so it covers every chess page
   uniformly.

   Gating contract (applied by templates):
     - Every lockable card / link adds          data-gate-lock
     - The shop card / link also adds           data-gate-active="shop"
     - The locker room card / link also adds    data-gate-active="locker"

   The CSS fades everything with data-gate-lock, then the stage-specific
   rule un-fades the single data-gate-active target and gives it a pulse.
   ========================================================================== */

/* --- Fade every locked element when a gate is active ---------------------- */
[data-onb-stage="0"] [data-gate-lock],
[data-onb-stage="1"] [data-gate-lock],
[data-onb-stage="2"] [data-gate-lock] {
    opacity: 0.26;
    filter: saturate(0.55) brightness(0.92);
    pointer-events: none !important;
    cursor: var(--cur-ban, not-allowed) !important;
    user-select: none;
    transition: opacity .45s ease, filter .45s ease, box-shadow .45s ease;
}

/* Kill hover/tilt side-effects on locked items --------------------------- */
[data-onb-stage="0"] [data-gate-lock]:hover,
[data-onb-stage="1"] [data-gate-lock]:hover,
[data-onb-stage="2"] [data-gate-lock]:hover,
[data-onb-stage="0"] [data-gate-lock]:focus-visible,
[data-onb-stage="1"] [data-gate-lock]:focus-visible,
[data-onb-stage="2"] [data-gate-lock]:focus-visible {
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- Unlock the active destination + give it the pulse -------------------- */
[data-onb-stage="1"] [data-gate-active="shop"],
[data-onb-stage="2"] [data-gate-active="locker"] {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    cursor: var(--cur-pointer, pointer) !important;
    position: relative;
    z-index: 2;
    animation: onb-pulse-card 2.6s ease-in-out infinite;
}

/* Card-level pulse — roomy, soft white halo */
@keyframes onb-pulse-card {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(255, 255, 255, 0.00),
            0 0 16px 2px rgba(255, 255, 255, 0.10),
            0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(255, 255, 255, 0.06),
            0 0 28px 6px rgba(255, 255, 255, 0.20),
            0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    }
}

/* Tighter pulse for sidebar links — less room to breathe */
[data-onb-stage="1"] .cs-link[data-gate-active="shop"],
[data-onb-stage="2"] .cs-link[data-gate-active="locker"] {
    animation: onb-pulse-link 2.6s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes onb-pulse-link {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.08),
            0 0 8px rgba(255, 255, 255, 0.06);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.22),
            0 0 14px rgba(255, 255, 255, 0.18);
    }
}

/* --- Accessibility: reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-onb-stage="1"] [data-gate-active="shop"],
    [data-onb-stage="2"] [data-gate-active="locker"],
    [data-onb-stage="1"] .cs-link[data-gate-active="shop"],
    [data-onb-stage="2"] .cs-link[data-gate-active="locker"] {
        animation: none;
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.15),
            0 0 16px rgba(255, 255, 255, 0.18);
    }
}

/* ==========================================================================
   Empty-state placeholder slides (Challenges + Locker Room hub cards)

   These reuse the NATIVE .hz-ch-slide and .hz-set-slide designs — same layout,
   same rotator, same look as the real loaded state — but scoped inside a
   [data-ph-locked] carousel container so the decorations (dim, grey-out,
   muted counter, lock ribbon) apply ONLY to the empty-state placeholders and
   cannot clobber the native `opacity:0` rule that hides inactive slides.
   ========================================================================== */

/* Dim + desaturate only the ACTIVE slide. Base `.hz-ch-slide { opacity: 0 }`
   continues to hide the inactive ones, so the fade-out during rotation works
   unchanged. */
[data-ph-locked] .hz-ch-slide.active,
[data-ph-locked] .hz-set-slide.active {
    opacity: 0.78;
    filter: saturate(0.55);
}

/* Swap the teal progress gradient for muted grey so a 0% bar never looks
   like a genuine in-progress challenge. */
[data-ph-locked] .hz-ch-slide .hz-ch-slide-bar-fill {
    background: linear-gradient(90deg, #555e6e, #6b7385);
    box-shadow: none;
}
[data-ph-locked] .hz-ch-slide .hz-ch-slide-reward {
    border-color: rgba(255, 255, 255, 0.1);
}
[data-ph-locked] .hz-ch-slide .hz-ch-slide-reward-value {
    color: rgba(255, 255, 255, 0.55);
}

/* Tiny lock ribbon — top-right corner, both variants */
.hz-ph-lock-tag {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.34rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 2;
}

/* Locker placeholder — year-variant-style card with muted accent */
[data-ph-locked] .hz-set-slide .hz-set-year-big {
    color: rgba(233, 196, 106, 0.55);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-ph-locked] .hz-set-slide .hz-set-counter {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-ph-locked] .hz-set-slide .hz-set-counter-num {
    color: rgba(233, 196, 106, 0.6);
}