/* ==========================================================================
   Arcade attract-mode layer for the homepage. Loads after styles.css.
   Neon, glitch, beams, embers.
   ========================================================================== */

:root {
    --neon-red: #FF0040;
    --neon-cyan: #00F0FF;
    --neon-yellow: #FFE600;
    --neon-magenta: #FF3CF0;
}

/* --------------------------------------------------------------------------
   Global screen treatment: flicker, vignette, scroll progress
   -------------------------------------------------------------------------- */

.scanlines {
    opacity: 0.42;
    animation: crtFlicker 5.5s steps(60) infinite;
}

@keyframes crtFlicker {
    0%, 96%, 100% { opacity: 0.42; }
    97% { opacity: 0.6; }
    98% { opacity: 0.3; }
    99% { opacity: 0.55; }
}

.crt-vignette {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0, 240, 255, 0.05) 0%, transparent 60%);
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    z-index: 1200;
    background: linear-gradient(90deg, var(--neon-red), var(--neon-magenta), var(--neon-cyan), var(--neon-yellow));
    box-shadow: 0 0 12px rgba(255, 0, 64, 0.8), 0 0 22px rgba(0, 240, 255, 0.5);
    transition: width 0.08s linear;
}

/* Full-screen chromatic hit used by the corruption trigger */
.screen-hit {
    position: fixed;
    inset: 0;
    z-index: 1400;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(90deg, rgba(255, 0, 64, 0.35) 0%, transparent 40%),
        linear-gradient(270deg, rgba(0, 240, 255, 0.35) 0%, transparent 40%);
    mix-blend-mode: screen;
}

.screen-hit.is-active {
    animation: screenHit 0.55s ease-out 1 forwards;
}

@keyframes screenHit {
    0% { opacity: 0; }
    12% { opacity: 1; }
    100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Navigation: neon underline sweep
   -------------------------------------------------------------------------- */

nav {
    border-bottom-color: transparent;
    background-image: linear-gradient(90deg, var(--neon-red), var(--neon-magenta), var(--neon-cyan), var(--neon-red));
    background-size: 300% 3px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    animation: navSweep 6s linear infinite;
}

@keyframes navSweep {
    0% { background-position: 0 100%; }
    100% { background-position: 300% 100%; }
}

.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.15rem;
    height: 2px;
    background: var(--neon-cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
    box-shadow: 0 0 8px var(--neon-cyan);
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Hero: synthwave grid, sweeping beam, corruption pulse, embers, party
   -------------------------------------------------------------------------- */

.hero-corruption {
    position: absolute;
    left: 50%;
    top: 40%;
    width: min(86vw, 1000px);
    height: min(86vw, 1000px);
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(255, 0, 64, 0.5) 0%, rgba(255, 60, 240, 0.2) 34%, transparent 66%);
    z-index: 1;
    pointer-events: none;
    animation: corruptionPulse 3.6s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes corruptionPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.88); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

/* Perspective floor grid */
.hero-grid {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 42%;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(0, 240, 255, 0.35) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(255, 0, 64, 0.3) 0 1px, transparent 1px 48px);
    transform: perspective(420px) rotateX(68deg);
    transform-origin: bottom center;
    mask-image: linear-gradient(0deg, #000 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 85%);
    animation: gridScroll 2.6s linear infinite;
}

@keyframes gridScroll {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, 0 48px; }
}

/* Scanning beam across the hero */
.hero-beam {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.hero-beam::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -30%;
    width: 22%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), rgba(0, 240, 255, 0.22), transparent);
    transform: rotate(14deg);
    animation: beamSweep 5.5s ease-in-out infinite;
}

@keyframes beamSweep {
    0%, 100% { left: -35%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 115%; }
}

.hero-content {
    z-index: 3;
}

.hero-logo {
    width: clamp(420px, 48vw, 740px);
    height: calc(clamp(420px, 48vw, 740px) * 324 / 512);
    object-fit: cover;
    object-position: center;
    margin-bottom: 0.35rem;
    filter: drop-shadow(0 0 16px rgba(255, 0, 64, 0.28));
    animation: logoGlow 6.5s ease-in-out infinite, logoFloat 7s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 0, 64, 0.22)); }
    50% { filter: drop-shadow(0 0 26px rgba(255, 0, 64, 0.38)) drop-shadow(0 0 42px rgba(0, 240, 255, 0.12)); }
}

/* Tagline: neon + chromatic ghosts */
.hero-tagline {
    position: relative;
    color: #fff;
    text-shadow:
        0 0 6px var(--neon-cyan),
        0 0 18px var(--neon-cyan),
        0 0 42px rgba(0, 240, 255, 0.6);
    animation: neonBreathe 2.6s ease-in-out infinite;
}

@keyframes neonBreathe {
    0%, 100% { text-shadow: 0 0 6px var(--neon-cyan), 0 0 18px var(--neon-cyan), 0 0 42px rgba(0, 240, 255, 0.55); }
    50% { text-shadow: 0 0 10px #fff, 0 0 26px var(--neon-cyan), 0 0 70px rgba(0, 240, 255, 0.85); }
}

.hero-tagline::before,
.hero-tagline::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.75;
}

.hero-tagline::before {
    color: var(--neon-red);
    text-shadow: none;
    animation: chromaLeft 2.4s steps(2, end) infinite;
}

.hero-tagline::after {
    color: var(--neon-magenta);
    text-shadow: none;
    animation: chromaRight 2.4s steps(2, end) infinite;
}

@keyframes chromaLeft {
    0%, 92%, 100% { transform: translate(0, 0); opacity: 0; }
    93% { transform: translate(-4px, 1px); opacity: 0.85; }
    96% { transform: translate(3px, -2px); opacity: 0.6; }
}

@keyframes chromaRight {
    0%, 92%, 100% { transform: translate(0, 0); opacity: 0; }
    94% { transform: translate(5px, -1px); opacity: 0.8; }
    97% { transform: translate(-3px, 2px); opacity: 0.5; }
}

.steam-chip {
    border-width: 3px;
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.35), inset 0 0 22px rgba(0, 240, 255, 0.12);
    animation: chipPulse 2.8s ease-in-out infinite;
}

@keyframes chipPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(0, 240, 255, 0.3), inset 0 0 18px rgba(0, 240, 255, 0.1); }
    50% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.6), inset 0 0 28px rgba(0, 240, 255, 0.2); }
}

/* Hero party: the idle sheets are 4-frame strips, so play them as sprites */
.hero-party {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(1rem, 4vw, 3.5rem);
    margin: 2.5rem auto 2.25rem;
    position: relative;
}

.hero-party::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -14px;
    height: 16px;
    background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.45) 0%, transparent 70%);
    filter: blur(2px);
}

.sprite {
    display: block;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(0, 240, 255, 0.4));
}

.sprite-valraven {
    width: 114px;
    height: 120px;
    background-image: url('assets/heroes/valraven-idle.png');
    background-size: 456px 120px;
    animation: sheetValraven 0.6s steps(4) infinite;
}

@keyframes sheetValraven { to { background-position-x: -456px; } }

.sprite-branok {
    width: 106px;
    height: 140px;
    background-image: url('assets/heroes/branok-idle.png');
    background-size: 424px 140px;
    animation: sheetBranok 0.72s steps(4) infinite;
}

@keyframes sheetBranok { to { background-position-x: -424px; } }

.sprite-darkblade {
    width: 82px;
    height: 116px;
    background-image: url('assets/heroes/darkblade-idle.png');
    background-size: 328px 116px;
    animation: sheetDarkblade 0.52s steps(4) infinite;
}

@keyframes sheetDarkblade { to { background-position-x: -328px; } }

.sprite-elowen {
    width: 138px;
    height: 128px;
    background-image: url('assets/heroes/elowen-idle.png');
    background-size: 552px 128px;
    animation: sheetElowen 0.66s steps(4) infinite;
}

@keyframes sheetElowen { to { background-position-x: -552px; } }

/* Ember particle canvases */
.ember-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Buttons: shine sweep + hard neon */
.btn {
    overflow: hidden;
    letter-spacing: 0.04em;
}

.btn::after {
    content: '';
    position: absolute;
    top: -120%;
    left: -60%;
    width: 40%;
    height: 340%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: rotate(18deg);
    transition: left 0.45s ease;
}

.btn:hover::after {
    left: 130%;
}

.btn-primary {
    animation: ctaPulse 1.9s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 0, 64, 0.45), inset 0 -4px 0 var(--red-dark); }
    50% { box-shadow: 0 0 48px rgba(255, 0, 64, 0.95), 0 0 80px rgba(255, 60, 240, 0.35), inset 0 -4px 0 var(--red-dark); }
}

/* --------------------------------------------------------------------------
   Marquee ticker
   -------------------------------------------------------------------------- */

.marquee {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--neon-red);
    border-bottom: 4px solid var(--neon-cyan);
    background: #08080c;
    padding: 0.85rem 0;
    max-width: none;
    width: 100%;
    margin: 0;
}

.marquee-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: marqueeScroll 22s linear infinite;
}

.marquee span {
    font-family: var(--font-pixel);
    -webkit-font-smoothing: none;
    font-size: 1rem;
    letter-spacing: 0.14em;
    color: var(--neon-yellow);
    text-shadow: 0 0 10px rgba(255, 230, 0, 0.55);
    white-space: nowrap;
}

.marquee span em {
    font-style: normal;
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Section titles: animated gradient + glitch clones + flanking bars
   -------------------------------------------------------------------------- */

.section-title {
    position: relative;
    display: block;
    color: transparent;
    background: linear-gradient(90deg, var(--neon-red), var(--neon-yellow), var(--neon-magenta), var(--neon-cyan), var(--neon-red));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: titleGradient 7s linear infinite;
    filter: drop-shadow(0 0 18px rgba(255, 0, 64, 0.45));
}

@keyframes titleGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.section-title::before,
.section-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    opacity: 0;
}

.section-title::before {
    color: var(--neon-cyan);
    animation: titleGlitchA 6s steps(2, end) infinite;
}

.section-title::after {
    color: var(--neon-red);
    animation: titleGlitchB 6s steps(2, end) infinite;
}

@keyframes titleGlitchA {
    0%, 88%, 100% { opacity: 0; transform: none; }
    90% { opacity: 0.85; transform: translate(-5px, 2px); }
    93% { opacity: 0.4; transform: translate(4px, -2px); }
}

@keyframes titleGlitchB {
    0%, 88%, 100% { opacity: 0; transform: none; }
    91% { opacity: 0.8; transform: translate(6px, -2px); }
    94% { opacity: 0.35; transform: translate(-4px, 3px); }
}

/* --------------------------------------------------------------------------
   Cards: rotating neon border, tilt, shine, icon pop
   -------------------------------------------------------------------------- */

.feature-card,
.hero-card,
.npc-card,
.biome-card,
.roadmap-card,
.foe-card,
.power-card {
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    transform-style: preserve-3d;
}

.feature-card::before,
.hero-card::before,
.biome-card::before,
.roadmap-card::before,
.foe-card::before,
.npc-card::before,
.power-card::before {
    content: '';
    position: absolute;
    inset: -4px;
    z-index: 4;
    pointer-events: none;
    padding: 4px;
    background: conic-gradient(from 0deg, var(--neon-red), var(--neon-yellow), var(--neon-cyan), var(--neon-magenta), var(--neon-red));
    /* Keep only the outer ring: punch the content box out of the gradient */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s ease;
    animation: borderSpin 3.5s linear infinite;
}

.feature-card:hover::before,
.hero-card:hover::before,
.biome-card:hover::before,
.roadmap-card:hover::before,
.foe-card:hover::before,
.npc-card:hover::before,
.power-card:hover::before {
    opacity: 1;
}

@keyframes borderSpin {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.feature-card:hover,
.biome-card:hover,
.roadmap-card:hover,
.foe-card:hover,
.power-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 34px rgba(255, 230, 0, 0.25);
    border-color: transparent;
}

.hero-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65), 0 0 40px rgba(0, 240, 255, 0.3);
}

.npc-card:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 230, 0, 0.35);
    border-color: transparent;
}

/* Shine sweep across cards */
.feature-card::after,
.biome-card::after,
.roadmap-card::after,
.foe-card::after,
.power-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 3;
}

.feature-card:hover::after,
.biome-card:hover::after,
.roadmap-card:hover::after,
.foe-card:hover::after,
.power-card:hover::after {
    left: 130%;
}

.feature-icon {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 0 0 rgba(255, 230, 0, 0);
}

.feature-card:hover .feature-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 0 26px rgba(255, 230, 0, 0.6);
}

.feature-card h3,
.hero-card h3,
.npc-card h4,
.power-card h3 {
    text-shadow: 0 0 12px rgba(255, 230, 0, 0.45);
}

.power-card:hover .power-icons img {
    box-shadow: 0 0 16px rgba(255, 230, 0, 0.55);
}

.award img {
    filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.28));
    animation: awardGlow 3.8s ease-in-out infinite;
}

.award a:hover img {
    filter: drop-shadow(0 0 28px rgba(255, 230, 0, 0.7));
}

@keyframes awardGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.22)); }
    50% { filter: drop-shadow(0 0 22px rgba(255, 230, 0, 0.45)); }
}

/* Hero card visual: inner scanline + spotlight */
.hero-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 240, 255, 0.22) 48%, transparent 100%);
    height: 26%;
    animation: cardScan 4.5s linear infinite;
}

@keyframes cardScan {
    0% { transform: translateY(-30%); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(400%); opacity: 0; }
}

.hero-face,
.npc-face {
    animation: faceBob 3.2s ease-in-out infinite;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hero-card:hover .hero-face,
.npc-card:hover .npc-face {
    box-shadow: 0 0 22px rgba(255, 230, 0, 0.8), 3px 3px 0 var(--red);
}

.npc-card:nth-child(2) .npc-face { animation-delay: 0.28s; }
.npc-card:nth-child(3) .npc-face { animation-delay: 0.56s; }
.npc-card:nth-child(4) .npc-face { animation-delay: 0.84s; }
.npc-card:nth-child(5) .npc-face { animation-delay: 1.12s; }
.npc-card:nth-child(6) .npc-face { animation-delay: 1.4s; }
.npc-card:nth-child(7) .npc-face { animation-delay: 1.68s; }

@keyframes faceBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Status chips glow */
.status {
    position: relative;
    animation: statusGlow 2.4s ease-in-out infinite;
}

@keyframes statusGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.22); }
}

/* --------------------------------------------------------------------------
   Kickstarter: animated stripes + wobble
   -------------------------------------------------------------------------- */

.kickstarter {
    animation: stripeSlide 1.8s linear infinite;
    background-size: 32px 100%;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35);
}

@keyframes stripeSlide {
    0% { background-position: 0 0; }
    100% { background-position: 32px 0; }
}

.ks-kicker {
    animation: pressBlink 1.4s steps(2, start) infinite;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.kickstarter h2 {
    animation: ksWobble 4s ease-in-out infinite;
}

@keyframes ksWobble {
    0%, 100% { transform: rotate(-0.6deg) scale(1); }
    50% { transform: rotate(0.6deg) scale(1.015); }
}

.ks-perks li {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ks-perks li:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35), 0 0 26px rgba(255, 0, 64, 0.35);
}

/* --------------------------------------------------------------------------
   Gallery: CRT cabinet with glare, hover RGB split
   -------------------------------------------------------------------------- */

#gallery .bleed-inner {
    position: relative;
    border: 8px solid var(--neon-yellow);
    border-radius: 18px;
    background: rgba(8, 8, 12, 0.72);
    padding: 2.75rem 2rem 2.5rem;
    box-shadow:
        0 0 0 6px #111,
        0 0 60px rgba(255, 230, 0, 0.28),
        inset 0 0 90px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

/* Glass glare across the cabinet */
#gallery .bleed-inner::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -40%;
    width: 45%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    transform: rotate(18deg);
    pointer-events: none;
    animation: cabinetGlare 7s ease-in-out infinite;
}

@keyframes cabinetGlare {
    0%, 100% { left: -45%; }
    50% { left: 120%; }
}

.insert-coin {
    font-family: var(--font-pixel);
    -webkit-font-smoothing: none;
    text-align: center;
    color: var(--neon-yellow);
    font-size: 1.05rem;
    letter-spacing: 0.26em;
    margin: -1.5rem 0 2rem;
    text-shadow: 0 0 14px rgba(255, 230, 0, 0.85);
    animation: pressBlink 0.9s steps(2, start) infinite;
}

.gallery-item {
    border-width: 4px;
    border-radius: 6px;
}

.gallery-item img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.07);
    filter: saturate(1.3) contrast(1.1);
}

.gallery-item:hover {
    box-shadow: 0 0 34px rgba(255, 230, 0, 0.6), 0 0 70px rgba(255, 0, 64, 0.3);
    transform: translateY(-4px);
}

.gallery-overlay {
    background: rgba(13, 13, 13, 0.72);
    backdrop-filter: blur(1px);
}

.gallery-overlay p {
    font-size: 1rem;
    color: var(--neon-yellow);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-shadow: 0 0 14px rgba(255, 230, 0, 0.9);
    animation: pressBlink 0.8s steps(2, start) infinite;
}

/* --------------------------------------------------------------------------
   Corruption sweep
   -------------------------------------------------------------------------- */

.corruption-sweep {
    position: fixed;
    left: 0;
    right: 0;
    top: -36vh;
    height: 36vh;
    z-index: 1300;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 60, 240, 0.25) 40%,
        rgba(255, 0, 64, 0.65) 50%,
        rgba(0, 240, 255, 0.25) 60%,
        transparent 100%);
    mix-blend-mode: screen;
}

.corruption-sweep.is-active {
    animation: corruptionSweep 1s linear 1 forwards;
}

@keyframes corruptionSweep {
    0% { opacity: 0; transform: translateY(0); }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { opacity: 0; transform: translateY(160vh); }
}

/* --------------------------------------------------------------------------
   Discord: aurora blobs + pulsing ring
   -------------------------------------------------------------------------- */

.discord {
    position: relative;
    overflow: hidden;
}

.discord::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/steam/ss-11.jpg') center 30% / cover no-repeat;
    opacity: 0.16;
    z-index: 0;
    pointer-events: none;
}

.discord::after {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(88, 101, 242, 0.45) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(0, 240, 255, 0.3) 0%, transparent 45%),
        radial-gradient(circle at 60% 20%, rgba(255, 60, 240, 0.25) 0%, transparent 45%);
    animation: auroraDrift 14s ease-in-out infinite alternate;
    filter: blur(20px);
}

@keyframes auroraDrift {
    0% { transform: translate(-4%, -3%) scale(1); }
    100% { transform: translate(5%, 4%) scale(1.12); }
}

.discord .bleed-inner {
    position: relative;
    z-index: 1;
}

.discord-live {
    box-shadow: 0 0 12px var(--neon-cyan), 0 0 28px rgba(0, 240, 255, 0.7);
}

.btn-discord {
    animation: discordPulse 2.2s ease-in-out infinite;
}

@keyframes discordPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(88, 101, 242, 0.5); }
    50% { box-shadow: 0 0 44px rgba(88, 101, 242, 1), 0 0 80px rgba(0, 240, 255, 0.35); }
}

.discord-signals li {
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.discord-signals li:hover {
    transform: translateY(-4px);
    color: var(--neon-cyan);
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.4);
}

/* --------------------------------------------------------------------------
   Final call to action
   -------------------------------------------------------------------------- */

.final-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    padding: 6rem 2rem;
    border-top: 6px solid var(--neon-red);
    border-bottom: 6px solid var(--neon-cyan);
}

.final-cta-bg {
    position: absolute;
    inset: 0;
    background: url('assets/key-art.png') center 28% / cover no-repeat;
    z-index: 0;
    animation: slowZoom 18s ease-in-out infinite alternate;
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}

.final-cta-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 13, 0.85) 0%, rgba(13, 13, 13, 0.62) 50%, rgba(13, 13, 13, 0.92) 100%);
    z-index: 1;
    pointer-events: none;
}

.final-cta .bleed-inner {
    position: relative;
    z-index: 3;
}

.final-cta h2 {
    font-family: var(--font-pixel);
    -webkit-font-smoothing: none;
    font-size: clamp(1.85rem, 5.5vw, 3.4rem);
    line-height: 1.35;
    margin-bottom: 1.75rem;
    color: transparent;
    background: linear-gradient(90deg, var(--neon-yellow), var(--neon-red), var(--neon-magenta), var(--neon-cyan), var(--neon-yellow));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: titleGradient 5s linear infinite;
    filter: drop-shadow(0 0 22px rgba(255, 0, 64, 0.6));
}

.final-cta-runners {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(1.25rem, 4vw, 3rem);
    margin: 0 auto 1.75rem;
}

.sprite-garrett-run {
    width: 80px;
    height: 126px;
    background-image: url('assets/npcs/garrett-run.png');
    background-size: 320px 126px;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 230, 0, 0.28));
    animation: sheetGarrett 0.48s steps(4) infinite;
}

@keyframes sheetGarrett {
    to { background-position-x: -320px; }
}

.final-cta p {
    color: #fff;
    font-size: 1.15rem;
    max-width: 560px;
    margin: 0 auto 1.25rem;
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .scanlines,
    .hero-corruption,
    .hero-grid,
    .hero-beam::before,
    .hero-logo,
    .hero-tagline,
    .hero-tagline::before,
    .hero-tagline::after,
    .sprite,
    .steam-chip,
    .btn-primary,
    .btn-discord,
    .marquee-track,
    .section-title,
    .section-title::before,
    .section-title::after,
    .kickstarter,
    .kickstarter h2,
    .ks-kicker,
    .hero-visual::before,
    .hero-face,
    .npc-face,
    .status,
    .insert-coin,
    .gallery-overlay p,
    #gallery .bleed-inner::after,
    .discord::after,
    .final-cta-bg,
    .final-cta h2,
    .sprite-garrett-run,
    .award img,
    .nav {
        animation: none !important;
    }
    .corruption-sweep,
    .screen-hit,
    .ember-canvas {
        display: none;
    }
    .section-title,
    .final-cta h2 {
        color: var(--red);
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
    }
    .final-cta h2 { color: var(--yellow); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    #gallery .bleed-inner {
        padding: 1.75rem 1rem;
        border-width: 5px;
    }
    .marquee span { font-size: 0.8rem; }
    .hero-grid { height: 30%; }
}