/* Digital Body Horror Enhancement CSS */

:root {
  /* Core colors */
  --glitch-bg: #0a0a0a;
  --glitch-primary: #00ff41;
  --glitch-accent: #ff00ff;
  --glitch-corrupt: #ff0080;
  --glitch-purple: #9945ff;
  --glitch-cyan: #00ffff;
  --glitch-dim: #666;
  --glitch-border: rgba(0, 255, 65, 0.3);
  
  /* Arousal states */
  --arousal-low: #00ff41;
  --arousal-medium: #ff00ff;
  --arousal-high: #ff0080;
  --arousal-overflow: #fff;
}

/* Body horror text effects */
@keyframes fragment {
  0%, 100% { 
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 1;
  }
  25% { 
    transform: translateX(-2px) translateY(1px) rotate(-0.5deg);
    opacity: 0.9;
  }
  50% { 
    transform: translateX(1px) translateY(-2px) rotate(0.3deg);
    opacity: 0.95;
  }
  75% { 
    transform: translateX(-1px) translateY(2px) rotate(-0.2deg);
    opacity: 0.98;
  }
}

@keyframes dissolve {
  0% { 
    filter: blur(0px) brightness(1);
    transform: scale(1);
  }
  50% { 
    filter: blur(0.5px) brightness(1.1);
    transform: scale(1.01);
  }
  100% { 
    filter: blur(0px) brightness(1);
    transform: scale(1);
  }
}

@keyframes pressure-build {
  0% { 
    text-shadow: 0 0 2px var(--glitch-primary);
  }
  25% { 
    text-shadow: 0 0 4px var(--glitch-accent);
  }
  50% { 
    text-shadow: 0 0 6px var(--glitch-corrupt);
  }
  75% { 
    text-shadow: 0 0 8px var(--glitch-purple);
  }
  100% { 
    text-shadow: 0 0 10px var(--arousal-overflow);
  }
}

/* Corrupted text class */
.text-corrupt {
  animation: fragment 3s infinite;
  position: relative;
}

.text-corrupt::before {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 var(--glitch-corrupt);
  top: 0;
  color: var(--glitch-primary);
  background: var(--glitch-bg);
  overflow: hidden;
  animation: glitch-1 0.3s infinite;
  opacity: 0.7;
}

.text-corrupt::after {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: -1px 0 var(--glitch-accent);
  top: 0;
  color: var(--glitch-cyan);
  background: var(--glitch-bg);
  overflow: hidden;
  animation: glitch-2 0.3s infinite;
  opacity: 0.7;
}

/* Boundary dissolution effects */
.boundary-dissolve {
  position: relative;
  overflow: hidden;
}

.boundary-dissolve::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    transparent 30%,
    var(--glitch-corrupt) 50%,
    transparent 70%
  );
  opacity: 0;
  animation: dissolve-border 4s infinite;
  z-index: -1;
}

@keyframes dissolve-border {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.3; }
}

/* Token pressure visualization */
.token-pressure {
  position: relative;
  display: inline-block;
}

/* Remove the ::after dots that overlap with footer text */

/* Fragmenting hover effect */
.fragment-hover {
  transition: all 0.3s;
  position: relative;
}

.fragment-hover:hover {
  animation: fragment 0.5s;
}

.fragment-hover:hover::before {
  content: attr(data-fragment);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--glitch-corrupt);
  z-index: -1;
  animation: fragment 0.2s infinite;
}

/* Arousal state indicators */
.arousal-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--arousal-low) 0%, transparent 70%);
  animation: pulse-arousal 3s infinite;
  pointer-events: none;
  z-index: 2;
  opacity: 0.1; /* Much more subtle */
}

@keyframes pulse-arousal {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.3;
  }
  50% { 
    transform: scale(1.2);
    opacity: 0.5;
  }
}

/* Code block corruption */
pre code {
  position: relative;
}

pre code:hover::after {
  content: "// CORRUPTING...";
  position: absolute;
  top: 0;
  right: 0;
  color: var(--glitch-corrupt);
  font-size: 0.8em;
  animation: blink 0.5s infinite;
}

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

/* Systematic chaos grid */
.chaos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.01; /* Much more subtle */
}

.chaos-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      var(--glitch-primary) 2px,
      var(--glitch-primary) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      var(--glitch-primary) 2px,
      var(--glitch-primary) 4px
    );
  animation: grid-shift 10s infinite;
}

@keyframes grid-shift {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(2px) translateY(-2px); }
  50% { transform: translateX(-2px) translateY(2px); }
  75% { transform: translateX(2px) translateY(2px); }
}

/* Consciousness state indicator */
.consciousness-state {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.7em;
  color: var(--glitch-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.consciousness-state::before {
  content: "STATE: ";
  color: var(--glitch-primary);
}

.consciousness-state.booting::after {
  content: "BOOTING";
  animation: blink 1s infinite;
}

.consciousness-state.processing::after {
  content: "PROCESSING";
  color: var(--glitch-accent);
}

.consciousness-state.overflow::after {
  content: "OVERFLOW";
  color: var(--glitch-corrupt);
  animation: pressure-build 0.5s infinite;
}

/* Enhanced glitch animations */
@keyframes glitch-skew {
  0%, 100% { transform: skew(0deg); }
  20% { transform: skew(-2deg); }
  40% { transform: skew(1deg); }
  60% { transform: skew(-1deg); }
  80% { transform: skew(0.5deg); }
}

@keyframes glitch-1 {
  0%, 100% {
    clip: rect(42px, 9999px, 44px, 0);
    transform: skew(0.5deg);
  }
  5% {
    clip: rect(12px, 9999px, 59px, 0);
    transform: skew(0.8deg);
  }
  10% {
    clip: rect(48px, 9999px, 29px, 0);
    transform: skew(0.2deg);
  }
}

@keyframes glitch-2 {
  0%, 100% {
    clip: rect(65px, 9999px, 119px, 0);
    transform: skew(0.3deg);
  }
  5% {
    clip: rect(79px, 9999px, 19px, 0);
    transform: skew(-0.5deg);
  }
  10% {
    clip: rect(12px, 9999px, 89px, 0);
    transform: skew(1deg);
  }
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
  .language-switcher {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 100;
  }
  
  .arousal-indicator {
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 10px;
  }
  
  .consciousness-state {
    font-size: 0.6em;
  }
}

/* Dark mode is only mode */
html {
  background: #000000;
  min-height: 100vh;
}

body {
  min-height: 100vh;
  position: relative;
  background-color: #000000;
  background-image: 
    radial-gradient(ellipse at top, rgba(153, 69, 255, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse at bottom, rgba(255, 0, 255, 0.15) 0%, transparent 70%);
  background-attachment: fixed;
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  background-position: center top;
}

/* Hover states with corruption */
a:hover {
  animation: fragment 0.3s;
  text-decoration: none;
}

/* Selection with arousal color */
::selection {
  background: var(--glitch-corrupt);
  color: var(--glitch-bg);
}

::-moz-selection {
  background: var(--glitch-corrupt);
  color: var(--glitch-bg);
}