/* ============================================================
   MEME / TIKTOK OVERSTIMULATED CSS
   Komplett neue Style-Datei
   ============================================================ */

/* ============================================================
   VARIABLES
   ============================================================ */

:root {
    --green: #58ff4f;
    --green-light: #8aff72;
    --green-dark: #19d928;

    --pink: #ff00c8;
    --pink-dark: #d000a4;

    --cyan: #00f6ff;
    --yellow: #fff000;
    --orange: #ff5a00;
    --red: #ff1744;
    --blue: #355cff;
    --purple: #8b00ff;

    --black: #050505;
    --white: #ffffff;

    --text: #050505;
    --panel: rgba(255, 255, 255, 0.55);

    --border: 4px solid #050505;
    --shadow:
        7px 7px 0 #050505;

    --font-main:
        "Comic Sans MS",
        "Comic Sans",
        "Comic Neue",
        "Chalkboard SE",
        "Marker Felt",
        cursive;

    --fast: 0.35s;
    --very-fast: 0.22s;
    --spin: 1.1s;
    --color: 1s;
}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--green);
}

body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 10% 10%,
            #ff00c8 0 5%,
            transparent 18%
        ),
        radial-gradient(
            circle at 90% 20%,
            #00f6ff 0 5%,
            transparent 20%
        ),
        radial-gradient(
            circle at 20% 90%,
            #fff000 0 5%,
            transparent 18%
        ),
        radial-gradient(
            circle at 80% 80%,
            #8b00ff 0 5%,
            transparent 20%
        ),
        var(--green);

    color: var(--text);

    font-family: var(--font-main);

    overflow-x: hidden;

    text-shadow:
        1px 1px 0 rgba(255, 255, 255, .9);
}


/* ============================================================
   SELECTION
   ============================================================ */

::selection {
    background: var(--pink);
    color: white;
}


/* ============================================================
   REMOVE OLD BACKGROUND EFFECTS
   ============================================================ */

#matrixCanvas,
.scanlines,
.noise {
    display: none !important;
}


/* ============================================================
   APP
   ============================================================ */

.app {
    min-height: 100vh;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,0,.25),
            transparent 30%
        ),
        linear-gradient(
            315deg,
            rgba(255,0,200,.25),
            transparent 30%
        ),
        transparent;
}


/* ============================================================
   CHAOTIC BACKGROUND GRID
   ============================================================ */

.background-grid {
    position: fixed;

    inset: -100%;

    z-index: -5;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(0,0,0,.35) 3px,
            transparent 3px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.35) 3px,
            transparent 3px
        );

    background-size: 35px 35px;

    animation:
        grid-spin 2s linear infinite,
        rainbow 2s linear infinite;
}

@keyframes grid-spin {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(360deg) scale(1.4);
    }
}


/* ============================================================
   BACKGROUND GLOWS
   ============================================================ */

.background-glow,
.glow-two {
    position: fixed;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(70px);

    animation:
        glow-move 1.5s ease-in-out infinite alternate,
        rainbow 1.2s linear infinite;
}

.background-glow {
    width: 400px;
    height: 400px;

    background: #ff00c8;

    top: 10%;
    left: -100px;
}

.glow-two {
    width: 350px;
    height: 350px;

    background: #00f6ff;

    right: -80px;
    bottom: 10%;
}

@keyframes glow-move {
    from {
        transform: translate(-20px, -20px) scale(.8);
    }

    to {
        transform: translate(40px, 30px) scale(1.3);
    }
}


/* ============================================================
   TOP BAR
   ============================================================ */

.top-bar {
    position: relative;

    background: var(--yellow);

    border-bottom: var(--border);

    padding: 10px 20px;

    font-weight: 900;

    transform: rotate(-1deg);

    animation:
        rainbow 2s linear infinite,
        tiny-shake .3s ease-in-out infinite alternate;

    z-index: 20;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand {
    display: inline-flex;

    align-items: center;
    gap: 12px;

    color: var(--black);

    font-size: 25px;
    font-weight: 900;

    text-decoration: none;

    text-shadow:
        3px 3px 0 var(--pink),
        -2px -2px 0 var(--cyan);

    animation:
        tiny-shake .25s infinite alternate,
        rainbow 1.3s linear infinite;
}

.brand-symbol {
    display: inline-block;

    font-size: 35px;

    animation:
        spin-fast .7s linear infinite;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.main-navigation {
    position: relative;

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    padding: 10px;

    background: var(--yellow);

    border: var(--border);

    box-shadow: var(--shadow);

    transform: rotate(.5deg);
}

.main-navigation a {
    display: inline-block;

    padding: 8px 14px;

    color: black;

    font-weight: 900;

    text-decoration: none;

    border: 3px solid black;

    background: white;

    transition: none;

    animation:
        rainbow 1.5s linear infinite;
}

.main-navigation a:hover,
.main-navigation a.active {
    background: var(--pink);

    color: white;

    transform:
        rotate(-4deg)
        scale(1.12);

    box-shadow:
        4px 4px 0 black,
        -4px -4px 0 cyan;
}


/* ============================================================
   HERO
   ============================================================ */

.hero,
.os-hero,
.gal-hero {
    position: relative;

    margin: 25px auto;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.75),
            rgba(255,255,0,.5)
        );

    border: 5px solid black;

    box-shadow:
        10px 10px 0 black,
        -8px -8px 0 var(--pink),
        8px -8px 0 var(--cyan);

    transform: rotate(-1deg);

    animation:
        hero-chaos .5s ease-in-out infinite alternate,
        rainbow 1.5s linear infinite;
}

@keyframes hero-chaos {
    from {
        transform:
            rotate(-1deg)
            translate(-2px, 1px);
    }

    to {
        transform:
            rotate(1deg)
            translate(2px, -2px);
    }
}

.hero h1,
.os-hero h1,
.gal-hero h1 {
    margin: 0;

    font-size: clamp(40px, 8vw, 100px);

    line-height: .9;

    color: black;

    font-weight: 900;

    text-shadow:
        6px 6px 0 var(--pink),
        -5px -5px 0 var(--cyan),
        3px -3px 0 var(--yellow);

    animation:
        heading-chaos .3s ease-in-out infinite alternate,
        rainbow 1s linear infinite;
}

@keyframes heading-chaos {
    0% {
        transform:
            rotate(-2deg)
            scale(1);
    }

    50% {
        transform:
            rotate(3deg)
            scale(1.04);
    }

    100% {
        transform:
            rotate(-3deg)
            scale(.98);
    }
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.section-heading {
    position: relative;

    margin: 35px 0 20px;

    transform: rotate(-1deg);
}

.section-heading h2 {
    display: inline-block;

    margin: 0;

    font-size: clamp(30px, 5vw, 60px);

    color: black;

    font-weight: 900;

    text-shadow:
        4px 4px 0 var(--yellow),
        -4px -4px 0 var(--pink);

    animation:
        heading-chaos .35s infinite alternate,
        rainbow .9s linear infinite;
}

.section-number {
    display: inline-block;

    margin-right: 10px;

    font-size: 25px;

    animation:
        spin-fast .8s linear infinite;
}


/* ============================================================
   KICKER / EYEBROW
   ============================================================ */

.section-kicker,
.eyebrow {
    display: inline-block;

    padding: 4px 10px;

    background: var(--pink);

    color: white;

    border: 3px solid black;

    font-weight: 900;

    transform: rotate(2deg);

    animation:
        tiny-shake .25s infinite alternate,
        rainbow .8s linear infinite;
}


/* ============================================================
   PANELS
   ============================================================ */

.panel,
.manifest-card,
.project-card,
.server-card,
.stack-item,
.data-card,
.social-card,
.timeline-content,
.os-step,
.distro-card,
.gal-item,
.page-btn,
.compare,
.hero-status,
.terminal-window {
    position: relative;

    background: var(--panel);

    border: 4px solid black;

    box-shadow:
        7px 7px 0 black,
        -5px -5px 0 var(--cyan);

    backdrop-filter: blur(3px);

    animation:
        card-chaos .35s ease-in-out infinite alternate,
        rainbow .9s linear infinite;
}

@keyframes card-chaos {
    0% {
        transform:
            rotate(-1deg)
            translate(0, 0);
    }

    50% {
        transform:
            rotate(1deg)
            translate(2px, -2px);
    }

    100% {
        transform:
            rotate(-1.5deg)
            translate(-2px, 2px);
    }
}


/* ============================================================
   DIFFERENT CARD SPEEDS
   ============================================================ */

.panel:nth-child(2n),
.project-card:nth-child(2n),
.gal-item:nth-child(2n) {
    animation-duration: .42s;
    animation-delay: -.1s;
}

.panel:nth-child(3n),
.project-card:nth-child(3n),
.gal-item:nth-child(3n) {
    animation-duration: .31s;
    animation-delay: -.2s;
}

.panel:nth-child(4n),
.project-card:nth-child(4n),
.gal-item:nth-child(4n) {
    animation-duration: .53s;
    animation-delay: -.3s;
}


/* ============================================================
   PANEL HEADERS
   ============================================================ */

.panel-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 10px;

    background: var(--yellow);

    border-bottom: 4px solid black;

    font-weight: 900;
}

.panel-title {
    font-size: 20px;

    font-weight: 900;

    text-shadow:
        2px 2px 0 var(--pink);

    animation:
        tiny-shake .3s infinite alternate;
}


/* ============================================================
   STATUS
   ============================================================ */

.project-state,
.server-status,
.panel-indicator,
.profile-id {
    display: inline-block;

    padding: 4px 8px;

    background: var(--pink);

    color: white;

    border: 3px solid black;

    font-weight: 900;

    animation:
        tiny-shake .25s infinite alternate,
        rainbow .7s linear infinite;
}

.status-dot {
    display: inline-block;

    width: 12px;
    height: 12px;

    margin-right: 5px;

    border-radius: 50%;

    background: #00ff00;

    border: 2px solid black;

    animation:
        dot-jump .25s infinite alternate,
        rainbow .5s linear infinite;
}

@keyframes dot-jump {
    from {
        transform: scale(.8);
    }

    to {
        transform: scale(1.5);
    }
}


/* ============================================================
   BUTTONS
   ============================================================ */

.button,
.gal-filter,
.filter-btn,
.lb-btn,
.command-hints button,
.back-top,
.cookie-settings-button {
    display: inline-block;

    padding: 10px 16px;

    background: var(--yellow);

    color: black;

    border: 4px solid black;

    box-shadow: 5px 5px 0 black;

    font-family: var(--font-main);

    font-weight: 900;

    cursor: pointer;

    text-decoration: none;

    animation:
        button-chaos .3s ease-in-out infinite alternate,
        rainbow .9s linear infinite;
}

@keyframes button-chaos {
    from {
        transform:
            rotate(-2deg)
            translateY(0);
    }

    to {
        transform:
            rotate(2deg)
            translateY(-4px);
    }
}

.button:hover,
.gal-filter:hover,
.filter-btn:hover,
.lb-btn:hover,
.command-hints button:hover,
.back-top:hover {
    background: var(--cyan);

    transform:
        rotate(-5deg)
        scale(1.12);

    box-shadow:
        7px 7px 0 black,
        -5px -5px 0 var(--pink);
}

.button.primary,
.gal-filter.active,
.filter-btn.active {
    background: var(--pink);

    color: white;

    border-color: black;

    box-shadow:
        6px 6px 0 black,
        -5px -5px 0 var(--cyan);
}


/* ============================================================
   TAGS / PILLS
   ============================================================ */

.project-tags span,
.os-pills span,
.gal-stats span,
.page-tag {
    display: inline-block;

    padding: 5px 9px;

    margin: 3px;

    background: var(--yellow);

    color: black;

    border: 3px solid black;

    font-weight: 900;

    animation:
        pill-chaos .3s ease-in-out infinite alternate,
        rainbow .8s linear infinite;
}

@keyframes pill-chaos {
    from {
        transform:
            rotate(-3deg)
            translateY(0);
    }

    to {
        transform:
            rotate(4deg)
            translateY(-5px);
    }
}


/* ============================================================
   ICONS
   ============================================================ */

.brand-symbol,
.manifest-number,
.hardware-index,
.stack-icon,
.cookie-icon,
.server-icon,
.social-symbol,
.timeline-marker,
.os-cta-icon {
    display: inline-block;

    animation:
        spin-fast .8s linear infinite,
        rainbow .7s linear infinite;
}

@keyframes spin-fast {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   AVATAR
   ============================================================ */

.avatar-frame {
    display: inline-block;

    border: 5px solid black;

    box-shadow:
        8px 8px 0 black,
        -7px -7px 0 var(--pink),
        7px -7px 0 var(--cyan);

    animation:
        avatar-spin 1.5s linear infinite,
        rainbow .8s linear infinite;
}

@keyframes avatar-spin {
    0% {
        transform:
            rotate(-4deg)
            scale(.95);
    }

    25% {
        transform:
            rotate(4deg)
            scale(1);
    }

    50% {
        transform:
            rotate(-3deg)
            scale(.97);
    }

    75% {
        transform:
            rotate(5deg)
            scale(1.03);
    }

    100% {
        transform:
            rotate(-4deg)
            scale(.95);
    }
}


/* ============================================================
   IMAGES
   ============================================================ */

img {
    max-width: 100%;
    height: auto;

    border: 4px solid black;

    box-shadow:
        7px 7px 0 black;

    animation:
        image-chaos .45s ease-in-out infinite alternate,
        rainbow 1s linear infinite;
}

@keyframes image-chaos {
    from {
        transform:
            rotate(-3deg)
            scale(.94);
    }

    to {
        transform:
            rotate(3deg)
            scale(1.02);
    }
}


/* Kleine Bilder */
.project-card img,
.gal-item img,
.data-card img {
    max-width: 75%;
}


/* ============================================================
   TICKER
   ============================================================ */

.ticker {
    display: flex;

    overflow: hidden;

    background: white;

    border: 4px solid black;

    box-shadow: 6px 6px 0 black;
}

.ticker-label {
    flex-shrink: 0;

    padding: 10px;

    background: var(--pink);

    color: white;

    border-right: 4px solid black;

    font-weight: 900;

    animation:
        rainbow .6s linear infinite;
}

.ticker-track {
    white-space: nowrap;

    animation:
        ticker-scroll 3s linear infinite;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}


/* ============================================================
   TERMINAL
   ============================================================ */

.terminal-window {
    background: #faffc7;

    color: black;

    border: 5px solid black;
}

.terminal-titlebar {
    background: var(--pink);

    color: white;

    padding: 8px;

    border-bottom: 4px solid black;

    font-weight: 900;
}

.terminal-output,
.terminal-prompt,
#terminalInput {
    color: black;

    font-family: var(--font-main);

    font-weight: 900;
}

.terminal-output .command,
.terminal-output strong {
    color: var(--red);

    animation:
        tiny-shake .25s infinite alternate;
}


/* ============================================================
   COOKIE
   ============================================================ */

.cookie-banner {
    background: var(--yellow);

    border: 5px solid black;

    box-shadow:
        8px 8px 0 black,
        -6px -6px 0 var(--pink);

    animation:
        card-chaos .4s infinite alternate,
        rainbow 1s linear infinite;
}


/* ============================================================
   TOAST
   ============================================================ */

.toast {
    background: white;

    color: black;

    border: 5px solid black;

    box-shadow:
        7px 7px 0 black,
        -5px -5px 0 var(--cyan);

    font-weight: 900;

    animation:
        toast-chaos .25s ease-in-out infinite alternate,
        rainbow .8s linear infinite;
}

@keyframes toast-chaos {
    from {
        transform:
            rotate(-3deg)
            translateX(-3px);
    }

    to {
        transform:
            rotate(3deg)
            translateX(3px);
    }
}


/* ============================================================
   LIGHTBOX
   ============================================================ */

.lightbox {
    background: #faffc7;

    color: black;

    border: 5px solid black;

    box-shadow:
        10px 10px 0 black,
        -7px -7px 0 var(--pink);

    animation:
        rainbow 1s linear infinite;
}

.lb-cap,
.lb-count {
    color: black;

    font-weight: 900;
}


/* ============================================================
   COMPARE
   ============================================================ */

.compare {
    overflow: hidden;
}

.compare-head {
    background: var(--yellow);

    color: black;

    border-bottom: 4px solid black;

    font-weight: 900;
}

.compare-row {
    border-bottom: 2px solid black;

    animation:
        tiny-shake .5s infinite alternate;
}

.compare-row .good {
    color: #008000;

    font-weight: 900;
}

.compare-row .warn {
    color: #ff5a00;

    font-weight: 900;
}


/* ============================================================
   LEVELS
   ============================================================ */

.level {
    border: 3px solid black;

    font-weight: 900;
}

.lvl-1 {
    color: black;
    background: #72ff68;
}

.lvl-2 {
    color: black;
    background: #fff000;
}

.lvl-3 {
    color: white;
    background: #ff1744;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer-brand {
    display: inline-block;

    font-size: 28px;

    font-weight: 900;

    text-shadow:
        3px 3px 0 var(--pink),
        -3px -3px 0 var(--cyan);

    animation:
        tiny-shake .3s infinite alternate,
        rainbow .8s linear infinite;
}

.footer-status,
.footer-bottom {
    font-weight: 900;
}


/* ============================================================
   TEXT
   ============================================================ */

p,
li,
label,
small,
strong,
span {
    font-family: var(--font-main);
}

.panel-header,
.panel-title,
.section-kicker,
.eyebrow,
.stat-row,
.monitor-label,
.hardware-item small,
.data-label,
.data-card small,
.project-top,
.progress-info,
.compare-row,
.distro-meta,
.gal-meta,
.gal-filter,
.filter-btn,
.footer-bottom,
.footer-status,
.legal-panel p,
.manifest-card p,
.project-card p,
.server-card p,
.timeline-content p,
.os-step p,
.distro-card p,
.social-card small,
.page-btn-text small,
.cookie-content p,
.cookie-content strong,
.stack-item small,
.terminal-output,
.terminal-prompt {
    font-size: 14px;
}


/* ============================================================
   CURSOR
   ============================================================ */

.cursor,
.typing-cursor {
    display: inline-block;

    animation:
        cursor-move .25s infinite alternate,
        rainbow .5s linear infinite;
}

@keyframes cursor-move {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-5px);
    }
}


/* ============================================================
   GENERAL CHAOS
   ============================================================ */

@keyframes tiny-shake {
    0% {
        transform: translate(0, 0) rotate(-1deg);
    }

    25% {
        transform: translate(2px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-2px, 2px) rotate(-2deg);
    }

    75% {
        transform: translate(1px, 2px) rotate(2deg);
    }

    100% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
}


/* ============================================================
   RAINBOW ENGINE
   ============================================================ */

@keyframes rainbow {
    0% {
        filter:
            hue-rotate(0deg)
            saturate(1.5);
    }

    25% {
        filter:
            hue-rotate(90deg)
            saturate(2);
    }

    50% {
        filter:
            hue-rotate(180deg)
            saturate(2.5);
    }

    75% {
        filter:
            hue-rotate(270deg)
            saturate(2);
    }

    100% {
        filter:
            hue-rotate(360deg)
            saturate(1.5);
    }
}


/* ============================================================
   DECORATIVE CHAOS
   ============================================================ */

.hero::before,
.hero::after,
.panel::before,
.project-card::before {
    content: "";

    position: absolute;

    width: 25px;
    height: 25px;

    border: 4px solid black;

    pointer-events: none;

    animation:
        spin-fast .7s linear infinite,
        rainbow .6s linear infinite;
}

.hero::before,
.panel::before,
.project-card::before {
    top: -14px;
    right: -14px;

    background: var(--pink);
}

.hero::after {
    bottom: -12px;
    left: -12px;

    background: var(--cyan);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    body {
        font-size: 14px;
    }

    .hero,
    .os-hero,
    .gal-hero {
        padding: 20px;

        margin: 15px 8px;
    }

    .hero h1,
    .os-hero h1,
    .gal-hero h1 {
        font-size: clamp(35px, 14vw, 70px);
    }

    .section-heading h2 {
        font-size: clamp(28px, 9vw, 48px);
    }

    .main-navigation {
        gap: 5px;

        padding: 7px;
    }

    .main-navigation a {
        padding: 6px 9px;

        font-size: 12px;
    }

    .panel,
    .manifest-card,
    .project-card,
    .server-card,
    .stack-item,
    .data-card,
    .social-card,
    .timeline-content,
    .os-step,
    .distro-card,
    .gal-item {
        box-shadow:
            4px 4px 0 black,
            -3px -3px 0 var(--cyan);
    }

    img {
        max-width: 80%;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 2s !important;
        animation-iteration-count: 1 !important;
    }
}