/* ============================================================
   CCG OVERLAYS — INTERACTION SAFETY LOCK
   ------------------------------------------------------------
   Prevents starfield / grid / CRT layers from blocking clicks
   This MUST exist for header/nav to work.
============================================================ */

.ccg-bg,
.ccg-bg *,
.ccg-bg-starfield,
.ccg-bg-grid,
.ccg-bg-crt-overlay {
    pointer-events: none !important;
}

html.ccg-mobile-defer-visuals .ccg-bg-starfield,
html.ccg-mobile-defer-visuals .ccg-bg-starfield::after,
html.ccg-mobile-defer-visuals .ccg-bg-grid,
html.ccg-mobile-defer-visuals .ccg-bg-crt-overlay {
    opacity: 0;
}

html.ccg-mobile-defer-visuals .ccg-bg-starfield,
html.ccg-mobile-defer-visuals .ccg-bg-starfield::after,
html.ccg-mobile-defer-visuals .ccg-bg-grid {
    background-image: none;
}

html.ccg-mobile-defer-visuals .ccg-bg-crt-overlay {
    background: none;
}

.ccg-bg-starfield,
.ccg-bg-starfield::after,
.ccg-bg-grid,
.ccg-bg-crt-overlay {
    transition: opacity 420ms ease;
}

/* ============================================================
   VISUAL LOCK — PREVENT RUNTIME HAZE / OVERLAY BUGS (HOME ONLY)
============================================================ */

html[data-ccg-page="home"] body[data-ccg-visual-lock="true"] * {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal !important;
}

/* Decorative hero/glow layers must never intercept taps */
.ccg-hero-scanlines,
.ccg-hero__backdrop,
.ccg-hero-image,
.game-hero__bg,
.ccg-genre-hero__bg,
.ccg-genre-hero__overlay,
.home-hero__bg,
.home-hero__scanlines,
.home-hero__visual-plate,
.home-hero__visual-img,
.home-hero__visual-overlay {
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .ccg-bg-starfield,
    .ccg-bg-grid,
    .ccg-bg-crt-overlay,
    .ccg-hero-scanlines,
    .ccg-hero__backdrop,
    .game-hero__bg,
    .ccg-genre-hero__bg,
    .ccg-genre-hero__overlay,
    .home-hero__bg,
    .home-hero__scanlines,
    .home-hero__visual-plate,
    .home-hero__visual-img,
    .home-hero__visual-overlay,
    .ccg-hero-overlay-grid,
    .ccg-hero-overlay-starfield {
        pointer-events: none;
    }
}


/* ============================================================
   CCG OVERLAYS — OMEGA UNIVERSE LAYER (LOCKED)
   Phase U2+ — CINEMATIC COHESION PASS
   ------------------------------------------------------------
   • Desktop: full cinematic fixed universe
   • Home: intentionally immersive (fixed)
   • Mobile (non-Home): universe anchored behind content
   • Prevents “starfield floating above content” illusion
   • Balances CRT / grid / starfield intensity site-wide
   • CSS-only, zero JS or layout impact
============================================================ */


/* ------------------------------------------------------------
   GLOBAL UNIVERSE CONTAINER
------------------------------------------------------------ */

.ccg-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}


/* ------------------------------------------------------------
   STARFIELD — PRIMARY UNIVERSE LAYER
------------------------------------------------------------ */

.ccg-bg-starfield {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("../images/starfield_new.png");
    background-repeat: repeat;
    background-size: 1200px 1200px;

    /* Slightly calmer to match WOW panels & heroes */
    opacity: 0.52;

    animation:
        ccg-star-drift 180s linear infinite,
        ccg-star-breathe 24s ease-in-out infinite;

    will-change: background-position, opacity;
}

/* Secondary depth ghost (parallax illusion) */
.ccg-bg-starfield::after {
    content: "";
    position: absolute;
    inset: -50%;

    background-image: url("../images/starfield_new.png");
    background-repeat: repeat;
    background-size: 1600px 1600px;

    opacity: 0.20;

    animation:
        ccg-star-drift-alt 320s linear infinite,
        ccg-star-breathe-alt 30s ease-in-out infinite;

    pointer-events: none;
}


/* ------------------------------------------------------------
   GRID — SECONDARY DEPTH LAYER
------------------------------------------------------------ */

.ccg-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 1;

    background-image: url("../images/bg-grid_new.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;

    /* Slightly reduced so content glow leads */
    opacity: 0.11;
    mix-blend-mode: screen;

    animation: none;
    will-change: auto;
}


/* ------------------------------------------------------------
   CRT / VIGNETTE — TOP DECORATIVE LAYER
------------------------------------------------------------ */

.ccg-bg-crt-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,0.022) 0%,
            rgba(0,0,0,0.26) 62%,
            rgba(0,0,0,0.56) 100%
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.016),
            rgba(255,255,255,0.016) 1px,
            transparent 1px,
            transparent 3px
        );

    mix-blend-mode: overlay;

    /* Reduced slightly so panels & heroes feel clearer */
    opacity: 0.32;
}

html[data-ccg-page="home"] .ccg-bg-crt-overlay {
    display: none;
}

html:not([data-ccg-page="home"]) .ccg-bg-crt-overlay {
    opacity: 0.08;
    mix-blend-mode: normal;
}

@media (max-width: 768px) {
    .ccg-bg-crt-overlay {
        opacity: 0.06;
        mix-blend-mode: normal;
    }
}


/* ============================================================
   DESKTOP DEPTH CORRECTION (NON-HOME PAGES)
   Phase U3 — CONTENT CLARITY LOCK
============================================================ */

html:not([data-ccg-page="home"]) .ccg-page {
    position: relative;
    z-index: 2;
}

html[data-ccg-page="home"] .ccg-page {
    position: relative;
    z-index: 2;
}

.ccg-main,
.ccg-hero-inner,
.home-hero__content {
    position: relative;
    z-index: 3;
}


/* ============================================================
   MOBILE DEPTH CORRECTION (NON-HOME PAGES ONLY)
============================================================ */

@media (max-width: 768px) {

    /* Anchor universe to document flow on mobile */
    .ccg-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 100svh;
        transform: none;
        contain: paint;
    }

    .ccg-bg-starfield,
    .ccg-bg-grid,
    .ccg-bg-crt-overlay,
    .ccg-bg-starfield::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 100svh;
        transform: none;
        backface-visibility: hidden;
        will-change: auto;
    }

    /* Calm the animated layers on mobile to prevent flicker */
    .ccg-bg-starfield,
    .ccg-bg-grid {
        animation: none;
        will-change: auto;
        background-position: center;
    }

    .ccg-bg-grid {
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
    }

    .ccg-bg-crt-overlay {
        opacity: 0.08;
    }

    /* Further calm overlays on mobile for clarity */
    html:not([data-ccg-page="home"]) .ccg-bg-starfield {
        opacity: 0.46;
    }

    html:not([data-ccg-page="home"]) .ccg-bg-grid {
        opacity: 0.09;
    }

    html:not([data-ccg-page="home"]) .ccg-bg-crt-overlay {
        opacity: 0.08;
    }
}


/* ============================================================
   KEYFRAMES — CINEMATIC DRIFT (UNCHANGED)
============================================================ */

@keyframes ccg-star-drift {
    from { background-position: 0 0; }
    to   { background-position: -1200px 1200px; }
}

@keyframes ccg-star-drift-alt {
    from { background-position: 800px -400px; }
    to   { background-position: -1600px 1200px; }
}

@keyframes ccg-star-breathe {
    0%, 100% { opacity: 0.50; }
    50%      { opacity: 0.56; }
}

@keyframes ccg-star-breathe-alt {
    0%, 100% { opacity: 0.18; }
    50%      { opacity: 0.24; }
}

@keyframes ccg-grid-breathe {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.14; }
}

@keyframes ccg-grid-drift {
    from { background-position: 0 0; }
    to   { background-position: 800px -800px; }
}

/* ============================================================
   PERFORMANCE PAUSE STATE (DESKTOP)
============================================================ */

html[data-ccg-page="home"].ccg-home-perf-paused .ccg-bg-starfield,
html[data-ccg-page="home"].ccg-home-perf-paused .ccg-bg-starfield::after,
html[data-ccg-page="home"].ccg-home-perf-paused .ccg-bg-grid,
html[data-ccg-page="home"].ccg-home-perf-paused .ccg-hero-scanlines,
html[data-ccg-page="home"].ccg-home-perf-paused .ccg-hero__backdrop,
html[data-ccg-page="home"].ccg-home-perf-paused .ccg-hero-overlay-grid,
html[data-ccg-page="home"].ccg-home-perf-paused .ccg-hero-overlay-starfield,
html[data-ccg-page="home"].ccg-home-perf-paused .home-hero__scanlines,
html[data-ccg-page="home"].ccg-home-perf-paused .home-hero__visual-glow {
    animation-play-state: paused !important;
}

html.ccg-perf-paused .ccg-bg-grid,
html.ccg-perf-paused .ccg-bg-crt-overlay {
    mix-blend-mode: normal;
}

html.ccg-perf-paused:not([data-ccg-page="home"]) .ccg-bg-grid {
    opacity: 0.08;
}

html.ccg-perf-paused .ccg-bg-crt-overlay {
    opacity: 0.22;
}

@media (prefers-reduced-motion: reduce) {
    .ccg-bg-starfield,
    .ccg-bg-grid,
    .ccg-bg-starfield::after {
        animation: none !important;
    }

    .ccg-bg-starfield {
        opacity: 0.4;
    }

    .ccg-bg-starfield::after {
        opacity: 0.16;
    }

    .ccg-bg-grid {
        opacity: 0.08;
    }

    .ccg-bg-crt-overlay {
        opacity: 0.2;
    }

    .ccg-hero-scanlines,
    .home-hero__scanlines {
        opacity: 0.15;
    }
}

/* ============================================================
SECRET MODAL — MOBILE SCROLL FIX
Ensures Easter Egg menu is scrollable on small screens
============================================================ */

.ccg-secret-modal__content {
max-height: calc(100dvh - 96px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

/* Lock background scroll while modal is open */
body.ccg-secret-modal-open {
overflow: hidden;
touch-action: none;
}

@media (hover: hover) and (pointer: fine) {
    body.ccg-secret-modal-open {
        overflow-y: auto;
        touch-action: auto;
    }
}

/* Subtle visual cue indicating scrollable content */
.ccg-secret-modal__content::after {
content: "";
position: sticky;
bottom: 0;
display: block;
height: 28px;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(0,0,0,0),
rgba(0,0,0,0.6)
);
}