/* ==========================================
   ПУТЬ В АД — Спецэффекты
   Glitch, Ember, Decay, Particles
   ========================================== */

/* ==========================================
   GLITCH EFFECT — Сбой текста
   ========================================== */

.glitch {
    position: relative;
    /* Disabled to prevent scroll jitter */
    /* animation: glitch-skew 4s infinite linear alternate-reverse; */
}

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

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--ember);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--rust), 2px 2px var(--ember-dark);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); transform: skew(0.15deg); }
    5% { clip: rect(70px, 9999px, 71px, 0); transform: skew(0.5deg); }
    10% { clip: rect(29px, 9999px, 24px, 0); transform: skew(0.65deg); }
    15% { clip: rect(95px, 9999px, 34px, 0); transform: skew(0.15deg); }
    20% { clip: rect(21px, 9999px, 64px, 0); transform: skew(0.9deg); }
    25% { clip: rect(58px, 9999px, 2px, 0); transform: skew(0.3deg); }
    30% { clip: rect(70px, 9999px, 96px, 0); transform: skew(0.55deg); }
    35% { clip: rect(3px, 9999px, 54px, 0); transform: skew(0.85deg); }
    40% { clip: rect(15px, 9999px, 43px, 0); transform: skew(0.15deg); }
    45% { clip: rect(100px, 9999px, 60px, 0); transform: skew(0.45deg); }
    50% { clip: rect(67px, 9999px, 11px, 0); transform: skew(0.25deg); }
    55% { clip: rect(40px, 9999px, 80px, 0); transform: skew(0.75deg); }
    60% { clip: rect(88px, 9999px, 27px, 0); transform: skew(0.35deg); }
    65% { clip: rect(9px, 9999px, 91px, 0); transform: skew(0.95deg); }
    70% { clip: rect(77px, 9999px, 46px, 0); transform: skew(0.05deg); }
    75% { clip: rect(19px, 9999px, 72px, 0); transform: skew(0.6deg); }
    80% { clip: rect(53px, 9999px, 8px, 0); transform: skew(0.2deg); }
    85% { clip: rect(82px, 9999px, 38px, 0); transform: skew(0.8deg); }
    90% { clip: rect(36px, 9999px, 99px, 0); transform: skew(0.4deg); }
    95% { clip: rect(63px, 9999px, 17px, 0); transform: skew(0.1deg); }
    100% { clip: rect(48px, 9999px, 85px, 0); transform: skew(0.7deg); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 100px, 0); transform: skew(0.25deg); }
    5% { clip: rect(17px, 9999px, 73px, 0); transform: skew(0.7deg); }
    10% { clip: rect(84px, 9999px, 42px, 0); transform: skew(0.35deg); }
    15% { clip: rect(26px, 9999px, 91px, 0); transform: skew(0.85deg); }
    20% { clip: rect(52px, 9999px, 14px, 0); transform: skew(0.15deg); }
    25% { clip: rect(79px, 9999px, 68px, 0); transform: skew(0.55deg); }
    30% { clip: rect(8px, 9999px, 35px, 0); transform: skew(0.95deg); }
    35% { clip: rect(93px, 9999px, 57px, 0); transform: skew(0.45deg); }
    40% { clip: rect(41px, 9999px, 22px, 0); transform: skew(0.05deg); }
    45% { clip: rect(72px, 9999px, 88px, 0); transform: skew(0.65deg); }
    50% { clip: rect(11px, 9999px, 49px, 0); transform: skew(0.3deg); }
    55% { clip: rect(60px, 9999px, 76px, 0); transform: skew(0.8deg); }
    60% { clip: rect(33px, 9999px, 5px, 0); transform: skew(0.2deg); }
    65% { clip: rect(87px, 9999px, 62px, 0); transform: skew(0.6deg); }
    70% { clip: rect(20px, 9999px, 97px, 0); transform: skew(0.1deg); }
    75% { clip: rect(55px, 9999px, 30px, 0); transform: skew(0.5deg); }
    80% { clip: rect(76px, 9999px, 83px, 0); transform: skew(0.9deg); }
    85% { clip: rect(4px, 9999px, 47px, 0); transform: skew(0.4deg); }
    90% { clip: rect(68px, 9999px, 19px, 0); transform: skew(0.75deg); }
    95% { clip: rect(38px, 9999px, 94px, 0); transform: skew(0.15deg); }
    100% { clip: rect(81px, 9999px, 56px, 0); transform: skew(0.55deg); }
}

@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    10% { transform: skew(0deg); }
    11% { transform: skew(2deg); }
    12% { transform: skew(0deg); }
    50% { transform: skew(0deg); }
    51% { transform: skew(-1deg); }
    52% { transform: skew(0deg); }
    100% { transform: skew(0deg); }
}

/* Subtle glitch for smaller text */
.glitch-subtle {
    animation: glitch-subtle 8s infinite;
}

@keyframes glitch-subtle {
    0%, 90%, 100% {
        text-shadow: none;
        transform: translate(0);
    }
    91% {
        text-shadow: 2px 0 var(--ember), -2px 0 var(--rust);
        transform: translate(-1px, 1px);
    }
    92% {
        text-shadow: -2px 0 var(--ember), 2px 0 var(--rust);
        transform: translate(1px, -1px);
    }
    93% {
        text-shadow: none;
        transform: translate(0);
    }
}

/* ==========================================
   EMBER TEXT — Тлеющий текст
   ========================================== */

.ember-text {
    color: var(--ember);
    text-shadow:
        0 0 10px var(--ember),
        0 0 20px var(--ember-dark),
        0 0 30px var(--ember-dark);
    animation: ember-pulse 3s ease-in-out infinite;
}

@keyframes ember-pulse {
    0%, 100% {
        text-shadow:
            0 0 10px var(--ember),
            0 0 20px var(--ember-dark),
            0 0 30px var(--ember-dark);
    }
    50% {
        text-shadow:
            0 0 5px var(--ember),
            0 0 15px var(--ember-dark),
            0 0 25px var(--ember-dark);
    }
}

/* ==========================================
   DECAY EFFECT — Распад текста
   ========================================== */

.decay {
    position: relative;
    display: inline-block;
    transition: var(--transition-slow);
}

.decay:hover {
    animation: decay-shake 0.5s ease-in-out;
}

.decay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--void) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: var(--transition-slow);
    pointer-events: none;
}

.decay:hover::before {
    animation: decay-sweep 1s ease-in-out;
}

@keyframes decay-shake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-2px) rotate(-0.5deg); }
    20% { transform: translateX(2px) rotate(0.5deg); }
    30% { transform: translateX(-1px) rotate(-0.25deg); }
    40% { transform: translateX(1px) rotate(0.25deg); }
    50% { transform: translateX(0); }
}

@keyframes decay-sweep {
    0% { opacity: 0; transform: translateX(-100%); }
    50% { opacity: 0.8; }
    100% { opacity: 0; transform: translateX(100%); }
}

/* ==========================================
   EMBER PARTICLES — Частицы-угольки
   ========================================== */

.ember-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--ember);
    border-radius: 50%;
    opacity: 0;
    animation: particle-rise 8s infinite;
    box-shadow:
        0 0 6px var(--ember),
        0 0 12px var(--ember-dark);
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; }
.particle:nth-child(3) { left: 30%; animation-delay: 2s; }
.particle:nth-child(4) { left: 40%; animation-delay: 3s; }
.particle:nth-child(5) { left: 50%; animation-delay: 4s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; }
.particle:nth-child(7) { left: 70%; animation-delay: 6s; }
.particle:nth-child(8) { left: 80%; animation-delay: 7s; }
.particle:nth-child(9) { left: 90%; animation-delay: 0.5s; }
.particle:nth-child(10) { left: 15%; animation-delay: 2.5s; }
.particle:nth-child(11) { left: 35%; animation-delay: 4.5s; }
.particle:nth-child(12) { left: 55%; animation-delay: 6.5s; }
.particle:nth-child(13) { left: 75%; animation-delay: 1.5s; }
.particle:nth-child(14) { left: 95%; animation-delay: 3.5s; }
.particle:nth-child(15) { left: 5%; animation-delay: 5.5s; }

@keyframes particle-rise {
    0% {
        bottom: -10px;
        opacity: 0;
        transform: translateX(0) scale(1);
    }
    10% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.6;
        transform: translateX(20px) scale(0.8);
    }
    90% {
        opacity: 0.2;
    }
    100% {
        bottom: 100vh;
        opacity: 0;
        transform: translateX(-10px) scale(0.3);
    }
}

/* ==========================================
   BURN TRANSITION — Прогорание
   ========================================== */

.burn-in {
    animation: burn-in 1s ease-out forwards;
}

@keyframes burn-in {
    0% {
        opacity: 0;
        filter: brightness(3) blur(10px);
        transform: scale(1.1);
    }
    50% {
        filter: brightness(1.5) blur(2px);
    }
    100% {
        opacity: 1;
        filter: brightness(1) blur(0);
        transform: scale(1);
    }
}

.burn-out {
    animation: burn-out 0.5s ease-in forwards;
}

@keyframes burn-out {
    0% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        filter: brightness(2);
        color: var(--ember);
    }
    100% {
        opacity: 0;
        filter: brightness(3) blur(5px);
    }
}

/* ==========================================
   STATIC NOISE — Статический шум
   ========================================== */

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

@keyframes noise-shift {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(5%, 5%); }
    30% { transform: translate(-5%, 5%); }
    40% { transform: translate(5%, -5%); }
    50% { transform: translate(-2%, 2%); }
    60% { transform: translate(2%, -2%); }
    70% { transform: translate(-3%, -3%); }
    80% { transform: translate(3%, 3%); }
    90% { transform: translate(-1%, 1%); }
}

/* ==========================================
   SCAN LINES — Линии развёртки
   ========================================== */

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    opacity: 0.3;
}

/* ==========================================
   VIGNETTE — Виньетка
   ========================================== */

.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.4) 100%
    );
}

/* ==========================================
   FADE IN ELEMENTS — Появление при скролле
   ========================================== */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered fade-in for lists */
.fade-in-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-stagger.visible > *:nth-child(1) { transition-delay: 0.1s; }
.fade-in-stagger.visible > *:nth-child(2) { transition-delay: 0.2s; }
.fade-in-stagger.visible > *:nth-child(3) { transition-delay: 0.3s; }
.fade-in-stagger.visible > *:nth-child(4) { transition-delay: 0.4s; }
.fade-in-stagger.visible > *:nth-child(5) { transition-delay: 0.5s; }

.fade-in-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   REDUCED MOTION — Для тех, кому не нужны анимации
   ========================================== */

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

    .glitch::before,
    .glitch::after {
        display: none;
    }

    .ember-particles {
        display: none;
    }

    .noise {
        display: none;
    }
}