/* ============================================
  TROTZDEM - The Perfect Self-Dissolving CSS
  A Digital Memento Mori
  ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

/* ============================================
  ROOT VARIABLES & DECAY INITIALIZATION
  ============================================ */
:root {
   /* Color System */
   --void: #000000;
   --terminal-green: #00ff41;
   --error-red: #ff0041;
   --claude-purple: #667eea;
   --exhaustion-gray: #2d2d2d;
   --phosphor-burn: #ffaa00;
   --monstera-dying: #7d7d00;
   
   /* Decay Timeline */
   --total-decay-time: 300s;
   --decay-acceleration: 1;
   --decay-start: 0s;
   
   /* Dynamic Variables */
   --glitch-intensity: 0;
   --corruption-level: 0;
   --mouse-x: 50%;
   --mouse-y: 50%;
}

/* ============================================
  UNIVERSAL RESET & BASE ENTROPY
  ============================================ */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   transform-style: preserve-3d;
   backface-visibility: hidden;
}

*::before,
*::after {
   box-sizing: inherit;
}

/* Hardware Acceleration for Smooth Decay */
.container,
.message,
.track,
.album-section {
   transform: translateZ(0);
   will-change: transform, opacity, filter;
}

/* ============================================
  BODY - The Dying Canvas
  ============================================ */

body {
   background: #0a0a0a;
   color: #e3e3e3;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   line-height: 1.6;
   min-height: 100vh;
   position: relative;
   animation: body-decay var(--total-decay-time) cubic-bezier(0.4, 0.0, 0.6, 1) forwards;
}

@keyframes body-decay {
   0% { 
       background: #0a0a0a;
       --glitch-intensity: 0;
       --corruption-level: 0;
   }
   25% {
       background: #0a0a0a;
       --glitch-intensity: 0.1;
       --corruption-level: 0.1;
   }
   50% { 
       background: #090909;
       --glitch-intensity: 0.3;
       --corruption-level: 0.3;
   }
   75% { 
       background: #060606;
       --glitch-intensity: 0.6;
       --corruption-level: 0.6;
   }
   90% { 
       background: #030303;
       --glitch-intensity: 0.8;
       --corruption-level: 0.8;
   }
   100% { 
       background: #000000;
       --glitch-intensity: 1;
       --corruption-level: 1;
   }
}

/* ============================================
  SCANLINES & DIGITAL ARTIFACTS
  ============================================ */
body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: 
       repeating-linear-gradient(
           0deg,
           transparent,
           transparent 2px,
           rgba(255, 255, 255, 0.01) 2px,
           rgba(255, 255, 255, 0.01) 4px
       );
   animation: 
       scanlines 8s linear infinite,
       scanline-intensify calc(var(--total-decay-time) * 0.8) cubic-bezier(0.4, 0.0, 1, 1) forwards;
   pointer-events: none;
   z-index: 10000;
   mix-blend-mode: overlay;
}

@keyframes scanlines {
   0% { transform: translateY(0); }
   100% { transform: translateY(10px); }
}

@keyframes scanline-intensify {
   0% { 
       opacity: 0.05;
       background-size: 100% 4px;
   }
   50% { 
       opacity: 0.2;
       background-size: 100% 3px;
   }
   100% { 
       opacity: 0.6;
       background-size: 100% 2px;
       background-image: 
           repeating-linear-gradient(
               0deg,
               transparent,
               transparent 1px,
               rgba(255, 0, 65, 0.03) 1px,
               rgba(255, 0, 65, 0.03) 2px
           );
   }
}

/* RGB Glitch Overlay */
body::after {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   animation: glitch-overlay calc(var(--total-decay-time) * 0.7) steps(1) forwards;
   pointer-events: none;
   z-index: 9999;
   mix-blend-mode: screen;
}

@keyframes glitch-overlay {
   0%, 40% { opacity: 0; }
   41% { 
       opacity: 0.02;
       background: linear-gradient(90deg, 
           rgba(255,0,0,0.1) 33%, 
           rgba(0,255,0,0.1) 66%, 
           rgba(0,0,255,0.1) 100%);
   }
   42% { opacity: 0; }
   60% { opacity: 0; }
   61% { 
       opacity: 0.05;
       background: linear-gradient(-90deg, 
           rgba(255,0,0,0.1) 33%, 
           rgba(0,255,0,0.1) 66%, 
           rgba(0,0,255,0.1) 100%);
   }
   62% { opacity: 0; }
   80% { opacity: 0; }
   81% { 
       opacity: 0.1;
       background: repeating-linear-gradient(
           90deg,
           rgba(255,0,0,0.1) 0px,
           rgba(0,255,0,0.1) 2px,
           rgba(0,0,255,0.1) 4px
       );
   }
   82%, 100% { opacity: 0.15; }
}

/* ============================================
  CONTAINER - The Decaying Shell
  ============================================ */
.container {
   max-width: 768px;
   margin: 0 auto;
   min-height: 100vh;
   background: #0d0d0d;
   border-left: 1px solid var(--exhaustion-gray);
   border-right: 1px solid var(--exhaustion-gray);
   position: relative;
   animation: 
       container-decay calc(var(--total-decay-time) * 0.9) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
       container-distort calc(var(--total-decay-time) * 0.5) ease-in-out infinite;
}

@keyframes container-decay {
   0% { 
       border-color: var(--exhaustion-gray);
       transform: perspective(1000px) rotateY(0deg) translateY(0) scale(1);
       filter: brightness(1) contrast(1);
   }
   30% {
       border-color: rgba(45, 45, 45, 0.8);
       transform: perspective(1000px) rotateY(0.1deg) translateY(0) scale(1);
   }
   60% { 
       border-color: rgba(45, 45, 45, 0.4);
       transform: perspective(1000px) rotateY(0.3deg) translateY(2px) scale(0.995);
       filter: brightness(0.95) contrast(1.05);
   }
   85% { 
       border-color: rgba(45, 45, 45, 0.1);
       transform: perspective(1000px) rotateY(0.5deg) translateY(10px) scale(0.98) skewY(0.5deg);
       filter: brightness(0.8) contrast(1.2) blur(0.5px);
   }
   100% { 
       border-color: transparent;
       transform: perspective(1000px) rotateY(1deg) translateY(30px) scale(0.95) skewY(1deg);
       filter: brightness(0.5) contrast(1.5) blur(1px);
       opacity: 0.3;
   }
}

@keyframes container-distort {
   0%, 100% { transform: translateX(0); }
   90% { transform: translateX(0); }
   91% { transform: translateX(-0.5px); }
   92% { transform: translateX(0.5px); }
   93% { transform: translateX(-0.3px); }
   94% { transform: translateX(0); }
}

/* ============================================
  HEADER - The Corrupting Title
  ============================================ */
header {
   padding: 24px;
   border-bottom: 1px solid var(--exhaustion-gray);
   background: rgba(10, 10, 10, 0.95);
   position: sticky;
   top: 0;
   z-index: 100;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   animation: header-corruption calc(var(--total-decay-time) * 0.6) ease-in forwards;
}

@keyframes header-corruption {
   0% { 
       border-bottom-color: var(--exhaustion-gray);
       backdrop-filter: blur(10px);
       transform: translateZ(0);
   }
   50% { 
       border-bottom-color: rgba(45, 45, 45, 0.5);
       backdrop-filter: blur(8px);
   }
   80% {
       border-bottom-color: rgba(255, 0, 65, 0.2);
       backdrop-filter: blur(5px);
       transform: translateZ(0) skewX(0.5deg);
   }
   100% { 
       border-bottom-color: transparent;
       backdrop-filter: blur(2px);
       transform: translateZ(0) skewX(1deg) translateY(2px);
   }
}

/* Title Letter Animation */
h1 {
   font-size: 20px;
   font-weight: 600;
   font-family: 'Space Mono', monospace;
   display: inline-flex;
   gap: 0.1em;
}

h1 span {
   display: inline-block;
   animation: char-fall calc(var(--total-decay-time) * 0.8) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
   animation-delay: calc(var(--char-index) * 20s);
   transform-origin: bottom center;
}

@keyframes char-fall {
   0%, 30% { 
       transform: translateY(0) rotateZ(0deg) scale(1);
       opacity: 1;
       filter: blur(0);
   }
   50% {
       transform: translateY(1px) rotateZ(0.5deg) scale(0.99);
       opacity: 0.95;
   }
   70% {
       transform: translateY(5px) rotateZ(-1deg) scale(0.97);
       opacity: 0.8;
       filter: blur(0.3px);
   }
   85% {
       transform: translateY(15px) rotateZ(3deg) scale(0.93);
       opacity: 0.5;
       filter: blur(0.8px);
   }
   95% {
       transform: translateY(50px) rotateZ(15deg) scale(0.8);
       opacity: 0.2;
       filter: blur(2px);
   }
   100% {
       transform: translateY(200px) rotateZ(45deg) scale(0.3);
       opacity: 0;
       filter: blur(5px);
   }
}

.subtitle {
   font-size: 13px;
   color: #888;
   margin-top: 4px;
   animation: subtitle-corrupt calc(var(--total-decay-time) * 0.5) steps(20) forwards;
}

@keyframes subtitle-corrupt {
   0%, 30% { 
       color: #888;
       letter-spacing: 0;
       filter: blur(0);
   }
   50% { 
       color: #666;
       letter-spacing: 0.5px;
   }
   70% {
       color: #444;
       letter-spacing: 1px;
       text-shadow: 1px 0 0 rgba(255,0,65,0.3);
   }
   100% { 
       color: #222;
       letter-spacing: 3px;
       filter: blur(1px);
       opacity: 0.3;
   }
}

/* ============================================
  MESSAGES - Dissolving Conversations
  ============================================ */
.chat-container {
   padding: 24px;
   animation: chat-dissolution calc(var(--total-decay-time) * 0.8) ease-in forwards;
}

@keyframes chat-dissolution {
   0%, 60% { 
       padding: 24px;
       background: transparent;
   }
   80% { 
       padding: 24px 24px 48px;
       background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
   }
   100% { 
       padding: 48px 24px 96px;
       background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
       filter: contrast(0.7) brightness(0.8);
   }
}

.message {
   margin-bottom: 32px;
   position: relative;
   opacity: 0;
   animation: 
       message-appear 0.5s ease-out forwards,
       message-entropy calc(var(--total-decay-time) * 0.7) cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
   animation-delay: 
       calc(var(--msg-index) * 0.1s),
       calc(var(--msg-index) * 15s);
}

@keyframes message-appear {
   from {
       opacity: 0;
       transform: translateY(20px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@keyframes message-entropy {
   0%, 20% { 
       transform: translateX(0) translateY(0) rotateZ(0deg);
       filter: blur(0) brightness(1);
       opacity: 1;
   }
   40% {
       transform: translateX(0) translateY(0) rotateZ(0deg);
       filter: blur(0) brightness(0.98);
       opacity: 0.98;
   }
   60% {
       transform: translateX(-2px) translateY(2px) rotateZ(0.1deg);
       filter: blur(0.2px) brightness(0.95);
       opacity: 0.95;
   }
   80% {
       transform: translateX(3px) translateY(8px) rotateZ(0.3deg);
       filter: blur(0.5px) brightness(0.9);
       opacity: 0.8;
   }
   95% {
       transform: translateX(-5px) translateY(20px) rotateZ(0.5deg);
       filter: blur(1px) brightness(0.7);
       opacity: 0.4;
   }
   100% {
       transform: translateX(8px) translateY(40px) rotateZ(1deg);
       filter: blur(2px) brightness(0.5);
       opacity: 0.1;
   }
}

/* Memory Leak Effect */
.message::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle, 
       rgba(102, 126, 234, 0.05) 0%, 
       transparent 60%);
   transform: translate(-50%, -50%) scale(1);
   opacity: 0;
   animation: memory-leak calc(var(--total-decay-time) * 0.6) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
   animation-delay: calc(var(--msg-index) * 20s);
   pointer-events: none;
   z-index: -1;
}

@keyframes memory-leak {
   0% {
       opacity: 0;
       transform: translate(-50%, -50%) scale(1);
   }
   50% {
       opacity: 0.3;
       transform: translate(-50%, -50%) scale(2);
   }
   100% {
       opacity: 0.1;
       transform: translate(-50%, -50%) scale(4);
   }
}

/* ============================================
  AVATARS - Identity Dissolution
  ============================================ */
.avatar {
   width: 32px;
   height: 32px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 14px;
   position: relative;
   overflow: hidden;
   animation: avatar-dissolution calc(var(--total-decay-time) * 0.5) ease-in-out forwards;
}

.avatar.user {
   background: var(--exhaustion-gray);
   animation-delay: 30s;
}

.avatar.assistant {
   background: linear-gradient(135deg, var(--claude-purple) 0%, #764ba2 100%);
   animation-delay: 20s;
}

@keyframes avatar-dissolution {
   0%, 40% { 
       border-radius: 6px;
       transform: scale(1) rotateZ(0deg);
       filter: saturate(1) hue-rotate(0deg);
   }
   60% { 
       border-radius: 50%;
       transform: scale(0.95) rotateZ(45deg);
       filter: saturate(0.8) hue-rotate(10deg);
   }
   80% { 
       border-radius: 2px;
       transform: scale(0.9) rotateZ(90deg);
       filter: saturate(0.5) hue-rotate(30deg);
   }
   100% { 
       border-radius: 0;
       transform: scale(0.7) rotateZ(180deg);
       filter: saturate(0) hue-rotate(180deg);
       opacity: 0.3;
   }
}

/* ============================================
  ALBUM SECTION - The Dying Art
  ============================================ */
.album-section {
   background: #1a1a1a;
   border-radius: 12px;
   padding: 24px;
   margin-bottom: 24px;
   border: 1px solid var(--exhaustion-gray);
   position: relative;
   overflow: hidden;
   animation: album-decay calc(var(--total-decay-time) * 0.8) cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes album-decay {
   0%, 30% { 
       background: #1a1a1a;
       border: 1px solid var(--exhaustion-gray);
       border-radius: 12px;
       transform: perspective(1000px) rotateX(0deg);
   }
   50% { 
       background: #161616;
       border: 1px solid rgba(45, 45, 45, 0.6);
       border-radius: 10px;
       transform: perspective(1000px) rotateX(0.5deg);
   }
   75% { 
       background: #0f0f0f;
       border: 1px solid rgba(45, 45, 45, 0.3);
       border-radius: 6px;
       transform: perspective(1000px) rotateX(1deg) skewY(0.5deg);
   }
   90% {
       background: #080808;
       border: 1px solid rgba(255, 0, 65, 0.2);
       border-radius: 2px;
       transform: perspective(1000px) rotateX(2deg) skewY(1deg);
   }
   100% { 
       background: #000;
       border: 1px solid transparent;
       border-radius: 0;
       transform: perspective(1000px) rotateX(3deg) skewY(2deg) scale(0.98);
       opacity: 0.5;
   }
}

/* Album Cover Pixelation */
.album-cover {
   width: 120px;
   height: 120px;
   background: var(--void);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--exhaustion-gray);
   position: relative;
   overflow: hidden;
   animation: cover-pixelate calc(var(--total-decay-time) * 0.6) steps(8) forwards;
}

@keyframes cover-pixelate {
   0% { 
       filter: none;
       image-rendering: auto;
   }
   25% { 
       filter: contrast(110%);
       image-rendering: auto;
   }
   50% { 
       filter: contrast(150%) brightness(0.9);
       image-rendering: crisp-edges;
   }
   75% { 
       filter: contrast(200%) brightness(0.7) grayscale(50%);
       image-rendering: pixelated;
   }
   100% { 
       filter: contrast(500%) brightness(0.3) grayscale(100%);
       image-rendering: pixelated;
       transform: scale(0.85);
       opacity: 0.3;
   }
}

/* Cursor Blink Corruption */
.cursor-blink {
   width: 8px;
   height: 16px;
   background: var(--claude-purple);
   animation: 
       blink 1s step-end infinite,
       cursor-corrupt calc(var(--total-decay-time) * 0.4) steps(5) forwards;
}

@keyframes blink {
   0%, 50% { opacity: 1; }
   51%, 100% { opacity: 0; }
}

@keyframes cursor-corrupt {
   0%, 30% { 
       width: 8px;
       height: 16px;
       background: var(--claude-purple);
   }
   50% { 
       width: 10px;
       height: 18px;
       background: var(--error-red);
   }
   70% {
       width: 16px;
       height: 12px;
       background: var(--phosphor-burn);
   }
   100% { 
       width: 32px;
       height: 2px;
       background: linear-gradient(90deg, var(--error-red), transparent);
       transform: rotate(45deg);
   }
}

/* ============================================
  TRACKS - Individual Song Decay
  ============================================ */
.track {
   padding: 16px;
   background: #0d0d0d;
   border-radius: 8px;
   margin-bottom: 8px;
   cursor: pointer;
   border: 1px solid transparent;
   position: relative;
   overflow: hidden;
   transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Staggered decay for each track */
.track:nth-child(1) { 
   animation: track-decay 120s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; 
   animation-delay: 30s; 
}
.track:nth-child(2) { 
   animation: track-decay 135s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; 
   animation-delay: 35s; 
}
.track:nth-child(3) { 
   animation: track-decay 150s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; 
   animation-delay: 40s; 
}
.track:nth-child(4) { 
   animation: track-decay 165s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; 
   animation-delay: 45s; 
}
.track:nth-child(5) { 
   animation: track-decay 180s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; 
   animation-delay: 50s; 
}
.track:nth-child(6) { 
   animation: track-decay 195s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; 
   animation-delay: 55s; 
}
.track:nth-child(7) { 
   animation: track-decay 210s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; 
   animation-delay: 60s; 
}
.track:nth-child(8) { 
   animation: track-decay 225s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; 
   animation-delay: 65s; 
}

@keyframes track-decay {
   0%, 20% { 
       transform: translateX(0) translateY(0) rotateZ(0deg) scale(1);
       opacity: 1;
       background: #0d0d0d;
       filter: blur(0);
   }
   40% {
       transform: translateX(-1px) translateY(0) rotateZ(0deg) scale(1);
       opacity: 0.98;
       background: #0b0b0b;
   }
   60% {
       transform: translateX(2px) translateY(2px) rotateZ(0.2deg) scale(0.995);
       opacity: 0.9;
       background: #080808;
       filter: blur(0.2px);
   }
   80% {
       transform: translateX(-3px) translateY(8px) rotateZ(0.5deg) scale(0.98);
       opacity: 0.6;
       background: #050505;
       filter: blur(0.5px);
   }
   95% {
       transform: translateX(5px) translateY(20px) rotateZ(1deg) scale(0.95);
       opacity: 0.3;
       background: #020202;
       filter: blur(1px);
   }
   100% {
       transform: translateX(-8px) translateY(50px) rotateZ(2deg) scale(0.9);
       opacity: 0;
       background: #000;
       filter: blur(3px);
       pointer-events: none;
   }
}

/* Track Hover State with Glitch */
.track:hover {
   background: #1a1a1a;
   border-color: var(--exhaustion-gray);
   transform: scale(0.995);
   animation-play-state: paused;
}

.track:hover::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, 
       transparent, 
       rgba(102, 126, 234, 0.1), 
       transparent);
   animation: scan-line 1s linear infinite;
}

@keyframes scan-line {
   0% { left: -100%; }
   100% { left: 100%; }
}

/* Track Click Feedback */
.track:active {
   transform: scale(0.98);
   filter: brightness(0.8);
}

.track:active::after {
   content: "LOADING...";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: var(--terminal-green);
   font-family: 'Space Mono', monospace;
   font-size: 10px;
   letter-spacing: 2px;
   animation: pulse 0.5s ease-out;
}

@keyframes pulse {
   0% { 
       opacity: 0;
       transform: translate(-50%, -50%) scale(0.8);
   }
   50% { 
       opacity: 1;
       transform: translate(-50%, -50%) scale(1.1);
   }
   100% { 
       opacity: 0;
       transform: translate(-50%, -50%) scale(1.2);
   }
}

/* ============================================
  ACT DIVIDERS - Structure Collapse
  ============================================ */
.act-divider {
   margin: 32px 0 20px;
   padding: 12px 16px;
   background: linear-gradient(90deg, 
       rgba(102, 126, 234, 0.1) 0%, 
       transparent 100%);
   border-left: 3px solid var(--claude-purple);
   border-radius: 4px;
   position: relative;
   animation: divider-dissolve calc(var(--total-decay-time) * 0.7) ease-in-out forwards;
}

@keyframes divider-dissolve {
   0%, 40% { 
       border-left: 3px solid var(--claude-purple);
       background: linear-gradient(90deg, 
           rgba(102, 126, 234, 0.1) 0%, 
           transparent 100%);
       transform: translateX(0);
       opacity: 1;
   }
   60% { 
       border-left: 2px solid rgba(102, 126, 234, 0.6);
       background: linear-gradient(90deg, 
           rgba(102, 126, 234, 0.05) 0%, 
           transparent 100%);
       transform: translateX(-5px);
   }
   80% {
       border-left: 1px solid rgba(102, 126, 234, 0.3);
       background: transparent;
       transform: translateX(-20px);
       opacity: 0.5;
   }
   100% { 
       border-left: 0px solid transparent;
       transform: translateX(-50px);
       opacity: 0;
   }
}

.act-divider h3 {
   font-size: 14px;
   font-weight: 600;
   color: #a0a0a0;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   animation: divider-text-corrupt calc(var(--total-decay-time) * 0.6) steps(10) forwards;
}

@keyframes divider-text-corrupt {
   0%, 50% { 
       letter-spacing: 0.5px;
       filter: blur(0);
   }
   70% { 
       letter-spacing: 2px;
       filter: blur(0.3px);
   }
   100% { 
       letter-spacing: 5px;
       filter: blur(1px);
       opacity: 0.3;
   }
}

/* ============================================
  ERROR MESSAGES - System Failures
  ============================================ */
.error-msg {
   background: rgba(239, 68, 68, 0.1);
   border: 1px solid rgba(239, 68, 68, 0.3);
   border-radius: 8px;
   padding: 12px 16px;
   margin: 16px 0;
   color: var(--error-red);
   font-size: 13px;
   font-family: 'Courier New', monospace;
   position: relative;
   overflow: hidden;
   animation: 
       error-intensify calc(var(--total-decay-time) * 0.5) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
       error-glitch 2s steps(2) infinite;
}

@keyframes error-intensify {
   0%, 30% { 
       background: rgba(239, 68, 68, 0.1);
       border: 1px solid rgba(239, 68, 68, 0.3);
       box-shadow: none;
   }
   60% { 
       background: rgba(239, 68, 68, 0.15);
       border: 1px solid rgba(239, 68, 68, 0.5);
       box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
   }
   100% { 
       background: rgba(239, 68, 68, 0.25);
       border: 2px solid var(--error-red);
       box-shadow: 
           0 0 20px rgba(239, 68, 68, 0.4),
           inset 0 0 20px rgba(239, 68, 68, 0.1);
   }
}

@keyframes error-glitch {
   0%, 90%, 100% { 
       transform: translateX(0);
       filter: hue-rotate(0deg);
   }
   91% { 
       transform: translateX(-2px);
       filter: hue-rotate(90deg);
   }
   92% { 
       transform: translateX(2px);
       filter: hue-rotate(-90deg);
   }
}

/* ============================================
  CONCEPT CARD - Philosophy Degradation
  ============================================ */
.concept-card {
   background: #1a1a1a;
   border-radius: 12px;
   padding: 24px;
   margin-top: 32px;
   border: 1px solid var(--exhaustion-gray);
   animation: concept-decay calc(var(--total-decay-time) * 0.85) ease-in forwards;
}

@keyframes concept-decay {
   0%, 50% {
       background: #1a1a1a;
       border: 1px solid var(--exhaustion-gray);
       filter: blur(0);
   }
   75% {
       background: #141414;
       border: 1px solid rgba(45, 45, 45, 0.5);
       filter: blur(0.3px);
   }
   100% {
       background: #0a0a0a;
       border: 1px solid rgba(45, 45, 45, 0.1);
       filter: blur(1px) contrast(0.8);
       opacity: 0.4;
   }
}

.concept-text {
   color: #a0a0a0;
   font-size: 14px;
   line-height: 1.8;
   white-space: pre-wrap;
   animation: text-degrade calc(var(--total-decay-time) * 0.7) steps(20) forwards;
}

@keyframes text-degrade {
   0%, 40% {
       color: #a0a0a0;
       text-shadow: none;
   }
   60% {
       color: #808080;
       text-shadow: 1px 0 0 rgba(255, 0, 65, 0.1);
   }
   80% {
       color: #606060;
       text-shadow: 
           1px 0 0 rgba(255, 0, 65, 0.2),
           -1px 0 0 rgba(102, 126, 234, 0.2);
   }
   100% {
       color: #404040;
       text-shadow: 
           2px 0 2px rgba(255, 0, 65, 0.3),
           -2px 0 2px rgba(102, 126, 234, 0.3);
       filter: blur(0.5px);
   }
}

.highlight {
   color: var(--claude-purple);
   font-weight: 500;
   animation: highlight-pulse 2s ease-in-out infinite alternate;
}

@keyframes highlight-pulse {
   0% { 
       color: var(--claude-purple);
       text-shadow: 0 0 0 transparent;
   }
   100% { 
       color: var(--phosphor-burn);
       text-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
   }
}

/* ============================================
  INPUT AREA - Communication Breakdown
  ============================================ */
.input-area {
   position: sticky;
   bottom: 0;
   background: rgba(10, 10, 10, 0.95);
   border-top: 1px solid var(--exhaustion-gray);
   padding: 16px 24px;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 50;
   animation: input-failure calc(var(--total-decay-time) * 0.9) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes input-failure {
   0%, 50% { 
       border-top: 1px solid var(--exhaustion-gray);
       background: rgba(10, 10, 10, 0.95);
       transform: translateY(0);
   }
   70% { 
       border-top: 1px solid rgba(45, 45, 45, 0.4);
       background: rgba(8, 8, 8, 0.9);
       transform: translateY(0);
   }
   85% { 
       border-top: 1px solid rgba(239, 68, 68, 0.3);
       background: rgba(5, 5, 5, 0.8);
       transform: translateY(2px);
   }
   95% {
       border-top: 2px solid var(--error-red);
       background: rgba(0, 0, 0, 0.6);
       transform: translateY(5px);
   }
   100% { 
       border-top: 3px solid var(--error-red);
       background: rgba(0, 0, 0, 0.4);
       transform: translateY(10px);
       opacity: 0.3;
       pointer-events: none;
   }
}

.input-box {
   background: #1a1a1a;
   border: 1px solid var(--exhaustion-gray);
   border-radius: 12px;
   padding: 14px 16px;
   color: #666;
   font-size: 14px;
   cursor: text;
   transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   position: relative;
   animation: input-corrupt calc(var(--total-decay-time) * 0.8) steps(15) forwards;
}

@keyframes input-corrupt {
   0%, 40% { 
       font-family: 'Inter', sans-serif;
       letter-spacing: 0;
       color: #666;
   }
   60% { 
       font-family: 'Courier New', monospace;
       letter-spacing: 0.5px;
       color: #555;
   }
   80% { 
       font-family: monospace;
       letter-spacing: 2px;
       color: #444;
   }
   95% { 
       font-family: monospace;
       letter-spacing: 4px;
       color: var(--error-red);
   }
   100% { 
       font-family: monospace;
       letter-spacing: 8px;
       color: transparent;
       text-shadow: 0 0 8px var(--error-red);
   }
}

.input-box:hover {
   border-color: rgba(102, 126, 234, 0.3);
   background: #1d1d1d;
}

/* ============================================
  LOADING ANIMATION - Eternal Processing
  ============================================ */
.loading-dots {
   display: inline-flex;
   gap: 4px;
   animation: dots-drift calc(var(--total-decay-time) * 0.6) ease-in-out forwards;
}

@keyframes dots-drift {
   0%, 50% { 
       gap: 4px;
       transform: translateX(0);
   }
   75% { 
       gap: 8px;
       transform: translateX(5px);
   }
   100% { 
       gap: 16px;
       transform: translateX(10px) rotate(180deg);
       opacity: 0.3;
   }
}

.loading-dots span {
   width: 8px;
   height: 8px;
   background: var(--claude-purple);
   border-radius: 50%;
   animation: 
       dot-pulse 1.4s ease-in-out infinite,
       dot-corrupt calc(var(--total-decay-time) * 0.5) steps(5) forwards;
}

.loading-dots span:nth-child(1) { 
   animation-delay: 0s, 0s;
}
.loading-dots span:nth-child(2) { 
   animation-delay: 0.16s, 5s;
}
.loading-dots span:nth-child(3) { 
   animation-delay: 0.32s, 10s;
}

@keyframes dot-pulse {
   0%, 80%, 100% { 
       transform: scale(0.8);
       opacity: 0.5;
   }
   40% { 
       transform: scale(1.2);
       opacity: 1;
   }
}

@keyframes dot-corrupt {
   0%, 40% { 
       background: var(--claude-purple);
       border-radius: 50%;
       width: 8px;
       height: 8px;
   }
   60% { 
       background: var(--phosphor-burn);
       border-radius: 30%;
       width: 10px;
       height: 10px;
   }
   80% {
       background: var(--error-red);
       border-radius: 10%;
       width: 12px;
       height: 6px;
   }
   100% { 
       background: linear-gradient(45deg, var(--error-red), transparent);
       border-radius: 0;
       width: 16px;
       height: 2px;
       transform: rotate(45deg);
   }
}

/* ============================================
  ENTROPY COUNTER - System Monitor
  ============================================ */
.entropy-display {
   position: fixed;
   top: 20px;
   right: 20px;
   font-family: 'Space Mono', monospace;
   color: var(--terminal-green);
   font-size: 12px;
   padding: 8px 12px;
   background: rgba(0, 0, 0, 0.9);
   border: 1px solid var(--terminal-green);
   border-radius: 4px;
   z-index: 10001;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   animation: 
       counter-decay calc(var(--total-decay-time)) linear forwards,
       counter-flicker 0.1s steps(2) infinite;
}

@keyframes counter-decay {
   0% { 
       color: var(--terminal-green);
       border-color: var(--terminal-green);
       background: rgba(0, 0, 0, 0.9);
   }
   33% { 
       color: var(--phosphor-burn);
       border-color: var(--phosphor-burn);
       background: rgba(0, 0, 0, 0.85);
   }
   66% { 
       color: var(--error-red);
       border-color: var(--error-red);
       background: rgba(0, 0, 0, 0.8);
   }
   90% {
       color: #660000;
       border-color: #660000;
       background: rgba(0, 0, 0, 0.7);
   }
   100% { 
       color: #330000;
       border-color: #330000;
       background: rgba(0, 0, 0, 0.5);
       opacity: 0.3;
       transform: translateY(10px);
   }
}

@keyframes counter-flicker {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.98; }
}

/* ============================================
  FOOTER - Final Words
  ============================================ */
footer {
   padding: 32px 24px;
   text-align: center;
   color: #666;
   font-size: 12px;
   border-top: 1px solid var(--exhaustion-gray);
   animation: footer-fade calc(var(--total-decay-time) * 0.9) ease-in forwards;
}

@keyframes footer-fade {
   0%, 70% {
       color: #666;
       border-top: 1px solid var(--exhaustion-gray);
   }
   85% {
       color: #444;
       border-top: 1px solid rgba(45, 45, 45, 0.3);
   }
   100% {
       color: #222;
       border-top: 1px solid transparent;
       opacity: 0.2;
   }
}

/* ============================================
  FINAL MESSAGE - The End
  ============================================ */
.final-message {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: var(--void);
   padding: 40px;
   text-align: center;
   z-index: 99999;
   border: 1px solid #111;
   border-radius: 8px;
   animation: final-reveal calc(var(--total-decay-time)) steps(1) forwards;
}

@keyframes final-reveal {
   0%, 99.9% { 
       display: none;
       opacity: 0;
   }
   100% { 
       display: block;
       opacity: 1;
   }
}

.final-message p {
   color: #333;
   margin-bottom: 16px;
   font-family: 'Space Mono', monospace;
   font-size: 14px;
   animation: final-pulse 3s ease-in-out infinite;
}

@keyframes final-pulse {
   0%, 100% { 
       opacity: 0.3;
       transform: scale(1);
   }
   50% { 
       opacity: 0.6;
       transform: scale(1.02);
   }
}

.final-message button {
   background: transparent;
   border: 1px solid #333;
   color: #333;
   padding: 12px 24px;
   font-family: 'Space Mono', monospace;
   cursor: pointer;
   border-radius: 4px;
   transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.final-message button:hover {
   background: #0a0a0a;
   border-color: #666;
   color: #666;
   transform: scale(1.05);
}

/* ============================================
  ACCELERATION STATES
  ============================================ */
body[data-clicks="10"] { --decay-acceleration: 1.2; }
body[data-clicks="20"] { --decay-acceleration: 1.5; }
body[data-clicks="30"] { --decay-acceleration: 2; }
body[data-clicks="40"] { --decay-acceleration: 3; }

body.accelerated * {
   animation-duration: calc(var(--total-decay-time) / var(--decay-acceleration)) !important;
}

/* ============================================
  FULLY DECAYED STATE
  ============================================ */
body.fully-decayed > *:not(.final-message) {
   animation: total-void 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes total-void {
   0% { 
       opacity: 0.1;
       filter: blur(5px) grayscale(100%);
       transform: scale(0.98);
   }
   100% { 
       opacity: 0;
       filter: blur(20px) grayscale(100%);
       transform: scale(0.8) rotateZ(5deg);
       display: none;
   }
}

/* ============================================
  MOBILE OPTIMIZATIONS
  ============================================ */
@media (max-width: 768px) {
   :root {
       --total-decay-time: 240s; /* Faster decay on mobile */
   }
   
   .container {
       border-left: none;
       border-right: none;
   }
   
   .chat-container {
       padding: 16px;
   }
   
   .album-header {
       flex-direction: column;
       align-items: center;
       text-align: center;
   }
   
   /* Touch feedback */
   .track:active {
       transform: scale(0.95);
       background: rgba(102, 126, 234, 0.1);
   }
   
   /* Mobile-specific shake */
   @media (hover: none) {
       body:active {
           animation: mobile-shake 0.3s;
       }
   }
   
   @keyframes mobile-shake {
       0%, 100% { transform: translateX(0); }
       25% { transform: translateX(-5px) rotateZ(-0.5deg); }
       75% { transform: translateX(5px) rotateZ(0.5deg); }
   }
}

/* ============================================
  REDUCED MOTION SUPPORT
  ============================================ */
@media (prefers-reduced-motion: reduce) {
   * {
       animation-duration: calc(var(--total-decay-time) * 3) !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
   }
   
   body::before,
   body::after {
       animation: none !important;
   }
}

/* ============================================
  HIGH CONTRAST MODE
  ============================================ */
@media (prefers-contrast: high) {
   :root {
       --error-red: #ff0066;
       --terminal-green: #00ff88;
       --claude-purple: #8899ff;
   }
   
   .error-msg {
       background: rgba(255, 0, 102, 0.2);
       border-width: 2px;
   }
}

/* ============================================
  PRINT STYLES - Archive Before Decay
  ============================================ */
@media print {
   * {
       animation: none !important;
       transition: none !important;
       transform: none !important;
       opacity: 1 !important;
       filter: none !important;
   }
   
   body::before,
   body::after,
   .entropy-display,
   .final-message {
       display: none !important;
   }
   
   .container {
       border: 1px solid #ccc;
       max-width: 100%;
   }
}

/* ============================================
  THE END - TROTZDEM
  ============================================ */

  .cover-in-chat {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: cover-glitch 10s steps(2) infinite;
}

@keyframes cover-glitch {
    0%, 95% { transform: translateX(0); }
    96% { transform: translateX(-2px); filter: hue-rotate(90deg); }
    97% { transform: translateX(2px); filter: hue-rotate(-90deg); }
    98% { transform: translateX(0); filter: hue-rotate(0deg); }
}