/* Base distortion keyframes */
@keyframes textDistort {
  0% { transform: skew(0deg); }
  25% { transform: skew(-2deg); }
  75% { transform: skew(2deg); }
  100% { transform: skew(0deg); }
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes fog {
  0% { backdrop-filter: blur(0px); }
  50% { backdrop-filter: blur(1px); }
  100% { backdrop-filter: blur(0px); }
}

@keyframes crackEffect {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 48% 0, 50% 4%, 52% 0, 100% 0, 100% 48%, 96% 50%, 100% 52%, 100% 100%, 52% 100%, 50% 96%, 48% 100%, 0 100%, 0 52%, 4% 50%, 0 48%); }
}

@keyframes melt {
  0% { transform: perspective(500px) rotateX(0); }
  100% { transform: perspective(500px) rotateX(10deg) scaleY(1.2); }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  42% { opacity: 1; }
  43% { opacity: 0; }
  45% { opacity: 1; }
  47% { opacity: 0.4; }
  48% { opacity: 1; }
  50% { opacity: 0.4; }
  52% { opacity: 1; }
}

@keyframes deepDistort {
  0% { transform: translate(0) skew(0deg) scale(1); }
  25% { transform: translate(-10px, 5px) skew(-5deg) scale(1.05); }
  50% { transform: translate(5px, -5px) skew(5deg) scale(0.95); }
  75% { transform: translate(-5px, 10px) skew(-3deg) scale(1.02); }
  100% { transform: translate(0) skew(0deg) scale(1); }
}

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

/* New keyframe animations for stages 11-13 */
@keyframes realityBend {
    0% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1); }
    25% { transform: perspective(1000px) rotateX(20deg) rotateY(-15deg) scale(1.1); }
    50% { transform: perspective(1000px) rotateX(-15deg) rotateY(20deg) scale(0.9); }
    75% { transform: perspective(1000px) rotateX(10deg) rotateY(-25deg) scale(1.2); }
    100% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1); }
}

@keyframes fractalize {
    0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    25% { clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%); }
    50% { clip-path: polygon(10% 0%, 90% 10%, 100% 90%, 0% 100%); }
    75% { clip-path: polygon(0% 15%, 85% 0%, 100% 85%, 15% 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes dissociate {
    0% { filter: hue-rotate(0deg) blur(0px); }
    25% { filter: hue-rotate(90deg) blur(2px); }
    50% { filter: hue-rotate(180deg) blur(4px); }
    75% { filter: hue-rotate(270deg) blur(2px); }
    100% { filter: hue-rotate(360deg) blur(0px); }
}

/* Stage progression styles */
body.stage1 {
  background-image: linear-gradient(45deg, #0a0505 0%, #1a0808 100%);
}

body.stage1 .message {
  animation: textDistort 8s infinite ease-in-out;
}

body.stage2 {
  background-image: linear-gradient(45deg, #150505 0%, #2a0808 100%);
  text-shadow: 0 0 8px rgba(255,0,0,0.2);
}

body.stage2 .chat-container {
  animation: shake 10s infinite;
  border-image: linear-gradient(to bottom, #600, #400) 1;
}

body.stage2 .message {
  transform: rotate(-1deg);
  animation: textDistort 6s infinite ease-in-out;
}

body.stage3 {
  background-image: linear-gradient(45deg, #200505 0%, #3a0808 100%);
  text-shadow: 0 0 12px rgba(255,0,0,0.3);
  animation: fog 8s infinite;
}

body.stage3 .chat-container {
  animation: shake 7s infinite, crackEffect 3s forwards;
  backdrop-filter: blur(1px);
}

body.stage3 .message {
  transform: rotate(2deg);
  animation: textDistort 4s infinite ease-in-out, glitch 6s infinite;
}

body.stage3 .message:nth-child(even) {
  transform: rotate(-2deg);
}

body.stage4 {
  background-image: linear-gradient(45deg, #300505 0%, #4a0808 100%);
  text-shadow: 0 0 15px rgba(255,0,0,0.4);
  animation: fog 5s infinite;
}

body.stage4 .chat-container {
  animation: shake 5s infinite, crackEffect 2s forwards;
  backdrop-filter: blur(2px);
  box-shadow: 0 0 35px rgba(160, 0, 0, 0.7), 
              inset 0 0 20px rgba(255, 0, 0, 0.3);
}

body.stage4 .message {
  transform: perspective(500px) rotateX(2deg);
  animation: textDistort 3s infinite ease-in-out, glitch 4s infinite;
  border-image: linear-gradient(to right, #a00, transparent) 1;
}

body.stage4 .message:nth-child(odd) {
  transform: perspective(500px) rotateX(-2deg);
}

body.stage5 {
  background-image: linear-gradient(45deg, #400505 0%, #5a0808 100%);
  text-shadow: 0 0 20px rgba(255,0,0,0.5), 0 0 40px rgba(255,0,0,0.3);
  animation: fog 3s infinite;
}

body.stage5 .chat-container {
  animation: shake 3s infinite, crackEffect 1s forwards;
  backdrop-filter: blur(3px);
  box-shadow: 0 0 40px rgba(200, 0, 0, 0.8),
              inset 0 0 30px rgba(255, 0, 0, 0.4);
  border-image: repeating-linear-gradient(45deg, #c00, #800 10px) 1;
}

body.stage5 .message {
  transform: perspective(500px) rotateX(4deg) skew(-2deg);
  animation: textDistort 2s infinite ease-in-out, glitch 2s infinite;
  border-image: linear-gradient(to right, #c00, transparent) 1;
  backdrop-filter: blur(1px);
}

body.stage5 .message:nth-child(odd) {
  transform: perspective(500px) rotateX(-4deg) skew(2deg);
}

body.stage5 .input-area {
  animation: glitch 3s infinite;
  border-image: repeating-linear-gradient(-45deg, #800, #600 10px) 1;
}

body.stage5 input[type="text"] {
  animation: textDistort 4s infinite;
}

body.stage5 button {
  animation: shake 2s infinite;
  text-shadow: 0 0 10px rgba(255,0,0,0.5);
}

body.stage6 {
  background-image: linear-gradient(45deg, #500505 0%, #6a0808 100%);
  text-shadow: 0 0 25px rgba(255,0,0,0.6), 0 0 50px rgba(255,0,0,0.4);
  animation: fog 2s infinite, shake 4s infinite;
}

body.stage6 .chat-container {
  animation: deepDistort 3s infinite, crackEffect 0.5s forwards;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 50px rgba(200, 0, 0, 0.9),
              inset 0 0 40px rgba(255, 0, 0, 0.5);
  border-width: 3px;
  border-style: solid;
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><path d='M0 0 L50 50 M50 0 L0 50' stroke='%23600' stroke-width='3'/></svg>") 1;
}

body.stage6 .message {
  transform: perspective(800px) rotateX(6deg) skew(-4deg);
  animation: textDistort 1s infinite ease-in-out, glitch 1.5s infinite;
  border-image: repeating-linear-gradient(45deg, #800, #400 5px) 1;
  box-shadow: 0 0 20px rgba(255,0,0,0.2);
}

body.stage7 {
  background-image: linear-gradient(45deg, #600505 0%, #7a0808 100%);
  text-shadow: 0 0 30px rgba(255,0,0,0.7), 0 0 60px rgba(255,0,0,0.5);
  animation: fog 1.5s infinite, flicker 8s infinite;
}

body.stage7 .chat-container {
  animation: melt 2s forwards, shake 2s infinite;
  background: repeating-radial-gradient(circle at 50% 50%, #1a0000, #300 10px);
  border-image: repeating-linear-gradient(45deg, #a00, #600 5px) 1;
}

body.stage7 .message {
  background: linear-gradient(45deg, #200, #400);
  transform-style: preserve-3d;
  transform: rotate(3deg) perspective(1000px) rotateY(5deg);
  animation: deepDistort 2s infinite;
  border-right: 5px solid #800;
  box-shadow: -5px 5px 15px rgba(100,0,0,0.3);
}

body.stage8 {
  background: repeating-radial-gradient(circle at center, #300 0, #600 2px, #300 3px);
  animation: flicker 3s infinite, fog 1s infinite;
}

body.stage8 .chat-container {
  border: none;
  background: linear-gradient(rgba(40,0,0,0.95), rgba(20,0,0,0.95));
  box-shadow: 0 0 60px rgba(255,0,0,0.8), inset 0 0 30px #600;
  animation: deepDistort 1.5s infinite;
}

body.stage8 .message {
  background: linear-gradient(45deg, #300, #500);
  border-left: 3px solid #a00;
  transform: perspective(800px) rotateY(-10deg);
  animation: glitch 0.5s infinite;
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}

body.stage9 {
  background: 
    radial-gradient(circle at center, transparent 0%, #400 100%),
    repeating-linear-gradient(45deg, #200 0px, #300 1px, #200 2px);
  animation: flicker 1s infinite;
}

body.stage9 .chat-container {
  background: linear-gradient(rgba(60,0,0,0.97), rgba(30,0,0,0.97));
  border: 3px solid #800;
  box-shadow: 0 0 80px rgba(255,0,0,0.9);
  animation: shake 1s infinite, deepDistort 2s infinite;
  backdrop-filter: blur(6px) contrast(1.2);
}

body.stage9 .message {
  background: 
    linear-gradient(45deg, #400 25%, transparent 25%) -10px 0,
    linear-gradient(-45deg, #400 25%, transparent 25%) -10px 0,
    linear-gradient(45deg, transparent 75%, #400 75%) -10px 0,
    linear-gradient(-45deg, transparent 75%, #400 75%) -10px 0;
  background-size: 20px 20px;
  border: 2px solid #600;
  animation: glitch 0.3s infinite;
  box-shadow: 0 0 30px rgba(255,0,0,0.4);
}

body.stage10 {
  background: #100;
  animation: flicker 0.5s infinite;
}

body.stage10 .chat-container {
  background: 
    linear-gradient(rgba(80,0,0,0.98), rgba(40,0,0,0.98)),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='none' stroke='%23600' stroke-width='2'/%3E%3C/svg%3E");
  border: 5px solid #a00;
  animation: deepDistort 0.5s infinite, shake 0.3s infinite;
  box-shadow: 0 0 100px rgba(255,0,0,1), inset 0 0 50px rgba(255,0,0,0.8);
}

body.stage10 .message {
  background: linear-gradient(45deg, #300, #600);
  border: 3px solid #800;
  animation: glitch 0.2s infinite, melt 1s forwards;
  transform: perspective(1000px) rotateX(10deg) scale(1.05);
  filter: contrast(1.5) brightness(0.8);
  text-shadow: 0 0 15px #f00;
}

/* Stage 11 - Reality Breaking Down */
body.stage11 {
    background: 
        radial-gradient(circle at 30% 70%, #600 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, #400 0%, transparent 50%),
        #200;
    animation: realityBend 4s infinite, flicker 0.3s infinite;
    filter: contrast(1.2) saturate(1.5);
}

body.stage11 .chat-container {
    background: rgba(40,0,0,0.98);
    border: none;
    box-shadow: 
        0 0 120px rgba(255,0,0,1),
        inset 0 0 60px rgba(255,0,0,0.9);
    animation: fractalize 3s infinite, shake 0.2s infinite;
    transform-style: preserve-3d;
}

body.stage11 .message {
    background: linear-gradient(45deg, #400, #800);
    border: 4px solid #a00;
    animation: glitch 0.15s infinite, melt 0.5s forwards;
    transform: perspective(1200px) rotateX(15deg) scale(1.1);
    filter: contrast(1.8) brightness(0.7);
    text-shadow: 0 0 20px #f00;
    letter-spacing: 2px;
}

/* Stage 12 - Time Dissolving */
body.stage12 {
    background: #100;
    animation: dissociate 2s infinite;
    filter: contrast(1.5) saturate(2);
}

body.stage12::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-radial-gradient(circle at 50% 50%, #300 0px, #200 20px),
        repeating-conic-gradient(from 0deg, #400 0%, #200 5%, #400 10%);
    mix-blend-mode: multiply;
    animation: realityBend 1s infinite;
    opacity: 0.7;
}

body.stage12 .chat-container {
    background: linear-gradient(rgba(100,0,0,0.99), rgba(50,0,0,0.99));
    border: 6px double #c00;
    animation: fractalize 1s infinite, deepDistort 0.3s infinite;
    box-shadow: 
        0 0 150px rgba(255,0,0,1),
        inset 0 0 80px rgba(255,0,0,1);
    backdrop-filter: blur(8px) contrast(1.5);
}

body.stage12 .message {
    background: 
        linear-gradient(45deg, #500 25%, #700 75%),
        repeating-linear-gradient(-45deg, #600 0px, #400 10px);
    border: 5px ridge #b00;
    animation: glitch 0.1s infinite, realityBend 2s infinite;
    transform: perspective(1500px) rotateX(20deg) scale(1.15);
    filter: contrast(2) brightness(0.6);
    text-shadow: 
        0 0 25px #f00,
        2px 2px 0 #900,
        -2px -2px 0 #900;
    letter-spacing: 3px;
}

/* Stage 13 - Consciousness Fragmenting */
body.stage13 {
    background: #000;
    animation: dissociate 0.5s infinite;
    filter: contrast(2) saturate(3);
}

body.stage13::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-radial-gradient(circle at center, transparent 0, #300 100px),
        repeating-conic-gradient(from 45deg, #200 0%, #400 25%, #200 50%);
    mix-blend-mode: color-burn;
    animation: realityBend 0.5s infinite;
    opacity: 0.9;
}

body.stage13 .chat-container {
    background: linear-gradient(rgba(120,0,0,1), rgba(60,0,0,1));
    border: 8px groove #f00;
    animation: 
        fractalize 0.5s infinite,
        deepDistort 0.2s infinite,
        glitch 0.1s infinite;
    box-shadow: 
        0 0 200px rgba(255,0,0,1),
        inset 0 0 100px rgba(255,0,0,1);
    backdrop-filter: blur(10px) contrast(2);
    clip-path: polygon(
        calc(0% + sin(var(--time)) * 10px) 0%,
        100% calc(0% + cos(var(--time)) * 10px),
        calc(100% - sin(var(--time)) * 10px) 100%,
        0% calc(100% - cos(var(--time)) * 10px)
    );
}

body.stage13 .message {
    background: 
        linear-gradient(45deg, #700 0%, #a00 50%, #700 100%),
        repeating-radial-gradient(circle at center, #600 0px, #800 30px);
    border: 6px ridge #f00;
    animation: 
        glitch 0.05s infinite,
        realityBend 1s infinite,
        dissociate 2s infinite;
    transform: 
        perspective(2000px)
        rotateX(30deg)
        scale(1.2)
        skew(var(--skew-x), var(--skew-y));
    filter: contrast(2.5) brightness(0.5) saturate(2);
    text-shadow: 
        0 0 30px #f00,
        3px 3px 0 #a00,
        -3px -3px 0 #a00;
    letter-spacing: 4px;
    font-weight: bold;
}

/* Additional stage-specific effects for buttons and inputs */
.stage3 button:hover {
  transform: scale(1.1) rotate(2deg);
}

.stage4 button:hover {
  transform: scale(1.1) rotate(-2deg);
  box-shadow: 0 0 20px rgba(255,0,0,0.3);
}

.stage5 button:hover {
  transform: scale(1.2) rotate(4deg);
  box-shadow: 0 0 30px rgba(255,0,0,0.4);
}

.stage8 button, .stage9 button, .stage10 button {
  animation: glitch 0.5s infinite;
  background: linear-gradient(45deg, #400, #600);
  border: 2px solid #800;
}

/* Additional effects for stages 11-13 */
.stage11 button,
.stage12 button,
.stage13 button {
    animation: glitch 0.3s infinite, dissociate 1s infinite;
    background: linear-gradient(45deg, #600, #800);
    border: 3px ridge #a00;
    text-shadow: 0 0 15px #f00;
}

.stage11 input[type="text"],
.stage12 input[type="text"],
.stage13 input[type="text"] {
    background: linear-gradient(45deg, #300, #500);
    color: #f88;
    animation: shake 0.5s infinite;
    border: 3px ridge #800;
    text-shadow: 0 0 10px #f00;
}

.stage13 .input-area {
    animation: fractalize 1s infinite, realityBend 2s infinite;
    border: 4px ridge #c00;
}

.stage8 input[type="text"],
.stage9 input[type="text"],
.stage10 input[type="text"] {
  background: linear-gradient(45deg, #200, #400);
  color: #f66;
  animation: shake 1s infinite;
  border: 2px solid #600;
}

/* Progressive scrollbar modifications */
.stage3 ::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #333, #600);
}

.stage4 ::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #600, #800);
  border-radius: 0;
}

.stage5 ::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #800, #a00);
  border-radius: 0;
  border: 1px solid #600;
}

.stage5 ::-webkit-scrollbar-track {
  background: linear-gradient(to right, #1a1a1a, #2a1a1a);
  box-shadow: inset 0 0 10px rgba(255,0,0,0.2);
}

.stage8 ::-webkit-scrollbar-thumb,
.stage9 ::-webkit-scrollbar-thumb,
.stage10 ::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #a00, #600);
  border: 2px solid #800;
  box-shadow: 0 0 10px rgba(255,0,0,0.5);
}