/* ============================================================
   CCG-ANIM.CSS — OMEGA INTERACTION POLISH
   Phase P18 — Hover Easing & Motion Luxury
   ------------------------------------------------------------
   • Visual-only animations
   • NO layout influence
   • No transforms that affect flow
   • Global easing upgrade
   ============================================================ */

/* ============================================================
   CORE EASING VARIABLES
============================================================ */

:root {
    --ccg-ease-out-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ccg-ease-out-lux: cubic-bezier(0.16, 1, 0.3, 1);
    --ccg-ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ccg-hover-duration: 240ms;
}

/* ============================================================
   FADE IN
============================================================ */

.ccg-fade-in {
    opacity: 0;
    animation: ccgFadeIn 0.8s var(--ccg-ease-soft) forwards;
}

@keyframes ccgFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   SLIDE UP + FADE
============================================================ */

.ccg-slide-up {
    opacity: 0;
    transform: translateY(20px);
    animation: ccgSlideUp 0.65s var(--ccg-ease-out-smooth) forwards;
}

@keyframes ccgSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   PULSE GLOW (NEON ACCENTS)
============================================================ */

.ccg-pulse {
    animation: ccgPulse 2.2s ease-in-out infinite;
}

@keyframes ccgPulse {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

/* ============================================================
   OMEGA SECTION REVEAL
============================================================ */

.ccg-anim-in {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    animation:
        ccgFadeRise 0.72s var(--ccg-ease-out-lux) forwards,
        ccgGlowPulse 2.4s ease-out forwards;
    animation-delay: var(--ccg-anim-delay, 0s);
    will-change: opacity, transform, filter;
}

@keyframes ccgFadeRise {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
        filter: blur(3px);
    }
    45% {
        opacity: 0.6;
        transform: translateY(10px) scale(0.995);
        filter: blur(1.2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ccgGlowPulse {
    0% {
        text-shadow: none;
        box-shadow: none;
    }
    40% {
        text-shadow:
            0 0 12px rgba(var(--accent-rgb), 0.55),
            0 0 22px rgba(var(--accent-rgb), 0.35);
        box-shadow:
            0 0 14px rgba(var(--accent-rgb), 0.25),
            0 0 26px rgba(var(--accent-rgb), 0.15);
    }
    100% {
        text-shadow:
            0 0 8px rgba(var(--accent-rgb), 0.35),
            0 0 18px rgba(var(--accent-rgb), 0.25);
        box-shadow:
            0 0 10px rgba(var(--accent-rgb), 0.22),
            0 0 22px rgba(var(--accent-rgb), 0.12);
    }
}

/* ============================================================
   UNIVERSAL HOVER POLISH (SAFE TARGETS ONLY)
============================================================ */

.ccg-game-card,
.ccg-panel,
.ccg-btn,
.ccg-nav__link,
.ccg-genre-tile {
    transition-timing-function: var(--ccg-ease-out-lux);
    transition-duration: var(--ccg-hover-duration);
}

/* ============================================================
   MOBILE HARDENING — DISABLE ENTRANCE MOTION
============================================================ */

html.ccg-is-mobile .ccg-fade-in,
html.ccg-is-mobile .ccg-slide-up,
html.ccg-is-mobile .ccg-anim-in,
html.ccg-is-mobile .ccg-pulse {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* ============================================================
   DESKTOP PERFORMANCE SMOOTHING (NON-HERO ONLY)
============================================================ */

@media (min-width: 1024px) {
    html.ccg-perf-desktop .ccg-pulse {
        animation-duration: 3.1s;
        opacity: 0.82;
    }
}

html.ccg-perf-paused .ccg-fade-in,
html.ccg-perf-paused .ccg-slide-up,
html.ccg-perf-paused .ccg-anim-in,
html.ccg-perf-paused .ccg-pulse {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .ccg-fade-in,
    .ccg-slide-up,
    .ccg-anim-in,
    .ccg-pulse {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}