.socials > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.2) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}
.socials > a:hover::before {
    animation: katana-shine 0.6s ease-in-out;
}
@keyframes katana-shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.hr-line.glitch {
  animation: 7s realistic-border-glitch-1;
}
.socials > a::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 3%, #00ffb1 3%, #00ffb1 5%, #eeeeee 5%);
            color: #000;
            display: flex;
            align-items: center;
            padding-left: 20px;
            font-weight: bold;
            letter-spacing: 1px;
            text-shadow: -2px -2px 0px #ff0000, 2px 2px 0px #00e6f6;
            clip-path: inset(50% 50% 50% 50%);
            --slice-0: inset(50% 50% 50% 50%);
            --slice-1: inset(80% -6px 0 0);
            --slice-2: inset(50% -6px 30% 0);
            --slice-3: inset(10% -6px 85% 0);
            --slice-4: inset(40% -6px 43% 0);
            --slice-5: inset(80% -6px 5% 0);
            --slice-6: inset(20% -6px 70% 0);
            --slice-7: inset(60% -6px 15% 0);
            --slice-8: inset(35% -6px 55% 0);
            --slice-9: inset(75% -6px 10% 0);
        }

        /* Different glitch patterns for each card */
        .socials > a.glitch-1::after { animation: 6s realistic-glitch-1; }
        .socials > a.glitch-1 { animation: 6s realistic-border-glitch-1; }
        
        .socials > a.glitch-2::after { animation: 7s realistic-glitch-2; }
        .socials > a.glitch-2 { animation: 7s realistic-border-glitch-2; }

        .socials > a.glitch-3::after { animation: 5.5s realistic-glitch-3; }
        .socials > a.glitch-3 { animation: 5.5s realistic-border-glitch-3; }

        .socials > a.glitch-4::after { animation: 6.5s realistic-glitch-4; }
        .socials > a.glitch-4 { animation: 6.5s realistic-border-glitch-4; }

        /* Realistic Glitch Pattern 1 - Starts small, builds up */
        @keyframes realistic-glitch-1 {
            0%, 15% { clip-path: var(--slice-0); transform: translate(0); }
            16% { clip-path: var(--slice-1); transform: translate(-1px, 0); }
            17% { clip-path: var(--slice-0); transform: translate(0); }
            18% { clip-path: var(--slice-2); transform: translate(1px, 0); }
            19%, 40% { clip-path: var(--slice-0); transform: translate(0); }
            
            41% { clip-path: var(--slice-3); transform: translate(-2px, -1px); }
            42% { clip-path: var(--slice-1); transform: translate(3px, 1px); }
            43% { clip-path: var(--slice-4); transform: translate(-1px, 2px); }
            44%, 65% { clip-path: var(--slice-0); transform: translate(0); }
            
            66% { clip-path: var(--slice-2); transform: translate(-5px, -3px); }
            67% { clip-path: var(--slice-5); transform: translate(7px, 2px); }
            68% { clip-path: var(--slice-1); transform: translate(-3px, 4px); }
            69% { clip-path: var(--slice-3); transform: translate(4px, -2px); }
            70% { clip-path: var(--slice-6); transform: translate(-6px, 1px); }
            71% { clip-path: var(--slice-4); transform: translate(2px, -5px); }
            72% { clip-path: var(--slice-7); transform: translate(8px, 3px); }
            73% { clip-path: var(--slice-2); transform: translate(-4px, 6px); }
            74%, 100% { clip-path: var(--slice-0); transform: translate(0); }
        }

        @keyframes realistic-border-glitch-1 {
            0%, 15% { border: none; box-shadow: none; transform: translate(0); }
            16% { box-shadow: -1px 0px 0px #ff0000, 1px 0px 0px #00e6f6; transform: translate(-1px, 0); }
            17% { box-shadow: none; transform: translate(0); }
            18% { box-shadow: 0px -1px 0px #ff0000, 0px 1px 0px #00e6f6; transform: translate(1px, 0); }
            19%, 40% { box-shadow: none; transform: translate(0); }
            
            41% { box-shadow: -2px -1px 0px #ff0000, 2px 1px 0px #00e6f6; transform: translate(-2px, -1px); }
            42% { box-shadow: 3px 1px 0px #ff0000, -3px -1px 0px #00e6f6; transform: translate(3px, 1px); }
            43% { box-shadow: -1px 2px 0px #ff0000, 1px -2px 0px #00e6f6; transform: translate(-1px, 2px); }
            44%, 65% { box-shadow: none; transform: translate(0); }
            
            66% { box-shadow: -5px -3px 0px #ff0000, 5px 3px 0px #00e6f6, 2px 0px 0px #00ffb1; transform: translate(-5px, -3px); }
            67% { box-shadow: 7px 2px 0px #ff0000, -7px -2px 0px #00e6f6, -3px 1px 0px #00ffb1; transform: translate(7px, 2px); }
            68% { box-shadow: -3px 4px 0px #ff0000, 3px -4px 0px #00e6f6, 1px -2px 0px #00ffb1; transform: translate(-3px, 4px); }
            69% { box-shadow: 4px -2px 0px #ff0000, -4px 2px 0px #00e6f6, -2px 3px 0px #00ffb1; transform: translate(4px, -2px); }
            70% { box-shadow: -6px 1px 0px #ff0000, 6px -1px 0px #00e6f6, 3px 4px 0px #00ffb1; transform: translate(-6px, 1px); }
            71% { box-shadow: 2px -5px 0px #ff0000, -2px 5px 0px #00e6f6, 4px 2px 0px #00ffb1; transform: translate(2px, -5px); }
            72% { box-shadow: 8px 3px 0px #ff0000, -8px -3px 0px #00e6f6, -1px -4px 0px #00ffb1; transform: translate(8px, 3px); }
            73% { box-shadow: -4px 6px 0px #ff0000, 4px -6px 0px #00e6f6, 5px 1px 0px #00ffb1; transform: translate(-4px, 6px); }
            74%, 100% { box-shadow: none; transform: translate(0); display: none; }
        }

        /* Realistic Glitch Pattern 2 - Different timing and intensity */
        @keyframes realistic-glitch-2 {
            0%, 20% { clip-path: var(--slice-0); transform: translate(0); }
            21% { clip-path: var(--slice-2); transform: translate(1px, -1px); }
            22%, 35% { clip-path: var(--slice-0); transform: translate(0); }
            
            36% { clip-path: var(--slice-4); transform: translate(-3px, 2px); }
            37% { clip-path: var(--slice-1); transform: translate(2px, -1px); }
            38%, 55% { clip-path: var(--slice-0); transform: translate(0); }
            
            56% { clip-path: var(--slice-3); transform: translate(-6px, 4px); }
            57% { clip-path: var(--slice-7); transform: translate(5px, -3px); }
            58% { clip-path: var(--slice-5); transform: translate(-2px, 5px); }
            59% { clip-path: var(--slice-8); transform: translate(7px, -2px); }
            60% { clip-path: var(--slice-2); transform: translate(-4px, 3px); }
            61%, 100% { clip-path: var(--slice-0); transform: translate(0); }
        }

        @keyframes realistic-border-glitch-2 {
            0%, 20% { border: none; box-shadow: none; transform: translate(0); }
            21% { box-shadow: 1px -1px 0px #ff0000, -1px 1px 0px #00e6f6; transform: translate(1px, -1px); }
            22%, 35% { box-shadow: none; transform: translate(0); }
            
            36% { box-shadow: -3px 2px 0px #ff0000, 3px -2px 0px #00e6f6; transform: translate(-3px, 2px); }
            37% { box-shadow: 2px -1px 0px #ff0000, -2px 1px 0px #00e6f6; transform: translate(2px, -1px); }
            38%, 55% { box-shadow: none; transform: translate(0); }
            
            56% { box-shadow: -6px 4px 0px #ff0000, 6px -4px 0px #00e6f6, 2px 2px 0px #00ffb1; transform: translate(-6px, 4px); }
            57% { box-shadow: 5px -3px 0px #ff0000, -5px 3px 0px #00e6f6, -3px 1px 0px #00ffb1; transform: translate(5px, -3px); }
            58% { box-shadow: -2px 5px 0px #ff0000, 2px -5px 0px #00e6f6, 4px -1px 0px #00ffb1; transform: translate(-2px, 5px); }
            59% { box-shadow: 7px -2px 0px #ff0000, -7px 2px 0px #00e6f6, 1px 3px 0px #00ffb1; transform: translate(7px, -2px); }
            60% { box-shadow: -4px 3px 0px #ff0000, 4px -3px 0px #00e6f6, 3px 4px 0px #00ffb1; transform: translate(-4px, 3px); }
            61%, 100% { box-shadow: none; transform: translate(0); display: none; }
        }

        /* Realistic Glitch Pattern 3 - Quick bursts */
        @keyframes realistic-glitch-3 {
            0%, 25% { clip-path: var(--slice-0); transform: translate(0); }
            26% { clip-path: var(--slice-1); transform: translate(-2px, 1px); }
            27%, 45% { clip-path: var(--slice-0); transform: translate(0); }
            
            46% { clip-path: var(--slice-6); transform: translate(4px, -2px); }
            47% { clip-path: var(--slice-3); transform: translate(-3px, 3px); }
            48% { clip-path: var(--slice-9); transform: translate(5px, -4px); }
            49%, 70% { clip-path: var(--slice-0); transform: translate(0); }
            
            71% { clip-path: var(--slice-4); transform: translate(-7px, 5px); }
            72% { clip-path: var(--slice-2); transform: translate(6px, -3px); }
            73%, 100% { clip-path: var(--slice-0); transform: translate(0); }
        }

        @keyframes realistic-border-glitch-3 {
            0%, 25% { border: none; box-shadow: none; transform: translate(0); }
            26% { box-shadow: -2px 1px 0px #ff0000, 2px -1px 0px #00e6f6; transform: translate(-2px, 1px); }
            27%, 45% { box-shadow: none; transform: translate(0); }
            
            46% { box-shadow: 4px -2px 0px #ff0000, -4px 2px 0px #00e6f6; transform: translate(4px, -2px); }
            47% { box-shadow: -3px 3px 0px #ff0000, 3px -3px 0px #00e6f6; transform: translate(-3px, 3px); }
            48% { box-shadow: 5px -4px 0px #ff0000, -5px 4px 0px #00e6f6; transform: translate(5px, -4px); }
            49%, 70% { box-shadow: none; transform: translate(0); }
            
            71% { box-shadow: -7px 5px 0px #ff0000, 7px -5px 0px #00e6f6, 3px 2px 0px #00ffb1; transform: translate(-7px, 5px); }
            72% { box-shadow: 6px -3px 0px #ff0000, -6px 3px 0px #00e6f6, -2px 4px 0px #00ffb1; transform: translate(6px, -3px); }
            73%, 100% { box-shadow: none; transform: translate(0); display: none; }
        }

        /* Realistic Glitch Pattern 4 - Chaotic pattern */
        @keyframes realistic-glitch-4 {
            0%, 18% { clip-path: var(--slice-0); transform: translate(0); }
            19% { clip-path: var(--slice-5); transform: translate(2px, 0); }
            20%, 30% { clip-path: var(--slice-0); transform: translate(0); }
            
            31% { clip-path: var(--slice-8); transform: translate(-4px, -2px); }
            32% { clip-path: var(--slice-2); transform: translate(3px, 4px); }
            33%, 50% { clip-path: var(--slice-0); transform: translate(0); }
            
            51% { clip-path: var(--slice-7); transform: translate(-5px, 3px); }
            52% { clip-path: var(--slice-1); transform: translate(8px, -5px); }
            53% { clip-path: var(--slice-6); transform: translate(-3px, 6px); }
            54% { clip-path: var(--slice-4); transform: translate(6px, -1px); }
            55% { clip-path: var(--slice-9); transform: translate(-2px, -4px); }
            56%, 100% { clip-path: var(--slice-0); transform: translate(0); }
        }

        @keyframes realistic-border-glitch-4 {
            0%, 18% { border: none; box-shadow: none; transform: translate(0); }
            19% { box-shadow: 2px 0px 0px #ff0000, -2px 0px 0px #00e6f6; transform: translate(2px, 0); }
            20%, 30% { box-shadow: none; transform: translate(0); }
            
            31% { box-shadow: -4px -2px 0px #ff0000, 4px 2px 0px #00e6f6; transform: translate(-4px, -2px); }
            32% { box-shadow: 3px 4px 0px #ff0000, -3px -4px 0px #00e6f6; transform: translate(3px, 4px); }
            33%, 50% { box-shadow: none; transform: translate(0); }
            
            51% { box-shadow: -5px 3px 0px #ff0000, 5px -3px 0px #00e6f6, 2px 1px 0px #00ffb1; transform: translate(-5px, 3px); }
            52% { box-shadow: 8px -5px 0px #ff0000, -8px 5px 0px #00e6f6, -1px 3px 0px #00ffb1; transform: translate(8px, -5px); }
            53% { box-shadow: -3px 6px 0px #ff0000, 3px -6px 0px #00e6f6, 4px -2px 0px #00ffb1; transform: translate(-3px, 6px); }
            54% { box-shadow: 6px -1px 0px #ff0000, -6px 1px 0px #00e6f6, 1px 5px 0px #00ffb1; transform: translate(6px, -1px); }
            55% { box-shadow: -2px -4px 0px #ff0000, 2px 4px 0px #00e6f6, 5px 2px 0px #00ffb1; transform: translate(-2px, -4px); }
            56%, 100% { box-shadow: none; transform: translate(0); display: none; }
        }
.name-section > span::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, #00ffb1 3%, #00ffb1 5%, #ffffff 5%);
    color: #000;
    display: flex;
    align-items: center;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: -3px -3px 0px #ff0000, 3px 3px 0px #00e6f6;
    clip-path: inset(50% 50% 50% 50%);
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);
    --slice-6: inset(20% -6px 70% 0);
    --slice-7: inset(60% -6px 15% 0);
    --slice-8: inset(35% -6px 55% 0);
    --slice-9: inset(75% -6px 10% 0);
}

/* Different glitch patterns for each name part */
.name-section > span.name-glitch-1::after { animation: 8s name-glitch-1; }
.name-section > span.name-glitch-1 { animation: 8s name-border-glitch-1; }

.name-section > span.name-glitch-2::after { animation: 7s name-glitch-2; }
.name-section > span.name-glitch-2 { animation: 7s name-border-glitch-2; }

.name-section > span.name-glitch-3::after { animation: 7.5s name-glitch-3; }
.name-section > span.name-glitch-3 { animation: 7.5s name-border-glitch-3; }

/* Name Glitch Pattern 1 - BENET */
@keyframes name-glitch-1 {
    0%, 10% { clip-path: var(--slice-0); }
    11% { clip-path: var(--slice-1); }
    12% { clip-path: var(--slice-0); }
    13% { clip-path: var(--slice-2); }
    14%, 25% { clip-path: var(--slice-0); }
    
    26% { clip-path: var(--slice-3); }
    27% { clip-path: var(--slice-1); }
    28% { clip-path: var(--slice-4); }
    29%, 45% { clip-path: var(--slice-0); }
    
    46% { clip-path: var(--slice-2); }
    47% { clip-path: var(--slice-5); }
    48% { clip-path: var(--slice-1); }
    49% { clip-path: var(--slice-3); }
    50% { clip-path: var(--slice-6); }
    51% { clip-path: var(--slice-4); }
    52% { clip-path: var(--slice-7); }
    53% { clip-path: var(--slice-2); }
    54%, 70% { clip-path: var(--slice-0); }
    
    71% { clip-path: var(--slice-8); }
    72% { clip-path: var(--slice-3); }
    73% { clip-path: var(--slice-9); }
    74% { clip-path: var(--slice-1); }
    75% { clip-path: var(--slice-5); }
    76%, 100% { clip-path: var(--slice-0); }
}

@keyframes name-border-glitch-1 {
    0%, 10% { text-shadow: none; }
    11% { text-shadow: -2px 0px 0px #ff0000, 2px 0px 0px #00e6f6; }
    12% { text-shadow: none; }
    13% { text-shadow: 0px -1px 0px #ff0000, 0px 1px 0px #00e6f6; }
    14%, 25% { text-shadow: none; }
    
    26% { text-shadow: -3px 2px 0px #ff0000, 3px -2px 0px #00e6f6; }
    27% { text-shadow: 4px -1px 0px #ff0000, -4px 1px 0px #00e6f6; }
    28% { text-shadow: -2px 3px 0px #ff0000, 2px -3px 0px #00e6f6; }
    29%, 45% { text-shadow: none; }
    
    46% { text-shadow: -6px -4px 0px #ff0000, 6px 4px 0px #00e6f6, 3px 2px 0px #00ffb1; }
    47% { text-shadow: 8px 3px 0px #ff0000, -8px -3px 0px #00e6f6, -4px 1px 0px #00ffb1; }
    48% { text-shadow: -4px 5px 0px #ff0000, 4px -5px 0px #00e6f6, 2px -3px 0px #00ffb1; }
    49% { text-shadow: 5px -3px 0px #ff0000, -5px 3px 0px #00e6f6, -2px 4px 0px #00ffb1; }
    50% { text-shadow: -7px 2px 0px #ff0000, 7px -2px 0px #00e6f6, 4px 5px 0px #00ffb1; }
    51% { text-shadow: 3px -6px 0px #ff0000, -3px 6px 0px #00e6f6, 5px 2px 0px #00ffb1; }
    52% { text-shadow: 9px 4px 0px #ff0000, -9px -4px 0px #00e6f6, -2px -5px 0px #00ffb1; }
    53% { text-shadow: -5px 7px 0px #ff0000, 5px -7px 0px #00e6f6, 6px 1px 0px #00ffb1; }
    54%, 70% { text-shadow: none; }
    
    71% { text-shadow: -10px -5px 0px #ff0000, 10px 5px 0px #00e6f6, 4px 3px 0px #00ffb1; }
    72% { text-shadow: 12px 6px 0px #ff0000, -12px -6px 0px #00e6f6, -3px 4px 0px #00ffb1; }
    73% { text-shadow: -8px 8px 0px #ff0000, 8px -8px 0px #00e6f6, 5px -2px 0px #00ffb1; }
    74% { text-shadow: 7px -7px 0px #ff0000, -7px 7px 0px #00e6f6, 2px 6px 0px #00ffb1; }
    75% { text-shadow: -11px 3px 0px #ff0000, 11px -3px 0px #00e6f6, 6px 4px 0px #00ffb1; }
    76%, 100% { text-shadow: none; display: none; }
}

/* Name Glitch Pattern 2 - PAUL */
@keyframes name-glitch-2 {
    0%, 15% { clip-path: var(--slice-0); }
    16% { clip-path: var(--slice-2); }
    17%, 30% { clip-path: var(--slice-0); }
    
    31% { clip-path: var(--slice-4); }
    32% { clip-path: var(--slice-1); }
    33%, 50% { clip-path: var(--slice-0); }
    
    51% { clip-path: var(--slice-3); }
    52% { clip-path: var(--slice-7); }
    53% { clip-path: var(--slice-5); }
    54% { clip-path: var(--slice-8); }
    55% { clip-path: var(--slice-2); }
    56%, 75% { clip-path: var(--slice-0); }
    
    76% { clip-path: var(--slice-9); }
    77% { clip-path: var(--slice-6); }
    78%, 100% { clip-path: var(--slice-0); }
}

@keyframes name-border-glitch-2 {
    0%, 15% { text-shadow: none; }
    16% { text-shadow: 1px -2px 0px #ff0000, -1px 2px 0px #00e6f6; }
    17%, 30% { text-shadow: none; }
    
    31% { text-shadow: -4px 3px 0px #ff0000, 4px -3px 0px #00e6f6; }
    32% { text-shadow: 3px -2px 0px #ff0000, -3px 2px 0px #00e6f6; }
    33%, 50% { text-shadow: none; }
    
    51% { text-shadow: -7px 5px 0px #ff0000, 7px -5px 0px #00e6f6, 3px 2px 0px #00ffb1; }
    52% { text-shadow: 6px -4px 0px #ff0000, -6px 4px 0px #00e6f6, -2px 3px 0px #00ffb1; }
    53% { text-shadow: -3px 6px 0px #ff0000, 3px -6px 0px #00e6f6, 4px -1px 0px #00ffb1; }
    54% { text-shadow: 8px -3px 0px #ff0000, -8px 3px 0px #00e6f6, 1px 4px 0px #00ffb1; }
    55% { text-shadow: -5px 4px 0px #ff0000, 5px -4px 0px #00e6f6, 3px 5px 0px #00ffb1; }
    56%, 75% { text-shadow: none; }
    
    76% { text-shadow: -9px 7px 0px #ff0000, 9px -7px 0px #00e6f6, 4px 3px 0px #00ffb1; }
    77% { text-shadow: 10px -6px 0px #ff0000, -10px 6px 0px #00e6f6, -3px 5px 0px #00ffb1; }
    78%, 100% { text-shadow: none; display: none; }
}

/* Name Glitch Pattern 3 - BENNY */
@keyframes name-glitch-3 {
    0%, 20% { clip-path: var(--slice-0); }
    21% { clip-path: var(--slice-1); }
    22%, 35% { clip-path: var(--slice-0); }
    
    36% { clip-path: var(--slice-6); }
    37% { clip-path: var(--slice-3); }
    38% { clip-path: var(--slice-9); }
    39%, 55% { clip-path: var(--slice-0); }
    
    56% { clip-path: var(--slice-4); }
    57% { clip-path: var(--slice-2); }
    58% { clip-path: var(--slice-7); }
    59% { clip-path: var(--slice-8); }
    60% { clip-path: var(--slice-5); }
    61%, 80% { clip-path: var(--slice-0); }
    
    81% { clip-path: var(--slice-1); }
    82% { clip-path: var(--slice-6); }
    83%, 100% { clip-path: var(--slice-0); }
}

@keyframes name-border-glitch-3 {
    0%, 20% { text-shadow: none; }
    21% { text-shadow: -3px 1px 0px #ff0000, 3px -1px 0px #00e6f6; }
    22%, 35% { text-shadow: none; }
    
    36% { text-shadow: 5px -3px 0px #ff0000, -5px 3px 0px #00e6f6; }
    37% { text-shadow: -4px 4px 0px #ff0000, 4px -4px 0px #00e6f6; }
    38% { text-shadow: 6px -5px 0px #ff0000, -6px 5px 0px #00e6f6; }   
    39%, 55% { text-shadow: none; }
    
    56% { text-shadow: -8px 6px 0px #ff0000, 8px -6px 0px #00e6f6, 3px 3px 0px #00ffb1; }
    57% { text-shadow: 7px -4px 0px #ff0000, -7px 4px 0px #00e6f6, -2px 5px 0px #00ffb1; }
    58% { text-shadow: -5px 7px 0px #ff0000, 5px -7px 0px #00e6f6, 4px -2px 0px #00ffb1; }
    59% { text-shadow: 9px -2px 0px #ff0000, -9px 2px 0px #00e6f6, 1px 6px 0px #00ffb1; }
    60% { text-shadow: -6px 5px 0px #ff0000, 6px -5px 0px #00e6f6, 5px 3px 0px #00ffb1; }
    61%, 80% { text-shadow: none; }
    
    81% { text-shadow: -11px 8px 0px #ff0000, 11px -8px 0px #00e6f6, 4px 4px 0px #00ffb1; }
    82% { text-shadow: 10px -7px 0px #ff0000, -10px 7px 0px #00e6f6, -3px 6px 0px #00ffb1; }
    83%, 100% { text-shadow: none; display: none; }
}

.container.signal-lost .connect-container #revealMessage {
    position: relative;
}

/* Add this to your CSS file */

/* Container glitch effects when signal is lost */
/* .container.signal-lost .connect-container {
    animation: container-corruption 3s infinite;
    position: relative;
    overflow: hidden;
} */

/* Full screen scanlines */
.container.signal-lost::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 0, 0, 0.03) 2px,
        rgba(255, 0, 0, 0.03) 4px,
        transparent 4px
    );
    animation: scanlines 0.1s infinite linear;
    pointer-events: none;
    z-index: 100;
}

.container.signal-lost::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: 
        linear-gradient(90deg, rgba(255,0,0,0.02) 50%, transparent 50%),
        linear-gradient(90deg, rgba(0,255,0,0.02) 50%, transparent 50%),
        linear-gradient(90deg, rgba(0,0,255,0.02) 50%, transparent 50%);
    background-size: 3px 100%, 6px 100%, 9px 100%;
    animation: rgb-shift 0.2s infinite;
    pointer-events: none;
    z-index: 101;
}

/* Random distortion patches */
.container.signal-lost .connect-container #revealMessage::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 0, 0, 0.1);
    animation: glitch-patch-1 1.7s infinite;
    z-index: 5;
}

.container.signal-lost .connect-container #revealMessage::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 25px;
    background: rgba(0, 255, 255, 0.08);
    animation: glitch-patch-2 2.3s infinite;
    z-index: 5;
}

/* Main container corruption animation - without position changes */
@keyframes container-corruption {
    0%, 90% { 
        transform: scale(1);
        filter: hue-rotate(0deg) contrast(1);
    }
    1% { 
        transform: scale(1.001, 0.999) skewX(0.1deg);
        filter: hue-rotate(1deg) contrast(1.02);
    }
    3% { 
        transform: scale(0.999, 1.001) skewX(-0.1deg);
        filter: hue-rotate(-1deg) contrast(0.98);
    }
    7% { 
        transform: scale(1.002, 0.998) skewY(0.05deg);
        filter: hue-rotate(2deg) contrast(1.01);
    }
    11% { 
        transform: scale(0.998, 1.002);
        filter: hue-rotate(0deg) contrast(1);
    }
    23% { 
        transform: scale(1.001, 0.999) skewX(0.2deg);
        filter: hue-rotate(-1deg) contrast(1.03);
    }
    31% { 
        transform: scale(0.999, 1.001) skewY(-0.1deg);
        filter: hue-rotate(1deg) contrast(0.97);
    }
    47% { 
        transform: scale(1.002, 0.998);
        filter: hue-rotate(0deg) contrast(1.01);
    }
    53% { 
        transform: scale(0.998, 1.002) skewX(-0.15deg);
        filter: hue-rotate(2deg) contrast(0.99);
    }
    67% { 
        transform: scale(1.001, 0.999) skewY(0.08deg);
        filter: hue-rotate(-1deg) contrast(1.02);
    }
    79% { 
        transform: scale(0.999, 1.001);
        filter: hue-rotate(0deg) contrast(1);
    }
}

/* Scanlines effect */
@keyframes scanlines {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* RGB color separation */
@keyframes rgb-shift {
    0%, 80% { 
        background-position: 0px 0px, 0px 0px, 0px 0px;
        opacity: 0;
    }
    5% { 
        background-position: 1px 0px, -1px 0px, 0px 0px;
        opacity: 0.5;
    }
    15% { 
        background-position: -1px 0px, 1px 0px, 0px 0px;
        opacity: 0.3;
    }
    25% { 
        background-position: 0px 0px, 0px 0px, 1px 0px;
        opacity: 0.4;
    }
    35% { 
        background-position: 1px 0px, 0px 0px, -1px 0px;
        opacity: 0.2;
    }
}

/* Random glitch patches */
@keyframes glitch-patch-1 {
    0%, 85% { 
        top: 20%;
        left: 10%;
        opacity: 0;
        transform: scale(1);
    }
    2% { 
        opacity: 0.3;
        transform: scale(1.2, 0.8);
    }
    4% { 
        opacity: 0;
        transform: scale(1);
    }
    20% { 
        top: 60%;
        left: 70%;
        opacity: 0.4;
        transform: scale(0.8, 1.3);
    }
    22% { 
        opacity: 0;
        transform: scale(1);
    }
    45% { 
        top: 80%;
        left: 30%;
        opacity: 0.2;
        transform: scale(1.5, 0.6);
    }
    47% { 
        opacity: 0;
        transform: scale(1);
    }
    70% { 
        top: 40%;
        left: 80%;
        opacity: 0.3;
        transform: scale(0.9, 1.4);
    }
    72% { 
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes glitch-patch-2 {
    0%, 87% { 
        top: 30%;
        right: 15%;
        opacity: 0;
        transform: scale(1) rotate(0deg);
    }
    3% { 
        opacity: 0.2;
        transform: scale(1.3, 0.7) rotate(1deg);
    }
    5% { 
        opacity: 0;
        transform: scale(1) rotate(0deg);
    }
    28% { 
        top: 70%;
        right: 60%;
        opacity: 0.3;
        transform: scale(0.7, 1.4) rotate(-1deg);
    }
    30% { 
        opacity: 0;
        transform: scale(1) rotate(0deg);
    }
    52% { 
        top: 15%;
        right: 40%;
        opacity: 0.25;
        transform: scale(1.4, 0.8) rotate(0.5deg);
    }
    54% { 
        opacity: 0;
        transform: scale(1) rotate(0deg);
    }
    76% { 
        top: 85%;
        right: 20%;
        opacity: 0.2;
        transform: scale(0.9, 1.2) rotate(-0.5deg);
    }
    78% { 
        opacity: 0;
        transform: scale(1) rotate(0deg);
    }
}

/* Additional subtle background corruption */
/* .container.signal-lost .connect-container {
    background: 
        linear-gradient(45deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,1) 100%),
        repeating-conic-gradient(from 0deg at 50% 50%, 
            transparent, transparent 89deg, 
            rgba(255,0,0,0.005) 89deg, rgba(255,0,0,0.005) 91deg);
    background-size: 100% 100%, 200px 200px;
    animation: container-corruption 3s infinite, bg-flicker 0.3s infinite;
} */

@keyframes bg-flicker {
    0%, 96% { 
        background-color: rgba(255, 255, 255, 1);
    }
    1% { 
        background-color: rgba(255, 250, 250, 0.99);
    }
    3% { 
        background-color: rgba(250, 255, 250, 0.995);
    }
    5% { 
        background-color: rgba(250, 250, 255, 0.99);
    }
}
/* Text distortion effects for reveal message */
#revealMessage p {
    position: relative;
    overflow: hidden;
    animation: blink 5s infinite;
}
#revealMessage a{
    animation: a-blink 4.8s infinite;
}
@keyframes a-blink {
    0%, 35%{
        opacity: 1;
    }
    36%{
        opacity: 0.5;
    }
    37%, 49%{
        opacity: 1;
    }
    50%, 59%{
        opacity: 0.7;
    }
    60%{
        opacity: 0.2;
    }
    62%{
        opacity: 0.8;
    }
    63%, 96%{
        opacity: 1;
    }
    97%{
        opacity: 0.5;
    }
    98%{
        opacity: 1;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0%, 24%{
        opacity: 1;
    }
    25%{
        opacity: 0.5;
    }
    26%, 40%{
        opacity: 1;
    }
    41%{
        opacity: 0.2;
    }
    42%{
        opacity: 0.7;
    }
    43%{
        opacity: 0.4;
    }
    44%, 74%{
        opacity: 1;
    }
    75% {
        opacity: 0;
        }
   76%, 96% {
        opacity: 1;
        }
    97%{
        opacity: 0.5;
    }
    98%{
        opacity: 1;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Character-level distortion for individual letters */
#revealMessage p span.corrupt-char {
    display: inline-block;
    position: relative;
    animation: char-glitch 2s infinite;
}

#revealMessage p span.corrupt-char:nth-child(2n) {
    animation-delay: 0.3s;
}

#revealMessage p span.corrupt-char:nth-child(3n) {
    animation-delay: 0.7s;
}

@keyframes char-glitch {
    0%, 94% { 
        transform: translate(0);
        text-shadow: none;
    }
    2% { 
        transform: translate(1px, -1px);
        text-shadow: -1px 1px 0px #ff0000;
    }
    4% { 
        transform: translate(-1px, 1px);
        text-shadow: 1px -1px 0px #00ff00;
    }
    6% { 
        transform: translate(0);
        text-shadow: none;
    }
}

/* Text scrambling effect */
#revealMessage::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 1px,
        rgba(255, 0, 0, 0.05) 1px,
        rgba(255, 0, 0, 0.05) 2px
    );
    animation: text-scan 0.2s infinite;
    pointer-events: none;
}

@keyframes text-scan {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 0.3; }
    100% { transform: translateX(100%); opacity: 0; }
}