/* ============================================
   BLOODRUST - Page-Specific Styles
   ============================================ */

/* ============================================
   BLOODRUST PAGE - Body & Background
   ============================================ */

.page-bloodrust {
    --bloodrust-glow-core: rgba(240, 122, 62, 0.28);
    --bloodrust-glow-warm: rgba(196, 80, 48, 0.22);
    --bloodrust-glow-dim: rgba(88, 24, 14, 0.18);
    background-image:
        radial-gradient(120% 100% at 50% 12%, rgba(120, 34, 20, 0.16), transparent 52%),
        radial-gradient(90% 90% at 22% 72%, rgba(88, 24, 14, 0.14), transparent 56%),
        linear-gradient(rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.84)),
        url('../../bloodrust/img/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #e0e0e0;
    isolation: isolate;
}

.page-bloodrust #site-header {
    position: relative;
    z-index: 3;
}

.page-bloodrust #main-content,
.page-bloodrust #site-footer {
    position: relative;
    z-index: 1;
}

/* Particle dots overlay */
.page-bloodrust::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 12% 18%, rgba(196, 80, 48, 0.5), transparent),
        radial-gradient(2px 2px at 48% 5%, rgba(180, 60, 40, 0.45), transparent),
        radial-gradient(2.5px 2.5px at 30% 68%, rgba(196, 80, 48, 0.55), transparent),
        radial-gradient(2px 2px at 85% 90%, rgba(160, 50, 30, 0.4), transparent),
        radial-gradient(2px 2px at 72% 30%, rgba(140, 40, 20, 0.35), transparent),
        radial-gradient(2.5px 2.5px at 18% 82%, rgba(196, 80, 48, 0.45), transparent),
        radial-gradient(2px 2px at 90% 25%, rgba(180, 60, 40, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 22% 40%, rgba(140, 40, 20, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 75% 48%, rgba(120, 30, 15, 0.25), transparent),
        radial-gradient(1.5px 1.5px at 58% 58%, rgba(140, 40, 20, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 85% 70%, rgba(120, 30, 15, 0.25), transparent),
        radial-gradient(1.5px 1.5px at 8% 52%, rgba(140, 40, 20, 0.3), transparent),
        radial-gradient(1px 1px at 65% 22%, rgba(100, 20, 10, 0.2), transparent),
        radial-gradient(1px 1px at 90% 8%, rgba(80, 15, 5, 0.15), transparent),
        radial-gradient(1px 1px at 18% 62%, rgba(100, 20, 10, 0.18), transparent),
        radial-gradient(1px 1px at 50% 72%, rgba(80, 15, 5, 0.15), transparent);
    pointer-events: none;
    z-index: -2;
    opacity: 0.9;
    animation: bloodrustMotesDrift 22s linear infinite alternate;
}

/* Ambient glow overlay */
.page-bloodrust::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 70% at 50% 50%, rgba(10, 5, 3, 0.4), transparent),
        radial-gradient(ellipse 100% 60% at 25% 15%, rgba(196, 80, 48, 0.15), transparent),
        radial-gradient(ellipse 80% 50% at 75% 80%, rgba(140, 30, 15, 0.12), transparent),
        radial-gradient(ellipse 50% 30% at 80% 35%, rgba(160, 50, 30, 0.1), transparent),
        radial-gradient(ellipse 40% 25% at 15% 65%, rgba(100, 20, 10, 0.08), transparent);
    pointer-events: none;
    z-index: -1;
    animation: rustDrift 30s ease-in-out infinite alternate;
}

@keyframes bloodrustMotesDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.82;
    }

    100% {
        transform: translate3d(0, -14px, 0) scale(1.02);
        opacity: 1;
    }
}

@keyframes rustDrift {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

/* ============================================
   BLOODRUST - Rising Embers
   ============================================ */

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

.bloodrust-atmosphere::before,
.bloodrust-atmosphere::after {
    content: '';
    position: absolute;
    inset: 0;
}

.bloodrust-atmosphere::before {
    background:
        radial-gradient(circle at 50% 100%, rgba(220, 90, 40, 0.16), transparent 34%),
        radial-gradient(circle at 22% 85%, rgba(150, 46, 26, 0.12), transparent 24%),
        radial-gradient(circle at 78% 88%, rgba(130, 38, 22, 0.12), transparent 22%);
    opacity: 0.9;
    animation: bloodrustGroundGlow 18s ease-in-out infinite alternate;
}

.bloodrust-atmosphere::after {
    background:
        linear-gradient(180deg, rgba(14, 6, 4, 0.02), rgba(14, 6, 4, 0.14) 48%, rgba(4, 2, 2, 0.32));
}

.bloodrust-smoke,
.bloodrust-ash {
    position: absolute;
    inset: 0;
}

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

.bloodrust-smoke-plume {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: var(--size, 360px);
    height: calc(var(--size, 360px) * 0.62);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 42%, rgba(172, 74, 46, 0.2), transparent 28%),
        radial-gradient(circle at 58% 54%, rgba(48, 24, 18, 0.3), transparent 58%),
        radial-gradient(circle at 50% 50%, rgba(20, 12, 10, 0.5), transparent 72%);
    filter: blur(var(--blur, 38px));
    opacity: 0.34;
    transform: translate3d(-50%, -50%, 0);
    animation: bloodrustSmokeDrift var(--dur, 28s) ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
}

.bloodrust-smoke-plume--warm {
    opacity: 0.42;
    background:
        radial-gradient(circle at 32% 42%, rgba(196, 80, 48, 0.24), transparent 28%),
        radial-gradient(circle at 58% 54%, rgba(64, 26, 18, 0.32), transparent 58%),
        radial-gradient(circle at 50% 50%, rgba(18, 10, 8, 0.54), transparent 72%);
}

.bloodrust-smoke-plume--dense {
    opacity: 0.46;
}

.bloodrust-ash-flake {
    position: absolute;
    top: -6%;
    left: var(--x, 50%);
    width: var(--size, 3px);
    height: calc(var(--size, 3px) * 1.9);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(190, 160, 135, 0.9), rgba(94, 70, 56, 0.28));
    box-shadow: 0 0 10px rgba(180, 92, 54, 0.12);
    opacity: 0;
    transform-origin: center;
    animation: bloodrustAshFall var(--dur, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
}

.bloodrust-ash-flake--bright {
    background: linear-gradient(180deg, rgba(238, 189, 145, 0.95), rgba(176, 90, 58, 0.34));
    box-shadow: 0 0 14px rgba(220, 108, 58, 0.18);
}

.bloodrust-ember {
    position: absolute;
    left: var(--x, 50%);
    bottom: -6px;
    width: var(--size, 3px);
    height: var(--size, 3px);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 214, 144, 0.95) 0, rgba(220, 118, 58, 0.86) 34%, rgba(120, 36, 18, 0.16) 72%, transparent 76%);
    box-shadow:
        0 0 10px rgba(220, 94, 44, 0.24),
        0 0 18px rgba(220, 94, 44, 0.14);
    animation:
        bloodrustEmberRise var(--dur, 7s) var(--delay, 0s) linear infinite,
        bloodrustEmberFlicker calc(var(--dur, 7s) * 0.45) var(--delay, 0s) ease-in-out infinite alternate;
}

.bloodrust-ember::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 30%;
    width: 1px;
    height: calc(var(--size, 3px) * 3.6);
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 210, 160, 0.22), transparent 72%);
    opacity: 0.7;
}

.bloodrust-ember--bright {
    box-shadow:
        0 0 12px rgba(242, 122, 62, 0.36),
        0 0 24px rgba(242, 122, 62, 0.2);
}

.bloodrust-ember--large {
    filter: saturate(1.08);
}

.bloodrust-ember--cinder {
    opacity: 0.72;
    box-shadow:
        0 0 6px rgba(196, 80, 48, 0.16),
        0 0 14px rgba(196, 80, 48, 0.08);
}

@keyframes bloodrustEmberRise {
    0% {
        transform: translate3d(0, 0, 0) scale(0.72);
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.42;
    }

    78% {
        opacity: 0.14;
    }

    100% {
        transform: translate3d(var(--sway, 10px), calc(var(--rise, 76vh) * -1), 0) scale(1.18);
        opacity: 0;
    }
}

@keyframes bloodrustEmberFlicker {
    0% {
        filter: brightness(0.9) saturate(0.95);
    }

    100% {
        filter: brightness(1.2) saturate(1.08);
    }
}

@keyframes bloodrustSmokeDrift {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(0.94);
    }

    100% {
        transform: translate3d(calc(-50% + var(--drift-x, 32px)), calc(-50% + var(--drift-y, -28px)), 0) scale(1.1);
    }
}

@keyframes bloodrustAshFall {
    0% {
        transform: translate3d(0, -8vh, 0) rotate(0deg);
        opacity: 0;
    }

    12% {
        opacity: 0.6;
    }

    78% {
        opacity: 0.32;
    }

    100% {
        transform: translate3d(var(--drift, 16px), 110vh, 0) rotate(var(--spin, 180deg));
        opacity: 0;
    }
}

@keyframes bloodrustGroundGlow {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* ============================================
   BLOODRUST PAGE - Theme Overrides
   ============================================ */

/* Transparent sections so background shows through */
.page-bloodrust .game-hero {
    background: transparent;
}

.page-bloodrust .game-details,
.page-bloodrust .game-about,
.page-bloodrust .game-collaborators,
.page-bloodrust .dev-status {
    position: relative;
}

.page-bloodrust .game-details::before,
.page-bloodrust .game-about::before,
.page-bloodrust .game-collaborators::before,
.page-bloodrust .dev-status::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(14, 7, 5, 0.04), rgba(14, 7, 5, 0.12));
    pointer-events: none;
}

/* Strip card boxes - raw content on the dark background */
.page-bloodrust .info-card,
.page-bloodrust .story-panel,
.page-bloodrust .status-item,
.page-bloodrust .collaborator-card {
    background: none;
    border: none;
    border-radius: 0;
}

/* Accent overrides */
.page-bloodrust .info-card h3 {
    color: var(--bloodrust-accent);
}

.page-bloodrust .feature-item i {
    color: var(--bloodrust-accent);
}

.page-bloodrust .story-panel h3 {
    color: var(--bloodrust-accent);
}

.page-bloodrust .story-panel p {
    color: var(--text-secondary);
    opacity: 0.9;
}

.page-bloodrust .status-item.current h3::before {
    color: var(--bloodrust-accent);
}

.page-bloodrust .spec-row {
    border-bottom-color: rgba(196, 80, 48, 0.15);
}

.page-bloodrust .badge-alpha {
    color: var(--bloodrust-accent);
    border-color: var(--bloodrust-accent);
}

.page-bloodrust .badge-released {
    color: var(--bloodrust-accent);
    border-color: var(--bloodrust-accent);
}

.page-bloodrust .game-about {
    border-top-color: rgba(196, 80, 48, 0.2);
}

.page-bloodrust .game-collaborators {
    border-top-color: rgba(196, 80, 48, 0.2);
}

.page-bloodrust .dev-status {
    border-top-color: rgba(196, 80, 48, 0.2);
}

.page-bloodrust .section-header h2 {
    color: var(--bloodrust-accent);
}

.page-bloodrust .bloodrust-lore-block {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 900px) {
    .bloodrust-smoke-plume {
        width: min(var(--size, 360px), 72vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bloodrust-atmosphere,
    .bloodrust-embers,
    .page-bloodrust::after,
    .page-bloodrust::before {
        animation: none !important;
    }

    .bloodrust-smoke-plume,
    .bloodrust-ash-flake,
    .bloodrust-ember {
        animation: none !important;
        opacity: 0.38;
    }
}