/* ============================================================
   CCG HERO CSS — OMEGA WOW PASS (W1)
   W5 — GLOBAL QA POLISH (SAFE)
   ------------------------------------------------------------
   Scope:
   • HOME hero elevated to cinematic WOW (UNCHANGED)
   • Inner pages calm, balanced & safer
   • CSS-only (no structure / JS changes)
============================================================ */

/* ------------------------------------------------------------
   HERO CONTAINERS (STRUCTURE LOCKED)
------------------------------------------------------------- */

:root {
    --ccg-hero-offset: clamp(82px, 4vw + 64px, 132px);
}

@media (max-width: 1024px) {
    :root {
        --ccg-hero-offset: clamp(76px, 4vw + 58px, 120px);
    }
}

@media (max-width: 820px) {
    :root {
        --ccg-hero-offset: clamp(68px, 5vw + 52px, 110px);
    }
}

@media (max-width: 540px) {
    :root {
        --ccg-hero-offset: clamp(64px, 6vw + 46px, 98px);
    }
}

.ccg-hero,
.games-hero,
.game-hero,
.ccg-genre-hero {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    min-height: clamp(260px, 32vw, 440px);

    /* W5: radius harmonised with cards / panels */
    border-radius: 20px;

    margin-top: var(--ccg-hero-offset);
    margin-bottom: 24px;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.82),
            rgba(0,0,0,0.48),
            rgba(0,0,0,0.22)
        );

    box-shadow:
        var(--ccg-depth-hero),
        0 0 36px rgba(var(--accent-rgb),0.16);

    isolation: isolate;
}

.ccg-hero-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ccg-hero-image,
.ccg-hero__backdrop,
.game-hero__bg,
.ccg-genre-hero__bg,
.ccg-genre-hero__overlay {
    pointer-events: none;
}

.ccg-hero-inner {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* ------------------------------------------------------------
   IMAGE PLANE — BASELINE (ALL HEROES)
------------------------------------------------------------ */

.ccg-hero__backdrop,
.game-hero__bg,
.ccg-genre-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ============================================================
   HOME HERO — CINEMATIC WOW (LOCKED)
============================================================ */

.ccg-page--home .ccg-hero__backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(1.10);
    object-position: center 46%;
    opacity: 1;
    filter: saturate(1.12) contrast(1.05);

    animation: ccg-home-hero-breathe 30s ease-in-out infinite;

    /* Home keeps GPU hint */
    will-change: transform, opacity;
}

/* ------------------------------------------------------------
   HOME HERO — DEPTH & ENERGY OVERLAY
------------------------------------------------------------ */

.ccg-page--home .ccg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 18% 22%,
            rgba(var(--accent-rgb),0.46),
            transparent 52%
        ),
        radial-gradient(
            ellipse at 82% 78%,
            rgba(var(--accent-rgb),0.30),
            transparent 58%
        ),
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.16),
            rgba(0,0,0,0.55)
        );

    animation: ccg-home-hero-overlay-breathe 26s ease-in-out infinite;
}

/* ------------------------------------------------------------
   HOME HERO — CONTENT LAYER
------------------------------------------------------------ */

.ccg-page--home .ccg-hero__inner {
    position: relative;
    z-index: 2;
    padding: 36px 36px 40px;

    text-shadow:
        0 2px 14px rgba(0,0,0,0.85);
}

/* ------------------------------------------------------------
   HOME HERO — MODE-SPECIFIC BACKDROP
------------------------------------------------------------ */

.home-hero .ccg-hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(1.1) drop-shadow(0 0 14px rgba(0,0,0,0.35));
    opacity: 0.65;
     mix-blend-mode: normal;
}

body[data-ccg-mode="c64"] .home-hero .ccg-hero-image,
body[data-mode="c64"] .home-hero .ccg-hero-image {
    background-image: image-set(
        url("../images/hero/ccg-hero-c64.png") type("image/png")
    );
    transform: scale(1.02);
}

body[data-ccg-mode="amiga"] .home-hero .ccg-hero-image,
body[data-mode="amiga"] .home-hero .ccg-hero-image {
    background-image: image-set(
        url("../images/hero/ccg-hero-amiga.png") type("image/png")
    );
    transform: scale(1.05);
}

/* ============================================================
   INNER PAGES — VISUAL CALM (W5 TUNED)
============================================================ */

.games-hero img,
.game-hero__bg img,
.ccg-genre-hero__img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;

    transform: scale(1.02);
    object-position: center 36%;
    opacity: 0.50;

    animation: ccg-hero-image-breathe-soft 36s ease-in-out infinite;

    /* W5: remove always-on GPU hint for calm pages */
}

.ccg-hero__backdrop img {
    aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------
   INNER PAGE OVERLAY — SUBTLE & BALANCED
------------------------------------------------------------ */

.games-hero::before,
.game-hero::before,
.ccg-genre-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at top left,
            rgba(var(--accent-rgb),0.10), /* W5: slightly calmer */
            transparent 60%
        ),
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.44),
            rgba(0,0,0,0.72)
        );

    animation: ccg-hero-overlay-breathe 30s ease-in-out infinite;
}

/* ------------------------------------------------------------
   CONTENT LAYER (ALL NON-HOME HEROES)
------------------------------------------------------------ */

.games-hero__inner,
.game-hero__inner,
.ccg-genre-hero__inner {
    position: relative;
    z-index: 2;
    padding: 32px 32px 36px;
}

/* ============================================================
   MOBILE — DISCIPLINED CINEMATIC
============================================================ */

@media (max-width: 768px) {

    .ccg-page--home .ccg-hero__backdrop img {
        transform: scale(1.06);
        object-position: center 44%;
        opacity: 0.58;
    }

    .games-hero img,
    .game-hero__bg img,
    .ccg-genre-hero__img {
        transform: scale(1.01);
        object-position: center 40%;
        opacity: 0.48;
    }

    .ccg-page--home .ccg-hero__inner {
        padding: 30px 26px 34px;
    }
}

@media (max-width: 640px) {
    .ccg-hero,
    .games-hero,
    .game-hero,
    .ccg-genre-hero {
        will-change: auto;
    }

    .ccg-page--home .ccg-hero__backdrop img,
    .games-hero img,
    .game-hero__bg img,
    .ccg-genre-hero__img {
        animation: none;
    }

    .ccg-page--home .ccg-hero::before,
    .games-hero::before,
    .game-hero::before,
    .ccg-genre-hero::before {
        animation: none;
    }
}

/* ------------------------------------------------------------
   VERY SMALL PHONES
------------------------------------------------------------ */

@media (max-width: 420px) {

    .ccg-page--home .ccg-hero__backdrop img {
        transform: scale(1.03);
        opacity: 0.54;
    }

    .games-hero img,
    .game-hero__bg img,
    .ccg-genre-hero__img {
        transform: scale(1);
        opacity: 0.45;
    }
}

/* ============================================================
   ANIMATIONS — HOME WOW vs INNER CALM
============================================================ */

@keyframes ccg-home-hero-breathe {
    0%, 100% {
        transform: scale(1.10);
        opacity: 0.60;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.66;
    }
}

@keyframes ccg-hero-image-breathe-soft {
    0%, 100% {
        transform: scale(1.02);
        opacity: 0.48;
    }
    50% {
        transform: scale(1.04);
        opacity: 0.52;
    }
}

@keyframes ccg-home-hero-overlay-breathe {
    0%, 100% { opacity: 0.92; }
    50% { opacity: 1; }
}

@keyframes ccg-hero-overlay-breathe {
    0%, 100% { opacity: 0.88; }
    50% { opacity: 1; }
}