/* ---- Font und Grundeinstellungen ---- */
:root {
    /* Zentrale Farben – hier lässt sich der Rotton der ganzen Seite anpassen */
    --glitch-red-a: #A60000;
    --glitch-red-b: #ff2a2a;
    --glitch-red-c: #f00;
    --bg: #111;
}

@font-face {
    font-family: 'Hacked';
    src: url('/fonts/HACKED.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, h1, h2, h3 {
    font-family: 'Hacked', monospace, sans-serif;
    margin: 0;
    background: var(--bg); /* Etwas dunkler für mehr Kontrast zum Glitch */
    color: #fff;
    overflow: hidden; /* Verhindert Scrollbalken durch Glitch-Schatten */
}

/* Wrapper: vertikal zentriert */
.glitch-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--bg);
    position: relative;
}

/* Cinematischer Scanline-Overlay – mit gelegentlichem "Tracking-Error"-Versatz statt starrem Raster */
.glitch-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0) 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    z-index: 10;
    animation: scanline-roll 6.1s steps(1, end) infinite;
}

/* Main-Glitch Base */
.glitch {
    position: relative;
    display: inline-block;
    font-size: clamp(48px, 12vw, 80px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 5px;
    z-index: 1;

    /* roter metallischer Gradient */
    background: linear-gradient(100deg, var(--glitch-red-a) 0%, var(--glitch-red-b) 50%, var(--glitch-red-c) 100%);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* für Firefox */

    animation:
        shift 4.6s ease-in-out infinite alternate,
        shine 5.3s linear infinite,
        shatter 7.4s steps(1, end) infinite;
}

.glitch.small-text {
    font-size: clamp(14px, 2.5vw, 20px);
    letter-spacing: 1px;
    margin-top: 16px;
    line-height: 1.2;
    /* Subline etwas ruhiger als die große 404 – shatter-Momente seltener */
    animation:
        shift 4.6s ease-in-out infinite alternate,
        shine 5.3s linear infinite,
        shatter 11.2s steps(1, end) infinite;
}

/* --- Glitch layers (RGB-Aufspaltung) --- */
.glitch::before,
.glitch::after {
    content: attr(data-glitch);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    color: inherit;
    background: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    pointer-events: none;
    overflow: hidden;
}

/* CYAN / BLAU-SCHICHT */
.glitch::before {
    z-index: -1;
    animation:
        glitch-cyan 2.79s steps(1, end) infinite,
        glitch-tear-a 1.93s steps(1, end) infinite;
}

/* MAGENTA / BLAU-SCHICHT */
.glitch::after {
    z-index: -2;
    animation:
        glitch-magenta 3.41s steps(1, end) infinite,
        glitch-tear-b 2.62s steps(1, end) infinite;
}

/* Subline: gleiche Animationen, aber phasenverschoben (negativer delay),
   damit sie nicht synchron zur großen 404 glitcht */
.glitch.small-text::before {
    animation-delay: -1.1s, -0.6s;
}
.glitch.small-text::after {
    animation-delay: -1.8s, -1.2s;
}


/* --- Pixel-Tearing-Fragmente: 3 unabhängige Schichten, die ausbrechen und zurückschnellen --- */
.glitch-pixels,
.glitch-pixels::before,
.glitch-pixels::after {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
}

.glitch-pixels {
    z-index: 5;
    background:
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(0, 255, 255, .9) 18px 21px),
        repeating-linear-gradient(4deg, transparent 0 27px, rgba(255, 0, 255, .85) 27px 30px);
    animation: shard-a 2.87s steps(1, end) infinite;
}

.glitch-pixels::before {
    content: "";
    z-index: 6;
    background: repeating-linear-gradient(63deg, transparent 0 36px, rgba(255, 255, 255, .95) 36px 40px);
    animation: shard-b 3.53s steps(1, end) infinite;
}

.glitch-pixels::after {
    content: "";
    z-index: 4;
    background: repeating-linear-gradient(-41deg, transparent 0 48px, rgba(255, 40, 60, .85) 48px 54px);
    animation: shard-c 4.19s steps(1, end) infinite;
}


/* ---------------------------------------------------
   ANIMATIONEN
--------------------------------------------------- */

@keyframes scanline-roll {
    0%, 6%, 9%, 52%, 55%, 100% { transform: translateY(0); }
    7% { transform: translateY(-6%); }
    8% { transform: translateY(4%); }
    53% { transform: translateY(8%); }
    54% { transform: translateY(-3%); }
}

@keyframes shine {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shift {
    0%, 38%, 43%, 57%, 61%, 65%, 69%, 74%, 88%, 100% { transform: skewX(0deg); }
    39% { transform: skewX(12deg); }
    40% { transform: skewX(-14deg); }
    58% { transform: skewX(28deg) skewY(6deg); }
    59% { transform: skewX(-30deg) skewY(-7deg); }
    63% { transform: skewX(12deg) skewY(-3deg); }
    70% { transform: skewX(-34deg) skewY(-12deg); }
    71% { transform: skewX(14deg) skewY(-6deg); }
    89% { transform: skewX(-9deg) skewY(2deg); }
}

/* Kurze, harte "Systembruch"-Momente: Invertierung, Unschärfe, Farbdreher */
@keyframes shatter {
    0%, 5%, 8%, 44%, 47%, 78%, 81%, 100% {
        filter: none;
        transform: scale(1);
    }
    6% {
        filter: invert(1) brightness(1.8) contrast(1.3);
        transform: scale(1.03) translate(3px, -2px);
    }
    7% {
        filter: blur(2px) hue-rotate(180deg);
        transform: scale(0.98) translate(-4px, 1px);
    }
    45% {
        filter: invert(1) contrast(1.6);
        transform: scale(1.02) translate(-3px, 2px);
    }
    46% {
        filter: blur(1.5px) saturate(2);
        transform: scale(1.01) translate(2px, -1px);
    }
    79% {
        filter: invert(1) brightness(2);
        transform: scale(1.04) translate(4px, 3px);
    }
    80% {
        filter: blur(1px) hue-rotate(-90deg);
        transform: scale(0.99) translate(-2px, -2px);
    }
}

/* ---------------------------------------------------
   CYAN GLITCH
--------------------------------------------------- */
@keyframes glitch-cyan {
    0%, 7%, 12%, 18%, 31%, 46%, 61%, 77%, 92%, 100% {
        transform: translate(0, 0);
        text-shadow: none;
        opacity: 0;
    }
    8% {
        transform: translate(-3px, 0);
        text-shadow: -2px 0 #00ffff, 3px 0 #008cff;
        opacity: .8;
    }
    9% {
        transform: translate(7px, -1px);
        text-shadow: -7px 0 #00d9ff, 2px 0 #fff;
        opacity: 1;
    }
    10% {
        transform: translate(-12px, 1px);
        text-shadow: 12px 0 #00ffff;
        opacity: .65;
    }
    19% {
        transform: translate(2px, 0);
        text-shadow: -4px 0 #00baff;
        opacity: .75;
    }
    20% {
        transform: translate(-18px, 0);
        text-shadow: 20px 0 #00ffff, -3px 0 #fff;
        opacity: 1;
    }
    21% {
        transform: translate(5px, 0);
        opacity: .35;
    }
    32% {
        transform: translate(-2px, -1px);
        text-shadow: -8px 0 #00eaff;
        opacity: .8;
    }
    33% {
        transform: translate(14px, 1px);
        text-shadow: -14px 0 #008cff, 4px 0 #7ffcff;
        opacity: 1;
    }
    34% {
        transform: translate(0);
        opacity: 0;
    }
    47% {
        transform: translate(-8px, 0);
        text-shadow: 12px 0 #00ffff;
        opacity: .9;
    }
    48% {
        transform: translate(21px, 0);
        text-shadow: -20px 0 #008cff;
        opacity: .75;
    }
    49% {
        transform: translate(-3px, 0);
        opacity: .3;
    }
    62% {
        transform: translate(4px, 0);
        text-shadow: -3px 0 #00ffff, 8px 0 #0077ff;
        opacity: .7;
    }
    63% {
        transform: translate(-16px, 0);
        text-shadow: 18px 0 #00eaff;
        opacity: 1;
    }
    78% {
        transform: translate(9px, 1px);
        text-shadow: -10px 0 #00ffff;
        opacity: .85;
    }
    79% {
        transform: translate(-22px, -1px);
        text-shadow: 22px 0 #0077ff;
        opacity: .8;
    }
    93% {
        transform: translate(3px, 0);
        text-shadow: -6px 0 #00ffff, 9px 0 #fff;
        opacity: .9;
    }
    94% {
        transform: translate(-10px, 0);
        opacity: .5;
    }
}

/* ---------------------------------------------------
   MAGENTA / BLAU GLITCH
--------------------------------------------------- */
@keyframes glitch-magenta {
    0%, 14%, 29%, 43%, 58%, 71%, 86%, 100% {
        transform: translate(0);
        text-shadow: none;
        opacity: 0;
    }
    15% {
        transform: translate(5px, 0);
        text-shadow: 4px 0 #ff00ff, -3px 0 #428afe;
        opacity: .75;
    }
    16% {
        transform: translate(-11px, 1px);
        text-shadow: 11px 0 #214dd9;
        opacity: 1;
    }
    30% {
        transform: translate(13px, 0);
        text-shadow: -15px 0 #ff00ff;
        opacity: .7;
    }
    31% {
        transform: translate(-4px, -1px);
        text-shadow: 7px 0 #379eff;
        opacity: .9;
    }
    44% {
        transform: translate(-19px, 0);
        text-shadow: 21px 0 #428afe, -5px 0 #ff00ff;
        opacity: .85;
    }
    45% {
        transform: translate(8px, 0);
        opacity: .35;
    }
    59% {
        transform: translate(3px, 0);
        text-shadow: -10px 0 #ff00ff;
        opacity: .9;
    }
    72% {
        transform: translate(17px, 1px);
        text-shadow: -19px 0 #214dd9;
        opacity: .8;
    }
    73% {
        transform: translate(-7px, 0);
        text-shadow: 9px 0 #b5ffff;
        opacity: .6;
    }
    87% {
        transform: translate(-14px, 0);
        text-shadow: 16px 0 #428afe, -3px 0 #fff;
        opacity: .85;
    }
}

/* ---------------------------------------------------
   AUSGEFRANSTE RISSE (statt sauberer Balken jetzt gezackte Kanten)
--------------------------------------------------- */
@keyframes glitch-tear-a {
    0%, 8%, 11%, 19%, 33%, 48%, 63%, 79%, 94%, 100% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
    9%  { clip-path: polygon(0% 12%, 38% 9%, 41% 22%, 100% 18%, 100% 34%, 62% 37%, 58% 26%, 0% 30%); }
    10% { clip-path: polygon(0% 58%, 45% 54%, 48% 63%, 100% 60%, 100% 78%, 55% 82%, 51% 71%, 0% 75%); }
    20% { clip-path: polygon(0% 72%, 30% 69%, 34% 79%, 100% 76%, 100% 88%, 40% 91%, 36% 82%, 0% 85%); }
    21% { clip-path: polygon(0% 31%, 60% 27%, 63% 40%, 100% 36%, 100% 52%, 20% 56%, 17% 44%, 0% 47%); }
    32% { clip-path: polygon(0% 6%, 50% 3%, 53% 14%, 100% 11%, 100% 24%, 30% 27%, 27% 18%, 0% 20%); }
    47% { clip-path: polygon(0% 43%, 20% 40%, 23% 51%, 100% 47%, 100% 60%, 70% 63%, 67% 53%, 0% 56%); }
    62% { clip-path: polygon(0% 77%, 55% 74%, 58% 84%, 100% 81%, 100% 92%, 25% 95%, 22% 87%, 0% 89%); }
    78% { clip-path: polygon(0% 19%, 40% 16%, 43% 27%, 100% 24%, 100% 38%, 60% 41%, 57% 31%, 0% 34%); }
    93% { clip-path: polygon(0% 52%, 65% 49%, 68% 59%, 100% 56%, 100% 68%, 15% 71%, 12% 62%, 0% 64%); }
}

@keyframes glitch-tear-b {
    0%, 15%, 17%, 30%, 45%, 59%, 73%, 87%, 100% {
        clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    }
    16% { clip-path: polygon(0% 61%, 42% 58%, 46% 70%, 100% 66%, 100% 82%, 20% 86%, 16% 75%, 0% 78%); }
    31% { clip-path: polygon(0% 23%, 55% 20%, 58% 32%, 100% 28%, 100% 45%, 33% 49%, 30% 38%, 0% 41%); }
    44% { clip-path: polygon(0% 84%, 25% 81%, 28% 91%, 100% 88%, 100% 97%, 60% 100%, 57% 93%, 0% 95%); }
    60% { clip-path: polygon(0% 39%, 48% 36%, 51% 48%, 100% 44%, 100% 60%, 18% 63%, 15% 53%, 0% 55%); }
    72% { clip-path: polygon(0% 9%, 62% 6%, 65% 18%, 100% 14%, 100% 28%, 44% 31%, 41% 21%, 0% 23%); }
    86% { clip-path: polygon(0% 67%, 33% 64%, 36% 75%, 100% 71%, 100% 85%, 50% 88%, 47% 78%, 0% 81%); }
}

/* ---------------------------------------------------
   SHARDS – Pixel-Blöcke, die ausbrechen und zurückschnellen
--------------------------------------------------- */
@keyframes shard-a {
    0%, 9%, 12%, 45%, 48%, 81%, 84%, 100% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translate(0, 0) rotate(0deg);
    }
    10% {
        opacity: .7;
        clip-path: inset(18% 0 55% 0);
        transform: translate(22px, -6px) rotate(-2deg);
    }
    11% {
        opacity: .9;
        clip-path: inset(52% 0 20% 0);
        transform: translate(-28px, 8px) rotate(3deg);
    }
    46% {
        opacity: .85;
        clip-path: inset(8% 0 74% 0);
        transform: translate(32px, -10px) scale(1.06) rotate(-4deg);
    }
    47% {
        opacity: .5;
        clip-path: inset(63% 0 12% 0);
        transform: translate(-18px, 9px) rotate(2deg);
    }
    82% {
        opacity: .9;
        clip-path: inset(28% 0 48% 0);
        transform: translate(24px, 3px) rotate(-3deg);
    }
    83% {
        opacity: .6;
        clip-path: inset(70% 0 9% 0);
        transform: translate(-14px, -7px) rotate(1deg);
    }
}

@keyframes shard-b {
    0%, 13%, 16%, 39%, 42%, 68%, 71%, 91%, 94%, 100% {
        opacity: 0;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    14% {
        opacity: .8;
        clip-path: inset(35% 0 40% 0);
        transform: translate(-30px, 4px) scale(1.08) rotate(5deg);
    }
    15% {
        opacity: .4;
        clip-path: inset(60% 0 15% 0);
        transform: translate(20px, -8px) rotate(-3deg);
    }
    40% {
        opacity: .9;
        clip-path: inset(5% 0 70% 0);
        transform: translate(26px, 6px) scale(0.95) rotate(4deg);
    }
    41% {
        opacity: .5;
        clip-path: inset(80% 0 5% 0);
        transform: translate(-22px, -4px) rotate(-2deg);
    }
    69% {
        opacity: .75;
        clip-path: inset(48% 0 30% 0);
        transform: translate(18px, 10px) rotate(3deg);
    }
    70% {
        opacity: .35;
        clip-path: inset(20% 0 62% 0);
        transform: translate(-26px, -6px) rotate(-5deg);
    }
    92% {
        opacity: .7;
        clip-path: inset(65% 0 18% 0);
        transform: translate(16px, -5px) scale(1.04) rotate(2deg);
    }
    93% {
        opacity: .3;
        clip-path: inset(10% 0 75% 0);
        transform: translate(-12px, 7px) rotate(-1deg);
    }
}

@keyframes shard-c {
    0%, 22%, 25%, 54%, 57%, 88%, 100% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg);
    }
    23% {
        opacity: .65;
        clip-path: inset(42% 0 35% 0);
        transform: translate(19px, -9px) rotate(-6deg);
    }
    24% {
        opacity: .3;
        clip-path: inset(15% 0 68% 0);
        transform: translate(-25px, 5px) rotate(4deg);
    }
    55% {
        opacity: .8;
        clip-path: inset(58% 0 22% 0);
        transform: translate(29px, 8px) scale(1.05) rotate(-3deg);
    }
    56% {
        opacity: .4;
        clip-path: inset(6% 0 80% 0);
        transform: translate(-17px, -6px) rotate(2deg);
    }
    89% {
        opacity: .7;
        clip-path: inset(33% 0 45% 0);
        transform: translate(21px, 4px) rotate(-4deg);
    }
}


/* ---------------------------------------------------
   BARRIEREFREIHEIT: reduzierte Bewegung
--------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .glitch,
    .glitch::before,
    .glitch::after,
    .glitch-pixels,
    .glitch-pixels::before,
    .glitch-pixels::after,
    .glitch-wrapper::after {
        animation: none !important;
        filter: none !important;
        transform: none !important;
    }
}

/* für kleine Geräte */
@media (max-width: 600px) {
    .glitch { font-size: clamp(36px, 14vw, 60px); }
    .glitch.small-text { font-size: clamp(12px, 3.5vw, 16px); margin-top: 12px; }
    .glitch-pixels,
    .glitch-pixels::before,
    .glitch-pixels::after {
        inset: -10%;
    }
}