/* ============================================================
   FONT
============================================================ */
@font-face {
    font-family: 'ldslender';
    src: url('ldslender.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   BASE
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'ldslender', 'Arial', sans-serif;
    background: #000;
    color: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.svg-filters {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -9999px;
    top: -9999px;
    overflow: hidden;
    pointer-events: none;
}

/* ============================================================
   KEYFRAMES
============================================================ */
@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.9);
    }
    20%, 22%, 24%, 55% {
        opacity: 0.7;
        text-shadow: 0 0 8px rgba(255, 0, 0, 0.15), 0 0 20px rgba(0, 0, 0, 0.9);
    }
}

@keyframes redPulse {
    0%, 100% { text-shadow: 0 0 15px rgba(212, 0, 0, 0.9), 0 0 30px rgba(212, 0, 0, 0.5); }
    50%      { text-shadow: 0 0 25px rgba(212, 0, 0, 1), 0 0 60px rgba(212, 0, 0, 0.8), 0 0 80px rgba(212, 0, 0, 0.4); }
}

@keyframes fogBreatheTop { 0%, 100% { opacity: 1; } 50% { opacity: 0.92; } }
@keyframes fogBreatheBottom { 0%, 100% { opacity: 1; } 50% { opacity: 0.92; } }
@keyframes fogDriftTop { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-2%,0,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes fogDriftBottom { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(2%,0,0); } 100% { transform: translate3d(0,0,0); } }

@keyframes glitch {
    0%, 90%, 100% { transform: translate3d(0, 0, 0); }
    92% { transform: translate3d(-3px, 1px, 0); }
    94% { transform: translate3d(3px, -1px, 0); }
    96% { transform: translate3d(-2px, 0, 0); }
    98% { transform: translate3d(2px, 1px, 0); }
}

@keyframes btnPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.25); }
    50%      { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 35px rgba(212, 0, 0, 0.35); }
}

@keyframes cardFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 22%, 24%, 55% { opacity: 0.4; }
}

/* ============================================================
   ПОЯВЛЕНИЕ КАРТОЧКИ — играет ОДИН РАЗ
============================================================ */
@keyframes monsterGlitchIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 60px, 0);
        filter: blur(8px) brightness(0.5);
    }
    15% {
        opacity: 0.9;
        transform: translate3d(-6px, 55px, 0);
        filter: blur(3px) brightness(2);
    }
    22% {
        opacity: 0.2;
        transform: translate3d(5px, 50px, 0);
        filter: blur(0) brightness(0.6);
    }
    30% {
        opacity: 1;
        transform: translate3d(-3px, 42px, 0);
        filter: blur(0) brightness(1.6);
    }
    38% {
        opacity: 0.4;
        transform: translate3d(4px, 35px, 0);
        filter: blur(0) brightness(0.8);
    }
    48% {
        opacity: 1;
        transform: translate3d(-1px, 22px, 0);
        filter: blur(0) brightness(1.2);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 10px, 0);
        filter: blur(0) brightness(1);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0) brightness(1);
    }
}

@keyframes monsterFlash {
    0%   { opacity: 0; }
    10%  { opacity: 0.9; }
    30%  { opacity: 0; }
    45%  { opacity: 0.5; }
    60%  { opacity: 0; }
    100% { opacity: 0; }
}

/* ============================================================
   ГЛИТЧ ПРИ HOVER — filter + физическое дрожание карточки.
   Большую часть цикла стоит в hover-базовой позиции
   translate3d(0, -10px, 0) scale(1.02), чтобы при снятии
   анимации рывок был незаметен — transition плавно
   вернёт карточку из hover в базу.
============================================================ */
@keyframes monsterHoverGlitch {
    0%, 4%, 12%, 45%, 50%, 100% {
        transform: translate3d(0, -10px, 0) scale(1.02);
        filter: hue-rotate(-10deg) contrast(1.25) saturate(1.3) brightness(1.05);
    }

    /* Первый рывок — короткий, резкий */
    5% {
        transform: translate3d(-5px, -10px, 0) scale(1.025);
        filter: hue-rotate(-30deg) contrast(1.5) saturate(2) brightness(1.2);
    }
    6% {
        transform: translate3d(4px, -9px, 0) scale(1.018);
        filter: hue-rotate(20deg) contrast(1.35) saturate(1.7) brightness(1.15);
    }
    7% {
        transform: translate3d(-3px, -11px, 0) scale(1.022);
        filter: hue-rotate(-18deg) contrast(1.4) saturate(1.5);
    }
    8% {
        transform: translate3d(2px, -10px, 0) scale(1.02);
        filter: hue-rotate(-14deg) contrast(1.3) saturate(1.4);
    }
    9%, 11% {
        transform: translate3d(0, -10px, 0) scale(1.02);
        filter: hue-rotate(-10deg) contrast(1.25) saturate(1.3) brightness(1.05);
    }

    /* Пауза 12–45% — база */

    /* Второй рывок — сильнее */
    46% {
        transform: translate3d(-6px, -10px, 0) scale(1.028);
        filter: hue-rotate(-35deg) contrast(1.55) saturate(2.2) brightness(1.25);
    }
    47% {
        transform: translate3d(5px, -11px, 0) scale(1.018);
        filter: hue-rotate(25deg) contrast(1.4) saturate(1.8) brightness(1.15);
    }
    48% {
        transform: translate3d(-3px, -9px, 0) scale(1.024);
        filter: hue-rotate(-14deg) contrast(1.4) saturate(1.5);
    }
    49% {
        transform: translate3d(2px, -10px, 0) scale(1.02);
        filter: hue-rotate(4deg) saturate(1.3);
    }
    51%, 100% {
        transform: translate3d(0, -10px, 0) scale(1.02);
        filter: hue-rotate(-10deg) contrast(1.25) saturate(1.3) brightness(1.05);
    }
}

@keyframes titleGlitch {
    0%, 4%, 12%, 45%, 50%, 100% {
        text-shadow: 0 0 20px rgba(212,0,0,1), 0 0 45px rgba(212,0,0,0.7), 0 0 80px rgba(212,0,0,0.4);
    }
    5%, 46% {
        text-shadow: 0 0 30px rgba(255,50,50,1), 0 0 60px rgba(255,0,0,0.9), 0 0 100px rgba(255,0,0,0.5);
    }
    6%, 47% {
        text-shadow: 0 0 15px rgba(212,0,0,0.7), 0 0 30px rgba(212,0,0,0.4);
    }
    7%, 48% {
        text-shadow: 0 0 25px rgba(255,0,0,1), 0 0 55px rgba(255,0,0,0.8), 0 0 90px rgba(255,0,0,0.5);
    }
}

/* ============================================================
   HERO
============================================================ */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.parallax-layer {
    position: absolute;
    inset: -60px;
    z-index: 1;
    will-change: transform;
}

.bg-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    object-fit: cover;
    pointer-events: none;
}

.overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 2;
    pointer-events: none;
}

.paint-frame {
    position: absolute;
    left: -3%;
    width: 106%;
    height: 180px;
    z-index: 10;
    pointer-events: none;
    will-change: transform, opacity;
}

.paint-frame.top {
    top: 0;
    transform-origin: center;
    filter: drop-shadow(0 12px 14px rgba(0,0,0,0.9)) drop-shadow(0 4px 6px rgba(0,0,0,0.7));
    animation: fogDriftTop 40s ease-in-out infinite, fogBreatheTop 14s ease-in-out infinite;
}

.paint-frame.bottom {
    bottom: -2px;
    transform-origin: center;
    filter: drop-shadow(0 -12px 14px rgba(0,0,0,0.9)) drop-shadow(0 -4px 6px rgba(0,0,0,0.7));
    animation: fogDriftBottom 48s ease-in-out infinite, fogBreatheBottom 16s ease-in-out infinite;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 20px;
    display: grid;
    grid-template-rows: auto 0fr;
    justify-items: center;
    transition: grid-template-rows 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

body.loaded .hero-content { grid-template-rows: auto 1fr; }

.hero-title {
    font-size: clamp(2.5rem, 8vw, 6rem);
    letter-spacing: 3px;
    user-select: none;
    animation: flicker 6s infinite, glitch 8s infinite;
    margin-bottom: 0;
    transition: margin-bottom 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

body.loaded .hero-title { margin-bottom: 70px; }

.hero-title .white { color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.2), 0 0 40px rgba(0,0,0,0.9); }
.hero-title .red { color: #d40000; animation: redPulse 3s ease-in-out infinite; }

.download-btn-wrap {
    min-height: 0;
    overflow: visible;
    opacity: 0;
    display: flex;
    justify-content: center;
    padding: 20px 30px;
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.loaded .download-btn-wrap { opacity: 1; }

.download-btn {
    font-family: inherit;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    padding: 20px 75px;
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    isolation: isolate;
    z-index: 1;
    will-change: transform;
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: btnPulse 3.5s ease-in-out infinite;
}

.download-btn::before {
    content: '';
    position: absolute;
    inset: -12px -16px;
    background: transparent;
    border: 3px solid #fff;
    filter: url(#roughLineFilter);
    transition: background 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.download-btn:hover::before {
    background: #d40000;
    border-color: #d40000;
    box-shadow: 0 0 30px rgba(212,0,0,0.6), 0 0 60px rgba(212,0,0,0.3);
}

.download-btn:hover {
    color: #000;
    transform: scale(1.05);
    animation: none;
}

.download-btn:hover::before {
    background: #d40000;
    border-color: #d40000;
    box-shadow: 0 0 30px rgba(212,0,0,0.6), 0 0 60px rgba(212,0,0,0.3);
}

.download-btn:active { transform: scale(0.97); }

/* ============================================================
   ABOUT SECTION
============================================================ */
.about-section { background: #000; padding: 140px 25px; position: relative; }
.about-container { max-width: 1300px; margin: 0 auto; }
.about-intro { text-align: center; margin-bottom: 130px; }

.about-heading {
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 40px;
    animation: flicker 8s infinite;
}

.about-heading .white { color: #fff; text-shadow: 0 0 15px rgba(255,255,255,0.3); }
.about-heading .red { color: #d40000; animation: redPulse 3s ease-in-out infinite; }

.about-lead {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    color: #eaeaea;
    max-width: 1050px;
    margin: 0 auto 45px;
    line-height: 1.55;
    letter-spacing: 1.2px;
}

.about-text {
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    color: #b0b0b0;
    max-width: 1100px;
    margin: 0 auto;
    line-height: 1.85;
    letter-spacing: 0.9px;
}

.about-block { margin-bottom: 140px; }

.block-title {
    font-size: clamp(2.6rem, 5vw, 4rem);
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 25px;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 15px rgba(212,0,0,0.6);
    animation: flicker 10s infinite;
}

.block-subtitle {
    text-align: center;
    color: #a0a0a0;
    margin-bottom: 70px;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    letter-spacing: 1.1px;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

/* ============================================================
   MODE GRID
============================================================ */
.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 40px;
}

.mode-card {
    background: #0a0a0a;
    border: 1px solid #222;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    will-change: transform;
    transition: border-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mode-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: #d40000;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mode-card:hover {
    border-color: #d40000;
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 10px 35px rgba(212,0,0,0.25);
}

.mode-card:hover::before { transform: scaleY(1); }

.mode-card h4 {
    font-size: clamp(1.7rem, 2.4vw, 2.1rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #fff;
    transition: color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                text-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mode-card:hover h4 { color: #d40000; text-shadow: 0 0 15px rgba(212,0,0,0.8); }

.mode-card p {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    color: #b8b8b8;
    line-height: 1.85;
    letter-spacing: 0.6px;
}

/* ============================================================
   MONSTER GRID
   - Появление: monsterGlitchIn (один раз), затем .intro-done
   - Hover: monsterHoverGlitch (только filter)
   - Уход: плавный через transition
============================================================ */
.monster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
}

.monster-card {
    background: #0a0a0a;
    border: 1px solid #222;
    padding: 45px 35px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 380px;

    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;

    will-change: opacity, transform, filter, border-color, background, box-shadow;

    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 1s ease-out,
        background 1s ease-out,
        box-shadow 1s ease-out;
}

/* === APPEAR: играет только когда карточка .visible и НЕ .intro-done ===
   Как только JS добавит .intro-done — это правило перестаёт совпадать,
   и animation снимается БЕЗ перезапуска. */
.monster-card.visible:not(.intro-done) {
    opacity: 1;
    animation: monsterGlitchIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* === ФИНАЛЬНОЕ СОСТОЯНИЕ после появления (JS ставит .intro-done) === */
.monster-card.intro-done {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
}

.monster-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
                rgba(212, 0, 0, 0.9) 0%,
                rgba(212, 0, 0, 0.3) 40%,
                transparent 80%);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.monster-card.visible::after {
    animation: monsterFlash 1.1s ease-out;
}

.monster-portrait {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.monster-portrait img {
    position: absolute;
    bottom: -10px;
    left: 50%;
    max-width: 85%;
    max-height: 95%;
    object-fit: contain;
    object-position: bottom center;
    transform: translate3d(-50%, 0, 0);
    transform-origin: bottom center;
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.monster-portrait .portrait-normal {
    opacity: 0.06;
    filter: grayscale(100%) brightness(0.6) contrast(1.1);
    transform: translate3d(-50%, 0, 0) scale(1);
}

.monster-portrait .portrait-infected {
    opacity: 0;
    filter: grayscale(20%) brightness(1) contrast(1.3) hue-rotate(-8deg) drop-shadow(0 0 12px rgba(180,0,0,0.5));
    transform: translate3d(-50%, 0, 0) scale(0.95);
}

.monster-card:hover .portrait-normal { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.95); }
.monster-card:hover .portrait-infected { opacity: 0.4; transform: translate3d(-50%, 0, 0) scale(1.05); }

.monster-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(212,0,0,0.28) 0%, rgba(212,0,0,0.08) 40%, transparent 75%);
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}

.monster-card:hover::before {
    opacity: 1;
    animation: cardFlicker 1.8s ease-in-out infinite;
}

/* === HOVER — только когда .intro-done (появление завершено) ===
   Специфичность 0,3,0 — гарантированно перебивает .monster-card.intro-done.
   При уходе курсора правило исчезает → возврат через transition (плавно). */
.monster-card.intro-done:hover {
    border-color: #d40000;
    background: #0d0505;
    box-shadow: 0 20px 50px rgba(212,0,0,0.4),
                0 0 40px rgba(212,0,0,0.2),
                inset 0 0 30px rgba(212,0,0,0.08);
    transform: translate3d(0, -10px, 0) scale(1.02);
    filter: hue-rotate(-10deg) contrast(1.25) saturate(1.3) brightness(1.05);
    animation: monsterHoverGlitch 2.6s steps(1, end) infinite;
}

.monster-content { position: relative; z-index: 3; }

.monster-card h4 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #d40000;
    animation: redPulse 4s ease-in-out infinite;
    transform: translate3d(0, 0, 0);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                text-shadow 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.monster-card.intro-done:hover h4 {
    transform: translate3d(4px, 0, 0);
    text-shadow: 0 0 20px rgba(212,0,0,1),
                 0 0 45px rgba(212,0,0,0.7),
                 0 0 80px rgba(212,0,0,0.4);
    animation: redPulse 4s ease-in-out infinite,
               titleGlitch 2.6s steps(1, end) infinite;
}

.monster-card p {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    color: #b8b8b8;
    line-height: 1.85;
    letter-spacing: 0.6px;
    transform: translate3d(0, 0, 0);
    transition: color 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.monster-card.intro-done:hover p { color: #eaeaea; transform: translate3d(4px, 0, 0); }

/* ============================================================
   SYSTEM REQUIREMENTS
============================================================ */
.sysreq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.sysreq-card {
    background: #0a0a0a;
    border: 1px solid #222;
    padding: 45px 40px;
    position: relative;
    overflow: hidden;
    will-change: transform;
    transition: border-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sysreq-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, transparent 0%, #d40000 50%, transparent 100%);
    opacity: 0.4;
    transition: opacity 0.5s ease;
}

.sysreq-card:hover {
    border-color: #d40000;
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 15px 40px rgba(212,0,0,0.25);
}

.sysreq-card:hover::before { opacity: 1; }

.sysreq-card h4 {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 30px;
    color: #d40000;
    text-shadow: 0 0 15px rgba(212,0,0,0.7);
    text-align: center;
}

.sysreq-card ul { list-style: none; padding: 0; margin: 0; }

.sysreq-card li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #1a1a1a;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: #c8c8c8;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

.sysreq-card li:last-child { border-bottom: none; }

.sysreq-card li span {
    color: #d40000;
    font-size: 0.95rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(212,0,0,0.4);
}

/* ============================================================
   CHANGELOG
============================================================ */
.changelog-list {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding-left: 40px;
}

.changelog-list::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(to bottom,
                transparent 0%,
                #d40000 15%,
                #d40000 85%,
                transparent 100%);
    opacity: 0.6;
}

.changelog-item {
    position: relative;
    padding: 30px 35px;
    background: #0a0a0a;
    border: 1px solid #1f1f1f;
    margin-bottom: 30px;
    transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.changelog-item::before {
    content: '';
    position: absolute;
    left: -34px;
    top: 42px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0a0a0a;
    border: 2px solid #d40000;
    box-shadow: 0 0 12px rgba(212, 0, 0, 0.6);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s ease;
}

.changelog-item:hover {
    border-color: #d40000;
    transform: translateX(6px);
    background: #0d0505;
    box-shadow: 0 10px 35px rgba(212, 0, 0, 0.25);
}

.changelog-item:hover::before {
    transform: scale(1.4);
    box-shadow: 0 0 20px rgba(212, 0, 0, 1),
                0 0 40px rgba(212, 0, 0, 0.5);
}

.changelog-head {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.changelog-version {
    font-size: 1.6rem;
    letter-spacing: 3px;
    color: #d40000;
    text-shadow: 0 0 10px rgba(212, 0, 0, 0.7);
}

.changelog-date {
    font-size: 1rem;
    color: #777;
    letter-spacing: 1.5px;
}

.changelog-tag {
    font-size: 0.75rem;
    padding: 4px 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid #333;
    color: #999;
}

.changelog-tag.new {
    border-color: #d40000;
    color: #ff4444;
    text-shadow: 0 0 8px rgba(212, 0, 0, 0.8);
    box-shadow: 0 0 12px rgba(212, 0, 0, 0.4);
    animation: redPulse 3s ease-in-out infinite;
}

.changelog-item h4 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
}

.changelog-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.changelog-item li {
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    color: #b0b0b0;
    line-height: 1.7;
    letter-spacing: 0.4px;
}

.changelog-item li::before {
    content: '▸';
    position: absolute;
    left: 0;
    top: 8px;
    color: #d40000;
    font-size: 1.1rem;
}

/* ============================================================
   DOWNLOAD SECTION
============================================================ */
.download-section {
    background: #000;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
    position: relative;
    border-top: 1px solid #1a1a1a;
}

.download-section h2 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    color: #fff;
    margin-bottom: 25px;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(212,0,0,0.7);
    animation: flicker 8s infinite;
    text-align: center;
}

.download-section .subtitle {
    color: #999;
    margin-bottom: 70px;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    letter-spacing: 2px;
    text-align: center;
}

.platforms {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.platform-btn {
    font-family: inherit;
    font-size: 1.5rem;
    padding: 30px 70px;
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    letter-spacing: 2px;
    text-transform: uppercase;
    min-width: 260px;
    text-decoration: none;
    text-align: center;
    position: relative;
    isolation: isolate;
    z-index: 1;
    will-change: transform;
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.platform-btn::before {
    content: '';
    position: absolute;
    inset: -14px -18px;
    background: #141414;
    filter: url(#roughFilterB);
    transition: background 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.platform-btn:hover {
    color: #000;
    transform: translate3d(0, -6px, 0);
}

.platform-btn:hover::before {
    background: #d40000;
    box-shadow: 0 0 30px rgba(212,0,0,0.7), 0 0 60px rgba(212,0,0,0.35);
}

.platform-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.platform-btn small {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-top: 8px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.platform-btn:hover small { color: #111; }

/* ============================================================
   FOOTER
============================================================ */
.footer {
    background: #050505;
    padding: 70px 25px 40px;
    border-top: 1px solid #1a1a1a;
    position: relative;
}

.footer-content { max-width: 1300px; margin: 0 auto; text-align: center; }

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 50px;
    padding: 20px;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 50px;
    background: transparent;
    border: none;
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-size: 1.2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    isolation: isolate;
    z-index: 1;
    will-change: transform;
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.social-btn::before {
    content: '';
    position: absolute;
    inset: -12px -16px;
    background: #141414;
    filter: url(#roughFilterC);
    transition: background 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.social-btn .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.social-btn .social-label { position: relative; z-index: 2; }

.social-btn.discord:hover {
    color: #fff;
    transform: translate3d(0, -5px, 0);
}

.social-btn.discord:hover::before {
    background: #5865F2;
    box-shadow: 0 0 30px rgba(88,101,242,0.7), 0 0 60px rgba(88,101,242,0.35);
}

.social-btn.discord:hover .social-icon { transform: scale(1.2) rotate(-8deg); }

.footer-copy {
    color: #555;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    line-height: 1.9;
    max-width: 700px;
    margin: 0 auto;
}

/* ============================================================
   REVEAL — ИСКЛЮЧАЕМ .monster-card, чтобы не конфликтовало
============================================================ */
.reveal:not(.monster-card) {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.visible:not(.monster-card) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
    .about-section { padding: 110px 22px; }
    .about-intro { margin-bottom: 100px; }
    .about-block { margin-bottom: 110px; }
    .mode-grid, .monster-grid { gap: 30px; }
    .about-heading { letter-spacing: 4px; }
}

@media (max-width: 820px) {
    .hero-title { letter-spacing: 2px; }
    body.loaded .hero-title { margin-bottom: 50px; }
    .download-btn { padding: 15px 55px; }

    .about-section { padding: 90px 20px; }
    .about-intro { margin-bottom: 80px; }
    .about-block { margin-bottom: 90px; }

    .about-lead { font-size: 1.5rem; }
    .about-text { font-size: 1.25rem; }

    .mode-grid { grid-template-columns: 1fr; }
    .monster-grid { grid-template-columns: repeat(2, 1fr); }
    .sysreq-grid { grid-template-columns: 1fr; }

    .download-section { min-height: auto; padding: 90px 20px; }
    .platforms { gap: 30px; }
    .platform-btn { padding: 25px 45px; font-size: 1.25rem; min-width: 220px; }

    .footer { padding: 60px 20px 35px; }
    .footer-socials { gap: 20px; }
}

@media (max-width: 560px) {
    .paint-frame { height: 130px; }

    .hero-title { font-size: clamp(2rem, 10vw, 3rem); letter-spacing: 1px; }
    body.loaded .hero-title { margin-bottom: 40px; }
    .hero-content { padding: 15px; }

    .download-btn { font-size: 1.1rem; padding: 14px 45px; letter-spacing: 2px; }

    .about-section { padding: 70px 16px; }
    .about-intro { margin-bottom: 70px; }
    .about-block { margin-bottom: 75px; }

    .about-heading { font-size: clamp(2.2rem, 10vw, 3.2rem); letter-spacing: 2px; margin-bottom: 25px; }
    .about-lead { font-size: 1.25rem; line-height: 1.55; }
    .about-text { font-size: 1.1rem; line-height: 1.75; }

    .block-title { font-size: clamp(1.9rem, 8vw, 2.6rem); letter-spacing: 3px; }
    .block-subtitle { font-size: 1.1rem; margin-bottom: 45px; }

    .mode-card { padding: 30px 22px; }
    .mode-card h4 { font-size: 1.5rem; letter-spacing: 2px; margin-bottom: 18px; }
    .mode-card p { font-size: 1.05rem; line-height: 1.7; }

    .monster-grid { grid-template-columns: 1fr; gap: 25px; }
    .monster-card { padding: 35px 25px; min-height: 340px; }
    .monster-card h4 { font-size: 1.4rem; letter-spacing: 2px; margin-bottom: 15px; }
    .monster-card p { font-size: 1.05rem; line-height: 1.7; }

    .monster-portrait img { max-width: 90%; max-height: 90%; }
    .monster-portrait .portrait-normal { opacity: 0.08; }

    .sysreq-card { padding: 30px 22px; }
    .sysreq-card h4 { font-size: 1.5rem; letter-spacing: 3px; margin-bottom: 22px; }
    .sysreq-card li { font-size: 0.95rem; padding: 11px 0; flex-direction: column; align-items: flex-start; gap: 4px; }
    .sysreq-card li span { font-size: 0.85rem; }

    .changelog-list { padding-left: 26px; }
    .changelog-list::before { left: 8px; }
    .changelog-item { padding: 24px 22px; }
    .changelog-item::before { left: -24px; top: 34px; width: 12px; height: 12px; }
    .changelog-version { font-size: 1.3rem; }
    .changelog-item h4 { font-size: 1.15rem; }
    .changelog-item li { font-size: 0.95rem; }

    .download-section { padding: 70px 16px; }
    .download-section h2 { font-size: clamp(1.8rem, 8vw, 2.5rem); letter-spacing: 3px; }
    .download-section .subtitle { font-size: 1rem; margin-bottom: 45px; }

    .platforms { flex-direction: column; align-items: center; width: 100%; }
    .platform-btn { width: 100%; max-width: 340px; font-size: 1.15rem; padding: 22px 30px; min-width: auto; }

    .footer { padding: 55px 16px 30px; }
    .footer-socials { gap: 15px; margin-bottom: 35px; }
    .social-btn { width: 100%; max-width: 340px; justify-content: center; font-size: 1rem; padding: 15px 22px; letter-spacing: 2px; }
    .footer-copy { font-size: 0.85rem; letter-spacing: 1px; }
}

@media (max-width: 380px) {
    .hero-title { font-size: 1.85rem; }
    .download-btn { padding: 12px 32px; font-size: 1rem; }
    .about-heading { font-size: 1.9rem; }
    .block-title { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}