body.inverted {
    filter: invert(1);
}

body.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-10px, -10px); }
    20% { transform: translate(10px, 10px); }
    30% { transform: translate(-10px, 10px); }
    40% { transform: translate(10px, -10px); }
    50% { transform: translate(-10px, -10px); }
    60% { transform: translate(10px, 10px); }
    70% { transform: translate(-10px, 10px); }
    80% { transform: translate(10px, -10px); }
    90% { transform: translate(-10px, 0); }
}

body.neon-pulse {
    animation: neon-pulse 2s ease-out;
}

@keyframes neon-pulse {
    0% { 
        box-shadow: inset 0 0 0 0 rgba(0, 255, 255, 0);
    }
    50% { 
        box-shadow: inset 0 0 100px 50px rgba(0, 255, 255, 0.5);
    }
    100% { 
        box-shadow: inset 0 0 0 0 rgba(0, 255, 255, 0);
    }
}

.letter {
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

body.glitch {
    animation: glitch 1s steps(10);
}

@keyframes glitch {
    0% { 
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    20% { 
        transform: translate(-5px, 5px);
        filter: hue-rotate(90deg);
    }
    40% { 
        transform: translate(5px, -5px);
        filter: hue-rotate(180deg);
    }
    60% { 
        transform: translate(-5px, -5px);
        filter: hue-rotate(270deg);
    }
    80% { 
        transform: translate(5px, 5px);
        filter: hue-rotate(360deg);
    }
    100% { 
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
}

body.kaleidoscope #page-container {
    animation: kaleidoscope 2s ease-in-out;
}

@keyframes kaleidoscope {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        filter: saturate(1);
    }
    25% { 
        transform: scale(1.5) rotate(90deg);
        filter: saturate(3);
    }
    50% { 
        transform: scale(0.5) rotate(180deg);
        filter: saturate(5);
    }
    75% { 
        transform: scale(1.5) rotate(270deg);
        filter: saturate(3);
    }
}

body.flipped #page-container {
    animation: flip 1s ease-in-out;
}

@keyframes flip {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(180deg); }
    100% { transform: rotateX(360deg); }
}

#player-character {
    position: fixed;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #000;
    z-index: 9999;
    transition: none;
    pointer-events: none;
}

body.inverted #player-character {
    border-bottom-color: #fff;
}

.collectible {
    position: fixed;
    width: 15px;
    height: 15px;
    z-index: 9998;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.collectible.circle {
    border-radius: 50%;
    background: #000;
}

.collectible.square {
    background: #000;
}

.collectible.triangle {
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-bottom: 13px solid #000;
    background: transparent;
}

body.inverted .collectible.circle,
body.inverted .collectible.square {
    background: #fff;
}

body.inverted .collectible.triangle {
    border-bottom-color: #fff;
}

.collectible.collected {
    animation: collect 0.3s ease-out forwards;
}

@keyframes collect {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    100% { 
        transform: scale(0);
        opacity: 0;
    }
}

#exploration-counter {
    position: fixed;
    top: 20px;
    right: 20px;
    font-family: 'PixelTimes', monospace;
    font-size: 24px;
    z-index: 10000;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #000;
}

body.inverted #exploration-counter {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    border-color: #fff;
}

body.celebration {
    animation: celebration 1s ease-out;
}

@keyframes celebration {
    0%, 100% { 
        background: #fff;
        transform: scale(1);
    }
    25% { 
        background: #000;
        transform: scale(1.02);
    }
    50% { 
        background: #fff;
        transform: scale(0.98);
    }
    75% { 
        background: #000;
        transform: scale(1.02);
    }
}