* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    background: radial-gradient(circle at 30% 70%, rgba(120, 0, 0, 0.2), transparent),
                radial-gradient(circle at 70% 30%, rgba(100, 0, 0, 0.15), transparent),
                #000000;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
}

.container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(150, 0, 0, 0.3), transparent);
    animation: randomFlicker1 3.7s infinite ease-in-out, randomFlicker2 2.3s infinite ease-in-out, randomFlicker3 4.1s infinite ease-in-out;
    pointer-events: none;
}

.container::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(120,0,0,0.1) 1px, transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 1;
}

@keyframes randomFlicker1 {
    0% { opacity: 0.3; }
    17% { opacity: 0.5; }
    29% { opacity: 0.2; }
    43% { opacity: 0.6; }
    58% { opacity: 0.35; }
    71% { opacity: 0.55; }
    86% { opacity: 0.25; }
    100% { opacity: 0.3; }
}

@keyframes randomFlicker2 {
    0% { opacity: 0.4; }
    23% { opacity: 0.2; }
    41% { opacity: 0.6; }
    67% { opacity: 0.3; }
    89% { opacity: 0.5; }
    100% { opacity: 0.4; }
}

@keyframes randomFlicker3 {
    0% { opacity: 0.25; }
    19% { opacity: 0.6; }
    38% { opacity: 0.35; }
    52% { opacity: 0.2; }
    73% { opacity: 0.55; }
    91% { opacity: 0.4; }
    100% { opacity: 0.25; }
}



        .cryptic-text {
            color: #fff;
            text-align: center;
            margin: 0;
            padding: 0;
            opacity: 0;
            position: absolute;
            transform-style: preserve-3d;
            white-space: nowrap;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 3px;
            z-index: 1;
            perspective: 1000px;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            pointer-events: none;
            cursor: default;
            will-change: transform, opacity, filter;
        }

        .cryptic-text.show {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0px);
            animation: flyIn 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        
        .cryptic-text.hide {
            animation: flyAway 2s cubic-bezier(0.7, 0, 0.84, 0) forwards;
        }

        @keyframes flyIn {
            0% {
                opacity: 0;
                transform: translate3d(0, 0, -500px) scale(0.3);
                filter: blur(10px);
            }
            50% {
                opacity: 0.5;
                filter: blur(5px);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
                filter: blur(0px);
            }
        }

        .cryptic-text.fly-away-1 {
            animation: flyAway1 2.5s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
        }
        
        .cryptic-text.fly-away-2 {
            animation: flyAway2 2.5s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
        }
        
        .cryptic-text.fly-away-3 {
            animation: flyAway3 2.5s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
        }
        
        .cryptic-text.fly-away-4 {
            animation: flyAway4 2.5s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
        }
        
        .cryptic-text.fly-away-5 {
            animation: flyAway5 2.5s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
        }
        
        .cryptic-text.fly-away-6 {
            animation: flyAway6 2.5s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
        }

        @keyframes flyAway1 {
            0% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
                filter: blur(0px);
            }
            50% {
                opacity: 0.5;
                filter: blur(5px);
            }
            100% {
                opacity: 0;
                transform: translate3d(0, 0, -500px) scale(0.3);
                filter: blur(10px);
            }
        }

        @keyframes flyAway2 {
            0% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
                filter: blur(0px);
            }
            50% {
                opacity: 0.5;
                filter: blur(5px);
            }
            100% {
                opacity: 0;
                transform: translate3d(0, 0, -500px) scale(0.3);
                filter: blur(10px);
            }
        }

        @keyframes flyAway3 {
            0% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
                filter: blur(0px);
            }
            50% {
                opacity: 0.5;
                filter: blur(5px);
            }
            100% {
                opacity: 0;
                transform: translate3d(0, 0, -500px) scale(0.3);
                filter: blur(10px);
            }
        }

        @keyframes flyAway4 {
            0% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
                filter: blur(0px);
            }
            50% {
                opacity: 0.5;
                filter: blur(5px);
            }
            100% {
                opacity: 0;
                transform: translate3d(0, 0, -500px) scale(0.3);
                filter: blur(10px);
            }
        }

        @keyframes flyAway5 {
            0% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
                filter: blur(0px);
            }
            50% {
                opacity: 0.5;
                filter: blur(5px);
            }
            100% {
                opacity: 0;
                transform: translate3d(0, 0, -500px) scale(0.3);
                filter: blur(10px);
            }
        }

        @keyframes flyAway6 {
            0% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
                filter: blur(0px);
            }
            50% {
                opacity: 0.5;
                filter: blur(5px);
            }
            100% {
                opacity: 0;
                transform: translate3d(0, 0, -500px) scale(0.3);
                filter: blur(10px);
            }
        }

        @keyframes flyAway {
            0% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
                filter: blur(0px);
            }
            50% {
                opacity: 0.5;
                filter: blur(5px);
            }
            100% {
                opacity: 0;
                transform: translate3d(0, 0, -500px) scale(0.3);
                filter: blur(10px);
            }
        }/* Text size variations */
.text-1 {
    font-family: 'Courier New', monospace;
    font-size: 64px;
    color: #ff0000;
}

.text-2 {
    font-family: 'Times New Roman', serif;
    font-size: 32px;
    color: #8B0000;
}

.text-3 {
    font-family: 'Arial', sans-serif;
    font-size: 48px;
    color: #B22222;
    letter-spacing: 12px;
}

.text-4 {
    font-family: 'Georgia', serif;
    font-size: 28px;
    color: #DC143C;
}

.text-5 {
    font-family: 'Verdana', sans-serif;
    font-size: 72px;
    color: #A52A2A;
}

.text-6 {
    font-family: 'Courier New', monospace;
    font-size: 40px;
    color: #8B0000;
}

.text-7 {
    font-family: 'Times New Roman', serif;
    font-size: 56px;
    color: #CD5C5C;
}

.text-8 {
    font-family: 'Arial', sans-serif;
    font-size: 36px;
    color: #990000;
}

.text-9 {
    font-family: 'Georgia', serif;
    font-size: 52px;
    color: #800000;
}

.text-10 {
    font-family: 'Verdana', sans-serif;
    font-size: 44px;
    color: #B30000;
}