html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.scene {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.glitch {
    position: relative;
    width: min(70vw, 700px);
    animation: base-glitch 4.2s infinite steps(1);
}

.glitch img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.glitch::before,
.glitch::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("logo.png") center / contain no-repeat;
    pointer-events: none;
    opacity: 0.9;
    mix-blend-mode: screen;
}

.glitch::before {
    transform: translate(2px, 0);
    filter: drop-shadow(-2px 0 0 rgba(255, 0, 80, 0.75));
    animation: rgb-shift-1 2.6s infinite steps(1);
}

.glitch::after {
    transform: translate(-2px, 0);
    filter: drop-shadow(2px 0 0 rgba(0, 180, 255, 0.75));
    animation: rgb-shift-2 3.1s infinite steps(1);
}

.noise-lines,
.noise-lines::before,
.noise-lines::after {
    position: absolute;
    inset: -8% -4%;
    pointer-events: none;
}

.noise-lines {
    overflow: hidden;
    mix-blend-mode: screen;
    opacity: 0.22;
}

.noise-lines::before,
.noise-lines::after {
    content: "";
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0px,
            rgba(255, 255, 255, 0) 2px,
            rgba(255, 255, 255, 0.06) 3px,
            rgba(255, 255, 255, 0) 4px
        );
}

.noise-lines::before {
    animation: scanlines-1 7s linear infinite;
}

.noise-lines::after {
    opacity: 0.35;
    transform: translateY(-100%);
    animation: scanlines-2 4.5s linear infinite;
}

.glitch-slices {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.glitch-slices span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 14%;
    background: url("logo.png") center / contain no-repeat;
    opacity: 0;
    mix-blend-mode: screen;
}

.glitch-slices span:nth-child(1) {
    top: 10%;
    animation: slice-1 3.8s infinite steps(1);
}

.glitch-slices span:nth-child(2) {
    top: 34%;
    animation: slice-2 4.7s infinite steps(1);
}

.glitch-slices span:nth-child(3) {
    top: 58%;
    animation: slice-3 5.3s infinite steps(1);
}

.glitch-slices span:nth-child(4) {
    top: 78%;
    animation: slice-4 4.1s infinite steps(1);
}

.flicker {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 60%);
    mix-blend-mode: screen;
    animation: flicker 0.18s infinite alternate;
    opacity: 0.18;
}

@keyframes base-glitch {
    0%, 100% {
        transform: translate(0, 0) skew(0deg);
        filter: brightness(1) contrast(1.04);
    }
    6% {
        transform: translate(-1px, 1px) skew(0.15deg);
    }
    7% {
        transform: translate(2px, -1px) skew(-0.2deg);
    }
    8% {
        transform: translate(0, 0) skew(0deg);
    }
    42% {
        transform: translate(0, 0);
    }
    43% {
        transform: translate(3px, 0) skew(0.3deg);
        filter: brightness(1.1) contrast(1.2);
    }
    44% {
        transform: translate(-2px, 1px) skew(-0.3deg);
    }
    45% {
        transform: translate(0, 0) skew(0deg);
        filter: brightness(1) contrast(1.04);
    }
    77% {
        transform: translate(0, 0);
    }
    78% {
        transform: translate(-1px, -2px);
    }
    79% {
        transform: translate(1px, 1px);
    }
    80% {
        transform: translate(0, 0);
    }
}

@keyframes rgb-shift-1 {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }
    9% {
        opacity: 0.8;
        transform: translate(3px, -1px);
    }
    10% {
        opacity: 0;
        transform: translate(0, 0);
    }
    44% {
        opacity: 0;
    }
    45% {
        opacity: 0.9;
        transform: translate(5px, 1px);
    }
    46% {
        opacity: 0.15;
        transform: translate(-1px, 0);
    }
    47% {
        opacity: 0;
        transform: translate(0, 0);
    }
    79% {
        opacity: 0.8;
        transform: translate(2px, 0);
    }
    80% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

@keyframes rgb-shift-2 {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }
    11% {
        opacity: 0.75;
        transform: translate(-4px, 1px);
    }
    12% {
        opacity: 0;
        transform: translate(0, 0);
    }
    46% {
        opacity: 0.85;
        transform: translate(-6px, 0);
    }
    47% {
        opacity: 0.2;
        transform: translate(2px, -1px);
    }
    48% {
        opacity: 0;
        transform: translate(0, 0);
    }
    81% {
        opacity: 0.7;
        transform: translate(-3px, -1px);
    }
    82% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

@keyframes scanlines-1 {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

@keyframes scanlines-2 {
    0% {
        transform: translateY(-120%);
    }
    100% {
        transform: translateY(120%);
    }
}

@keyframes slice-1 {
    0%, 100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
    }
    13% {
        opacity: 0.9;
        transform: translateX(12px);
        clip-path: inset(0 0 35% 0);
    }
    14% {
        opacity: 0;
        transform: translateX(0);
    }
}

@keyframes slice-2 {
    0%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    49% {
        opacity: 0.85;
        transform: translateX(-18px);
        clip-path: inset(20% 0 30% 0);
    }
    50% {
        opacity: 0.2;
        transform: translateX(8px);
    }
    51% {
        opacity: 0;
        transform: translateX(0);
    }
}

@keyframes slice-3 {
    0%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    67% {
        opacity: 0.75;
        transform: translateX(10px);
        clip-path: inset(35% 0 5% 0);
    }
    68% {
        opacity: 0;
        transform: translateX(0);
    }
}

@keyframes slice-4 {
    0%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    82% {
        opacity: 0.9;
        transform: translateX(-14px);
        clip-path: inset(15% 0 40% 0);
    }
    83% {
        opacity: 0;
        transform: translateX(0);
    }
}

@keyframes flicker {
    0% {
        opacity: 0.08;
    }
    100% {
        opacity: 0.2;
    }
}