.glitch-text {
    position: relative;
    animation: glitchText 0.3s infinite;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-text::before {
    animation: glitchNoise 0.3s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-2px, -2px);
    color: rgba(255, 0, 0, 0.8);
    z-index: -1;
}

.glitch-text::after {
    animation: glitchNoise 0.3s infinite reverse;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    transform: translate(2px, 2px);
    color: rgba(0, 255, 255, 0.8);
    z-index: -1;
}

.glitch-enhanced {
    position: relative;
    color: var(--primary-color);
    text-shadow: 0 0 6px var(--primary-color), 0 0 14px var(--primary-color);
    animation: headerPulse 4s ease-in-out infinite;
}

.spark {
    position: fixed;
    color: var(--primary-color);
    opacity: 1;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color);
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
    transition: opacity 0.1s linear;
}

.spark.fading {
    opacity: 0;
}

.spark-glow {
    position: fixed;
    color: var(--primary-color);
    font-family: var(--ascii-font-family);
    font-size: 0.6em;
    text-shadow: 0 0 2px var(--primary-color);
    opacity: 0.6;
    pointer-events: none;
    z-index: 10000;
    animation: pixelFlicker 0.3s ease-out forwards;
}

.drip:nth-child(2) {
    animation-delay: 0.4s;
    animation-name: drip2;
}

.drip:nth-child(3) {
    animation-delay: 0.8s;
    animation-name: drip3;
}

.drip:nth-child(4) {
    animation-delay: 1.2s;
    animation-name: drip4;
}

.drip:nth-child(5) {
    animation-delay: 1.6s;
    animation-name: drip5;
}

.drip:nth-child(6) {
    animation-delay: 2.0s;
    animation-name: drip;
}

.drip:nth-child(7) {
    animation-delay: 2.4s;
    animation-name: drip2;
}

.drip:nth-child(8) {
    animation-delay: 2.8s;
    animation-name: drip3;
}

.drip:nth-child(9) {
    animation-delay: 3.2s;
    animation-name: drip4;
}

.drip:nth-child(10) {
    animation-delay: 3.6s;
    animation-name: drip5;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TORCHES - Факелы по краям экрана
   ═══════════════════════════════════════════════════════════════════════════════ */

.torch {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    font-family: var(--ascii-font-family);
    font-size: 14px;
    line-height: 1;
    color: var(--primary-color);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    white-space: pre;
}

.torch::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -50px;
    right: -50px;
    bottom: 50px;
    background: radial-gradient(ellipse at center, 
        rgba(255, 165, 0, 0.15) 0%,
        rgba(255, 100, 0, 0.1) 30%,
        rgba(255, 50, 0, 0.05) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 99;
    animation: torchGlow 2s ease-in-out infinite alternate;
    border-radius: 50%;
}

.torch-left::before {
    animation: torchGlowLeft 2s ease-in-out infinite alternate;
}

.torch-right::before {
    animation: torchGlowRight 2s ease-in-out infinite alternate;
}

.torch-flame-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -2px;
    filter: drop-shadow(0 0 20px rgba(255, 165, 0, 0.6)) 
            drop-shadow(0 0 40px rgba(255, 100, 0, 0.4))
            drop-shadow(0 0 60px rgba(255, 50, 0, 0.2));
}

.torch-flame-ascii {
    font-family: var(--ascii-font-family);
    font-size: 8px;
    line-height: 1;
    white-space: pre;
    color: #ff6600;
    text-shadow: 
        0 0 10px #ff6600,
        0 0 20px #ff3300,
        0 0 30px #ff0000,
        0 0 40px #ffff00;
    animation: flameSway 2s ease-in-out infinite alternate;
    will-change: transform, text-shadow;
    position: relative;
    z-index: 101;
}

.torch-left {
    left: 15px;
}

.torch-right {
    right: 15px;
}

.torch-flame-top {
    color: #ffff00;
    text-shadow: 
        0 -2px 15px #ffff00,
        0 -4px 25px #ffaa00,
        0 -6px 35px #ff6600,
        0 -8px 45px #ff3300;
    animation: flameTop 1.5s ease-in-out infinite alternate;
    font-size: 1.1em;
    margin-bottom: -2px;
    will-change: text-shadow, transform;
}

.torch-flame-core {
    color: #ff6600;
    text-shadow: 
        0 0 20px #ff6600,
        0 0 30px #ff3300,
        0 0 40px #ff0000,
        0 -2px 50px #ffff00;
    animation: flameCore 1.2s ease-in-out infinite alternate;
    font-size: 1.3em;
    margin-bottom: -3px;
    will-change: text-shadow, transform;
}

.torch-flame-left {
    color: #ffaa00;
    text-shadow: 
        -2px 0 15px #ffaa00,
        -4px 0 25px #ff6600,
        -6px 0 35px #ff3300;
    animation: flameLeft 1.8s ease-in-out infinite alternate;
    font-size: 1em;
    margin-left: -3px;
    margin-bottom: -2px;
    will-change: text-shadow, transform;
}

.torch-flame-right {
    color: #ffaa00;
    text-shadow: 
        2px 0 15px #ffaa00,
        4px 0 25px #ff6600,
        6px 0 35px #ff3300;
    animation: flameRight 1.6s ease-in-out infinite alternate;
    font-size: 1em;
    margin-left: 3px;
    margin-bottom: -2px;
    will-change: text-shadow, transform;
}

.torch-flame-spark-1 {
    color: #ffff00;
    text-shadow: 
        0 0 8px #ffff00,
        0 0 15px #ffaa00,
        0 0 25px #ff6600;
    animation: spark1 1.2s ease-in-out infinite;
    font-size: 0.7em;
    position: absolute;
    top: -8px;
    left: -2px;
    will-change: opacity, transform;
}

.torch-flame-spark-2 {
    color: #ffff00;
    text-shadow: 
        0 0 8px #ffff00,
        0 0 15px #ffaa00,
        0 0 25px #ff6600;
    animation: spark2 0.9s ease-in-out infinite;
    font-size: 0.7em;
    position: absolute;
    top: -6px;
    right: -2px;
    will-change: opacity, transform;
}

.torch-holder-ascii {
    font-family: var(--ascii-font-family);
    font-size: 8px;
    line-height: 1;
    white-space: pre;
    color: var(--rust);
    text-shadow: 
        0 0 3px var(--rust),
        0 0 6px rgba(205, 104, 61, 0.5),
        0 0 9px rgba(205, 104, 61, 0.3);
    margin-top: 2px;
    opacity: 0.9;
    animation: torchHolderGlow 3s ease-in-out infinite;
    will-change: text-shadow, opacity;
    position: relative;
    z-index: 100;
}

@keyframes flameTop {
    0% {
        text-shadow: 
            0 -2px 15px #ffff00,
            0 -4px 25px #ffaa00,
            0 -6px 35px #ff6600,
            0 -8px 45px #ff3300;
        transform: translateX(0) translateY(0);
    }
    50% {
        text-shadow: 
            0 -3px 20px #ffff00,
            0 -5px 30px #ffaa00,
            0 -7px 40px #ff6600,
            0 -9px 50px #ff3300;
        transform: translateX(-1px) translateY(-1px);
    }
    100% {
        text-shadow: 
            0 -1px 12px #ffff00,
            0 -3px 22px #ffaa00,
            0 -5px 32px #ff6600,
            0 -7px 42px #ff3300;
        transform: translateX(1px) translateY(1px);
    }
}

@keyframes flameCore {
    0% {
        text-shadow: 
            0 0 20px #ff6600,
            0 0 30px #ff3300,
            0 0 40px #ff0000,
            0 -2px 50px #ffff00;
        transform: scale(1);
    }
    50% {
        text-shadow: 
            0 0 25px #ff6600,
            0 0 35px #ff3300,
            0 0 45px #ff0000,
            0 -3px 55px #ffff00;
        transform: scale(1.05);
    }
    100% {
        text-shadow: 
            0 0 18px #ff6600,
            0 0 28px #ff3300,
            0 0 38px #ff0000,
            0 -1px 48px #ffff00;
        transform: scale(0.98);
    }
}

@keyframes flameLeft {
    0% {
        text-shadow: 
            -2px 0 15px #ffaa00,
            -4px 0 25px #ff6600,
            -6px 0 35px #ff3300;
        transform: translateX(0) rotate(0deg);
    }
    50% {
        text-shadow: 
            -3px 0 20px #ffaa00,
            -5px 0 30px #ff6600,
            -7px 0 40px #ff3300;
        transform: translateX(-1px) rotate(-2deg);
    }
    100% {
        text-shadow: 
            -1px 0 12px #ffaa00,
            -3px 0 22px #ff6600,
            -5px 0 32px #ff3300;
        transform: translateX(1px) rotate(2deg);
    }
}

@keyframes flameRight {
    0% {
        text-shadow: 
            2px 0 15px #ffaa00,
            4px 0 25px #ff6600,
            6px 0 35px #ff3300;
        transform: translateX(0) rotate(0deg);
    }
    50% {
        text-shadow: 
            3px 0 20px #ffaa00,
            5px 0 30px #ff6600,
            7px 0 40px #ff3300;
        transform: translateX(1px) rotate(2deg);
    }
    100% {
        text-shadow: 
            1px 0 12px #ffaa00,
            3px 0 22px #ff6600,
            5px 0 32px #ff3300;
        transform: translateX(-1px) rotate(-2deg);
    }
}

@keyframes spark1 {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateY(-3px) translateX(-1px) scale(1);
    }
    40% {
        opacity: 0.9;
        transform: translateY(-5px) translateX(-2px) scale(1.1);
    }
    60% {
        opacity: 0.7;
        transform: translateY(-7px) translateX(-1px) scale(0.9);
    }
    80% {
        opacity: 0.5;
        transform: translateY(-9px) translateX(0) scale(0.7);
    }
}

@keyframes spark2 {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.5);
    }
    25% {
        opacity: 1;
        transform: translateY(-2px) translateX(1px) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-4px) translateX(2px) scale(1.2);
    }
    75% {
        opacity: 0.6;
        transform: translateY(-6px) translateX(1px) scale(0.8);
    }
}

@keyframes flameSway {
    0% {
        transform: translateX(-3px) rotate(-1deg);
        text-shadow: 
            0 0 10px #ff6600,
            0 0 20px #ff3300,
            0 0 30px #ff0000,
            0 0 40px #ffff00,
            -5px 0 15px rgba(255, 200, 0, 0.5);
    }
    50% {
        transform: translateX(0) rotate(0deg);
        text-shadow: 
            0 0 12px #ff6600,
            0 0 25px #ff3300,
            0 0 35px #ff0000,
            0 0 45px #ffff00,
            0 0 20px rgba(255, 200, 0, 0.6);
    }
    100% {
        transform: translateX(3px) rotate(1deg);
        text-shadow: 
            0 0 10px #ff6600,
            0 0 20px #ff3300,
            0 0 30px #ff0000,
            0 0 40px #ffff00,
            5px 0 15px rgba(255, 200, 0, 0.5);
    }
}

@keyframes torchGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

@keyframes torchGlowLeft {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1) translateX(-2px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1) translateX(0);
    }
}

@keyframes torchGlowRight {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1) translateX(2px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1) translateX(0);
    }
}

@keyframes torchHolderGlow {
    0%, 100% {
        opacity: 0.85;
        text-shadow: 
            0 0 3px var(--rust),
            0 0 6px rgba(205, 104, 61, 0.5),
            0 0 9px rgba(205, 104, 61, 0.3);
    }
    50% {
        opacity: 1;
        text-shadow: 
            0 0 5px var(--rust),
            0 0 10px rgba(205, 104, 61, 0.7),
            0 0 15px rgba(205, 104, 61, 0.5),
            0 0 20px rgba(255, 165, 0, 0.2);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RUNES - Мерцающие руны вокруг контента
   ═══════════════════════════════════════════════════════════════════════════════ */

.rune {
    position: fixed;
    font-family: var(--ascii-font-family);
    font-size: 20px;
    color: var(--primary-color);
    text-shadow: none;
    box-shadow: none;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    animation: runeFadeInOut 4s ease-in-out infinite;
    user-select: none;
}

.rune-top {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.rune-bottom {
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.rune-left {
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.rune-right {
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.rune-corner-tl {
    top: 15%;
    left: 10%;
}

.rune-corner-tr {
    top: 15%;
    right: 10%;
}

.rune-corner-bl {
    bottom: 15%;
    left: 10%;
}

.rune-corner-br {
    bottom: 15%;
    right: 10%;
}

@keyframes runeFadeInOut {
    0% {
        opacity: 0;
        transform: scale(0.8) translate(var(--rune-offset-x, 0), var(--rune-offset-y, 0));
        filter: blur(2px);
        text-shadow: none;
        box-shadow: none;
    }
    20% {
        opacity: 0.3;
        transform: scale(1) translate(var(--rune-offset-x, 0), var(--rune-offset-y, 0));
        filter: blur(1px);
        text-shadow: none;
        box-shadow: none;
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1) translate(var(--rune-offset-x, 0), var(--rune-offset-y, 0));
        filter: blur(0px);
        text-shadow: none;
        box-shadow: none;
    }
    80% {
        opacity: 0.4;
        transform: scale(1) translate(var(--rune-offset-x, 0), var(--rune-offset-y, 0));
        filter: blur(1px);
        text-shadow: none;
        box-shadow: none;
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translate(var(--rune-offset-x, 0), var(--rune-offset-y, 0));
        filter: blur(2px);
        text-shadow: none;
        box-shadow: none;
    }
}

@keyframes runeGlow {
    0%, 100% {
        text-shadow: none;
        box-shadow: none;
        opacity: 0.6;
    }
    50% {
        text-shadow: none;
        box-shadow: none;
        opacity: 1;
    }
}

.matrix-runes-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.crt::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        to bottom,
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.35) 50%
    );
    background-size: 100% 3px;
    z-index: 2;
    pointer-events: none;
    animation: scanlineMove 8s linear infinite;
}

.flicker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 16, 16, 0.15);
    animation: screen-flicker 0.12s infinite;
    pointer-events: none;
    z-index: 9999;
}

@keyframes screen-flicker {
    0% { opacity: 0.96; }
    3% { opacity: 0.94; }
    6% { opacity: 0.97; }
    9% { opacity: 0.95; }
    12% { opacity: 0.98; }
    15% { opacity: 0.94; }
    18% { opacity: 0.97; }
    100% { opacity: 0.96; }
}

.crt-text {
    animation: textShadow 3s infinite;
    will-change: text-shadow;
}

@keyframes textShadow {
    0%, 100% {
        text-shadow: 
            0.5px 0 1px rgba(0,30,255,0.5),
            -0.5px 0 1px rgba(255,0,80,0.3),
            0 0 3px;
    }
    50% {
        text-shadow: 
            2.5px 0 1px rgba(0,30,255,0.5),
            -2.5px 0 1px rgba(255,0,80,0.3),
            0 0 3px;
    }
}

.magical-glow {
    color: #fff;
    animation: pulsate 2.5s infinite alternate;
    will-change: text-shadow;
}

@keyframes pulsate {
    0% {
        text-shadow:
            0 0 2px #fff,
            0 0 4px #fff,
            0 0 10px #0fa,
            0 0 45px #0fa;
    }
    100% {
        text-shadow:
            0 0 4px #fff,
            0 0 11px #fff,
            0 0 40px #0fa,
            0 0 100px #0fa;
    }
}

.vignette-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: multiply;
}

.chromatic-aberration {
    position: relative;
    animation: chromaticShift 0.1s infinite;
    will-change: filter;
}

@keyframes chromaticShift {
    0%, 100% {
        filter: blur(0px);
    }
    25% {
        filter: blur(0.3px) contrast(1.05);
    }
    50% {
        filter: blur(0.5px) contrast(1.1);
    }
    75% {
        filter: blur(0.3px) contrast(1.05);
    }
}

.noise-overlay {
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9997;
    opacity: 0.15;
    animation: noiseFlicker 0.2s infinite;
}

@keyframes noiseFlicker {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

.bloom-effect {
    filter: blur(1px) brightness(1.1) contrast(1.2);
    will-change: filter;
}

.bloom-text {
    text-shadow: 
        0 0 5px currentColor,
        0 0 10px currentColor,
        0 0 15px currentColor,
        0 0 20px currentColor;
    animation: bloomPulse 3s ease-in-out infinite;
    will-change: text-shadow;
}

@keyframes bloomPulse {
    0%, 100% {
        text-shadow: 
            0 0 5px currentColor,
            0 0 10px currentColor,
            0 0 15px currentColor,
            0 0 20px currentColor;
    }
    50% {
        text-shadow: 
            0 0 10px currentColor,
            0 0 20px currentColor,
            0 0 30px currentColor,
            0 0 40px currentColor;
    }
}

.distortion-effect {
    position: relative;
    animation: distortion 4s ease-in-out infinite;
    will-change: transform;
}

@keyframes distortion {
    0%, 100% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: perspective(1000px) rotateX(0.5deg) rotateY(-0.5deg);
    }
    50% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    }
    75% {
        transform: perspective(1000px) rotateX(-0.5deg) rotateY(0.5deg);
    }
}

.scanline-move {
    position: relative;
    overflow: hidden;
}

.scanline-move::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to bottom, transparent, var(--primary-color), transparent);
    box-shadow: 0 0 10px var(--primary-color);
    animation: scanlineMove 3s linear infinite;
    z-index: 1000;
    pointer-events: none;
}

@keyframes scanlineMove {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    2% {
        opacity: 0.8;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    98% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.retro-glow {
    position: relative;
}

.retro-glow::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--primary-color);
    filter: blur(3px);
    opacity: 0.5;
    z-index: -1;
    animation: retroGlowPulse 2s ease-in-out infinite;
}

@keyframes retroGlowPulse {
    0%, 100% {
        opacity: 0.3;
        filter: blur(2px);
    }
    50% {
        opacity: 0.6;
        filter: blur(4px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE: Hide torches on small screens
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .torch { display: none; }
}