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

body {
    color: #ccc;
    background: #111;
    font-family: sans-serif;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/Enigma.png);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/Enigma.png);
    background-size: cover;
            background-position: center;
            z-index: 0;
            animation: bgGlitch 3s step-end infinite, bgMovement 4s step-end infinite, bgOpacity 2s step-end infinite;
}

section {
    padding: 20px;
    height: 100%;
    position: relative;
    z-index: 1;
}

.hero-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.environment {
    position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
    opacity: 1;
    filter: blur(5px);
}

.hero {
    font-size: clamp(40px, 10vw, 100px);
    line-height: 1;
    display: inline-block;
    color: #fff;
    z-index: 2;
    letter-spacing: 10px;
    filter: drop-shadow(0 1px 3px);
    background: transparent;
    border: none;
    padding: 20px 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.hero:hover {
    transform: scale(1.05);
}

.hero:active {
    transform: scale(0.98);
}

.layers {
    position: relative;
}

.layers::before,
.layers::after {
    content: attr(data-text);
    position: absolute;
    width: 110%;
    z-index: -1;
    left: 0;
}

.layers::before {
    top: 10px;
    left: 15px;
    color: #e0287d;
}

.layers::after {
    top: 5px;
    left: -10px;
    color: #1bc7fb;
}

.glitch span {
    animation: paths 5s step-end infinite;
}

.glitch::before {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
        font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
        font 7s step-end infinite, movement 8s step-end infinite;
}

@keyframes paths {
    0% {
        clip-path: polygon(
            0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%,
            91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%,
            41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%,
            19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%,
            23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%,
            73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%
        );
    }
    5% {
        clip-path: polygon(
            0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%,
            11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%,
            18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%,
            68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%,
            25% 39%, 15% 39%, 15% 88%, 52% 88%
        );
    }
    30% {
        clip-path: polygon(
            0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%,
            97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%,
            17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%,
            38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%,
            68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%
        );
    }
    45% {
        clip-path: polygon(
            0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%,
            55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%,
            5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%,
            5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%,
            87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%,
            4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%,
            15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%,
            97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%,
            17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%,
            52% 83%, 68% 83%
        );
    }
    76% {
        clip-path: polygon(
            0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%,
            77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%,
            17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%,
            90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%,
            50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%,
            63% 14%
        );
    }
    90% {
        clip-path: polygon(
            0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%,
            10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%,
            16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%,
            5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%,
            80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%,
            38% 62%
        );
    }
    1%, 7%, 33%, 47%, 78%, 93% {
        clip-path: none;
    }
}

@keyframes movement {
    0% {
        top: 0px;
        left: -20px;
    }
    15% {
        top: 10px;
        left: 10px;
    }
    60% {
        top: 5px;
        left: -10px;
    }
    75% {
        top: -5px;
        left: 20px;
    }
    100% {
        top: 10px;
        left: 5px;
    }
}

@keyframes opacity {
    0% {
        opacity: 0.1;
    }
    5% {
        opacity: 0.7;
    }
    30% {
        opacity: 0.4;
    }
    45% {
        opacity: 0.6;
    }
    76% {
        opacity: 0.4;
    }
    90% {
        opacity: 0.8;
    }
    1%, 7%, 33%, 47%, 78%, 93% {
        opacity: 0;
    }
}

@keyframes font {
    0% {
        font-weight: 100;
        color: #e0287d;
        filter: blur(3px);
    }
    20% {
        font-weight: 500;
        color: #fff;
        filter: blur(0);
    }
    50% {
        font-weight: 300;
        color: #1bc7fb;
        filter: blur(2px);
    }
    60% {
        font-weight: 700;
        color: #fff;
        filter: blur(0);
    }
    90% {
        font-weight: 500;
        color: #e0287d;
        filter: blur(6px);
    }
}

@keyframes bgGlitch {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
        filter: hue-rotate(0deg);
    }
    3% {
        clip-path: polygon(0% 60%, 100% 60%, 100% 75%, 0% 75%);
        filter: hue-rotate(90deg);
    }
    8% {
        clip-path: polygon(0% 15%, 100% 15%, 100% 45%, 0% 45%);
        filter: hue-rotate(180deg);
    }
    12% {
        clip-path: polygon(0% 80%, 100% 80%, 100% 95%, 0% 95%);
        filter: hue-rotate(270deg);
    }
    18% {
        clip-path: polygon(0% 5%, 100% 5%, 100% 20%, 0% 20%);
        filter: hue-rotate(45deg);
    }
    25% {
        clip-path: polygon(0% 50%, 100% 50%, 100% 70%, 0% 70%);
        filter: hue-rotate(135deg);
    }
    32% {
        clip-path: polygon(0% 25%, 100% 25%, 100% 40%, 0% 40%);
        filter: hue-rotate(225deg);
    }
    40% {
        clip-path: polygon(0% 70%, 100% 70%, 100% 85%, 0% 85%);
        filter: hue-rotate(315deg);
    }
    48% {
        clip-path: polygon(0% 10%, 100% 10%, 100% 35%, 0% 35%);
        filter: hue-rotate(60deg);
    }
    55% {
        clip-path: polygon(0% 85%, 100% 85%, 100% 100%, 0% 100%);
        filter: hue-rotate(150deg);
    }
    65% {
        clip-path: polygon(0% 40%, 100% 40%, 100% 60%, 0% 60%);
        filter: hue-rotate(240deg);
    }
    75% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 15%);
        filter: hue-rotate(330deg);
    }
    85% {
        clip-path: polygon(0% 55%, 100% 55%, 100% 80%, 0% 80%);
        filter: hue-rotate(120deg);
    }
    95% {
        clip-path: polygon(0% 20%, 100% 20%, 100% 50%, 0% 50%);
        filter: hue-rotate(200deg);
    }
}

@keyframes bgMovement {
    0% {
        transform: translate(0, 0) scale(1);
    }
    8% {
        transform: translate(-15px, 10px) scale(1.02);
    }
    18% {
        transform: translate(20px, -8px) scale(0.98);
    }
    28% {
        transform: translate(-8px, -15px) scale(1.01);
    }
    38% {
        transform: translate(12px, 18px) scale(0.99);
    }
    48% {
        transform: translate(-18px, 5px) scale(1.03);
    }
    58% {
        transform: translate(5px, -20px) scale(0.97);
    }
    68% {
        transform: translate(-10px, 12px) scale(1.01);
    }
    78% {
        transform: translate(15px, -5px) scale(0.99);
    }
    88% {
        transform: translate(-5px, -10px) scale(1.02);
    }
    98% {
        transform: translate(8px, 15px) scale(0.98);
    }
}

@keyframes bgOpacity {
    0% {
        opacity: 0.3;
    }
    5% {
        opacity: 0.8;
    }
    12% {
        opacity: 0.2;
    }
    20% {
        opacity: 0.6;
    }
    28% {
        opacity: 0.4;
    }
    35% {
        opacity: 0.9;
    }
    45% {
        opacity: 0.3;
    }
    55% {
        opacity: 0.7;
    }
    65% {
        opacity: 0.5;
    }
    75% {
        opacity: 0.8;
    }
    85% {
        opacity: 0.4;
    }
    95% {
        opacity: 0.6;
    }
}