/* 🕷️ ANT TEA GAMES — Glitch Effects CSS */

/* Enhanced Glitch Effects */
.glitch-active {
  animation: glitchActive 0.2s ease-in-out;
  position: relative;
}

@keyframes glitchActive {
  0% { transform: translateX(0); }
  10% { transform: translateX(-2px); }
  20% { transform: translateX(2px); }
  30% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  50% { transform: translateX(0); }
  60% { transform: translateX(-1px); }
  70% { transform: translateX(1px); }
  80% { transform: translateX(-2px); }
  90% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* Glitch Intensity Levels */
.glitch-intensity-1 .glitch-text {
  animation: glitchSubtle 3s infinite;
}

.glitch-intensity-2 .glitch-text {
  animation: glitchMedium 2s infinite;
}

.glitch-intensity-3 .glitch-text {
  animation: glitchIntense 1s infinite;
}

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

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

@keyframes glitchIntense {
  0%, 100% { transform: translateX(0) translateY(0); }
  5% { transform: translateX(-3px) translateY(1px); }
  10% { transform: translateX(3px) translateY(-1px); }
  15% { transform: translateX(-2px) translateY(2px); }
  20% { transform: translateX(2px) translateY(-2px); }
  25% { transform: translateX(-1px) translateY(1px); }
  30% { transform: translateX(1px) translateY(-1px); }
  35% { transform: translateX(-2px) translateY(0); }
  40% { transform: translateX(2px) translateY(0); }
  45% { transform: translateX(0) translateY(-1px); }
  50% { transform: translateX(0) translateY(1px); }
  55% { transform: translateX(-1px) translateY(-1px); }
  60% { transform: translateX(1px) translateY(1px); }
  65% { transform: translateX(-2px) translateY(1px); }
  70% { transform: translateX(2px) translateY(-1px); }
  75% { transform: translateX(-1px) translateY(2px); }
  80% { transform: translateX(1px) translateY(-2px); }
  85% { transform: translateX(-3px) translateY(0); }
  90% { transform: translateX(3px) translateY(0); }
  95% { transform: translateX(0) translateY(-2px); }
}

/* Corruption Level Effects */
.corruption-level-1 .corrupted-text {
  opacity: 0.9;
  filter: contrast(1.1);
}

.corruption-level-2 .corrupted-text {
  opacity: 0.8;
  filter: contrast(1.2) brightness(1.1);
}

.corruption-level-3 .corrupted-text {
  opacity: 0.7;
  filter: contrast(1.3) brightness(1.2) hue-rotate(10deg);
}

/* Visual Noise Overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.1;
  background-image: 
    radial-gradient(circle at 20% 50%, transparent 20%, rgba(255,255,255,0.1) 21%, rgba(255,255,255,0.1) 34%, transparent 35%),
    radial-gradient(circle at 80% 20%, transparent 20%, rgba(255,255,255,0.1) 21%, rgba(255,255,255,0.1) 34%, transparent 35%),
    radial-gradient(circle at 40% 80%, transparent 20%, rgba(255,255,255,0.1) 21%, rgba(255,255,255,0.1) 34%, transparent 35%);
  animation: noise 0.2s infinite;
}

@keyframes noise {
  0% { transform: translateX(0); }
  10% { transform: translateX(-1px); }
  20% { transform: translateX(1px); }
  30% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  50% { transform: translateX(0); }
  60% { transform: translateX(-1px); }
  70% { transform: translateX(1px); }
  80% { transform: translateX(-1px); }
  90% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

/* Enhanced Glitch Text Effects */
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch-text::before {
  color: #ff0000;
  animation: glitchBefore 0.3s infinite;
}

.glitch-text::after {
  color: #00ff00;
  animation: glitchAfter 0.3s infinite;
}

@keyframes glitchBefore {
  0%, 100% { transform: translateX(0); opacity: 0; }
  10% { transform: translateX(-2px); opacity: 0.7; }
  20% { transform: translateX(2px); opacity: 0.7; }
  30% { transform: translateX(-1px); opacity: 0.7; }
  40% { transform: translateX(1px); opacity: 0.7; }
  50% { transform: translateX(0); opacity: 0; }
}

@keyframes glitchAfter {
  0%, 100% { transform: translateX(0); opacity: 0; }
  10% { transform: translateX(2px); opacity: 0.7; }
  20% { transform: translateX(-2px); opacity: 0.7; }
  30% { transform: translateX(1px); opacity: 0.7; }
  40% { transform: translateX(-1px); opacity: 0.7; }
  50% { transform: translateX(0); opacity: 0; }
}

/* Broken Elements System Styles */
.broken-element {
  position: relative;
  transition: all 0.3s ease;
}

.broken-link {
  text-decoration: line-through;
  opacity: 0.7;
  cursor: not-allowed;
}

.broken-image {
  filter: grayscale(100%) contrast(0.5) brightness(0.7);
  opacity: 0.6;
}

.broken-text {
  opacity: 0.8;
  font-style: italic;
  color: #ff0000;
}

.broken-button {
  opacity: 0.6;
  cursor: not-allowed;
  background: #666666 !important;
  color: #ffffff !important;
}

.broken-form {
  opacity: 0.7;
  pointer-events: none;
}

.broken-input {
  opacity: 0.6;
  background: #f0f0f0;
  color: #666666;
  cursor: not-allowed;
}

.broken-layout {
  opacity: 0.9;
  border: 1px dashed #ff0000;
}

/* Broken Element Animations */
@keyframes brokenElementPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.4; }
}

.broken-element {
  animation: brokenElementPulse 2s infinite;
}

/* Broken Element Hover Effects */
.broken-element:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

.broken-link:hover {
  color: #ff0000 !important;
  text-shadow: 0 0 5px #ff0000;
}

.broken-button:hover {
  background: #ff0000 !important;
  color: #ffffff !important;
  transform: scale(1.05);
}

.broken-image:hover {
  filter: grayscale(100%) contrast(0.3) brightness(0.5);
  transform: scale(1.02);
}

.broken-text:hover {
  color: #ff0000;
  text-shadow: 0 0 3px #ff0000;
  transform: scale(1.01);
}

/* Broken Element States */
.broken-element::before {
  content: '⚠️';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 12px;
  color: #ff0000;
  z-index: 1000;
  animation: brokenWarning 1s infinite;
}

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

/* Broken Element Overlay */
.broken-element::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(255, 0, 0, 0.1) 2px,
    rgba(255, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* Interactive Manifesto Styles */
.manifesto-content {
  position: relative;
  transition: all 0.3s ease;
}

.manifesto-content.corrupted {
  filter: contrast(1.2) brightness(0.9);
  opacity: 0.9;
}

.manifesto-content.broken {
  filter: contrast(0.8) brightness(0.8);
  opacity: 0.8;
  transform: rotate(0.5deg);
}

.manifesto-section {
  transition: all 0.3s ease;
  padding: 10px;
  margin: 10px 0;
}

.manifesto-section:hover {
  transform: translateY(-2px);
}

.manifesto-text p,
.manifesto-text h2,
.manifesto-text h3 {
  transition: all 0.3s ease;
  cursor: pointer;
}

.manifesto-text p:hover,
.manifesto-text h2:hover,
.manifesto-text h3:hover {
  transform: scale(1.02);
}

.corrupted-text {
  color: #ff0000;
  font-style: italic;
  animation: corruptedPulse 1s infinite;
}

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

.broken-layout {
  animation: brokenLayout 3s ease-in-out;
}

@keyframes brokenLayout {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

/* Variant-specific Manifesto Effects */
.variant-manifesto-focused .manifesto-section:hover {
  border-left: 5px solid #ff0000;
  background: rgba(255, 0, 0, 0.05);
}

.variant-games-focused .manifesto-section:hover {
  box-shadow: 0 0 20px #00ff00;
  background: rgba(0, 255, 0, 0.05);
}

.variant-zines-focused .manifesto-section:hover {
  background: rgba(139, 0, 0, 0.1);
  filter: contrast(1.1);
}

.variant-shop-focused .manifesto-section:hover {
  background: rgba(255, 105, 180, 0.1);
  animation: shopBounce 0.5s ease-in-out;
}

.variant-collab-focused .manifesto-section:hover {
  background: rgba(0, 255, 255, 0.1);
  border-radius: 10px;
}

.variant-broken-focused .manifesto-section:hover {
  transform: rotate(2deg) scale(1.02);
  filter: hue-rotate(180deg);
}

/* Interactive Manifesto Notifications */
.notification-revolutionary {
  background: #ff0000;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.notification-game {
  background: #00ff00;
  color: #000000;
  border: 2px solid #000000;
}

.notification-zine {
  background: #8b0000;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.notification-commercial {
  background: #ff69b4;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.notification-community {
  background: #00ffff;
  color: #000000;
  border: 2px solid #000000;
}

.notification-chaos {
  background: #ff00ff;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.notification-warning {
  background: #ffff00;
  color: #000000;
  border: 2px solid #000000;
}

.notification-lie {
  background: #666666;
  color: #ffffff;
  border: 2px solid #ffffff;
}

/* Ant Trail Animations */
.ant-trails-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}

.ant {
  position: absolute;
  border-radius: 50%;
  transition: all 0.1s ease;
  cursor: pointer;
  pointer-events: auto;
}

.ant:hover {
  transform: scale(1.2);
}

.ant-trail {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  pointer-events: none;
}

/* Ant Variant Styles */
.ant-manifesto-focused {
  background: #ff0000;
  box-shadow: 0 0 15px #ff0000;
}

.ant-games-focused {
  background: #00ff00;
  box-shadow: 0 0 15px #00ff00;
}

.ant-zines-focused {
  background: #8b0000;
  box-shadow: 0 0 10px #8b0000;
}

.ant-shop-focused {
  background: #ff69b4;
  box-shadow: 0 0 15px #ff69b4;
}

.ant-collab-focused {
  background: #00ffff;
  box-shadow: 0 0 15px #00ffff;
}

.ant-broken-focused {
  background: #ff00ff;
  box-shadow: 0 0 20px #ff00ff;
}

/* Ant Animations */
@keyframes antExplode {
  0% { transform: scale(1); }
  50% { transform: scale(2); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes antGlitch {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

@keyframes antCommercial {
  0% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(0.8); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes antBreak {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.2); }
  50% { transform: rotate(180deg) scale(0.8); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Ant Message Animations */
@keyframes antMessageAppear {
  0% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.5); 
  }
  100% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
  }
}

@keyframes antMessageDisappear {
  0% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
  }
  100% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.5); 
  }
}

/* Ant Notification Styles */
.ant-notification-revolutionary {
  background: #ff0000;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.ant-notification-game {
  background: #00ff00;
  color: #000000;
  border: 2px solid #000000;
}

.ant-notification-zine {
  background: #8b0000;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.ant-notification-commercial {
  background: #ff69b4;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.ant-notification-community {
  background: #00ffff;
  color: #000000;
  border: 2px solid #000000;
}

.ant-notification-chaos {
  background: #ff00ff;
  color: #ffffff;
  border: 2px solid #ffffff;
}

/* Glitch Text Effects */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  overflow: hidden;
}

.glitch-text::before {
  animation: glitch-1 0.5s infinite;
  color: var(--color-glitch);
  z-index: -1;
}

.glitch-text::after {
  animation: glitch-2 0.5s infinite;
  color: var(--color-corruption);
  z-index: -2;
}

/* Glitch Button Effects */
.glitch-button {
  position: relative;
  overflow: hidden;
}

.glitch-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-glitch), transparent);
  transition: left 0.5s ease;
}

.glitch-button:hover::before {
  left: 100%;
}

/* Glitch Image Effects */
.glitch-image {
  position: relative;
  overflow: hidden;
}

.glitch-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 0, 0.1) 2px,
    rgba(0, 255, 0, 0.1) 4px
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glitch-image:hover::before {
  opacity: 1;
}

/* Text Corruption Effects */
.corrupted-text {
  position: relative;
}

.corrupted-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 1px,
    rgba(255, 0, 255, 0.1) 1px,
    rgba(255, 0, 255, 0.1) 2px
  );
  pointer-events: none;
  animation: corruption 2s infinite;
}

/* Noise Overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><filter id="noise"><feTurbulence baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter></defs><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.1"/></svg>');
  pointer-events: none;
  z-index: 100;
  opacity: var(--noise-opacity);
  animation: noise 0.2s infinite;
}

/* Broken Elements */
.broken-element {
  position: relative;
  overflow: hidden;
}

.broken-element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 0, 0, 0.1) 10px,
    rgba(255, 0, 0, 0.1) 20px
  );
  animation: broken 1s infinite;
  pointer-events: none;
}

/* Corrupted Navigation */
.corrupted-nav a {
  position: relative;
}

.corrupted-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-corruption);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.corrupted-nav a:hover::after {
  transform: scaleX(1);
}

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

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

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

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

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

/* Intensity-based Glitch Effects */
.glitch-intensity-1 .glitch-text::before,
.glitch-intensity-1 .glitch-text::after {
  animation-duration: 1s;
}

.glitch-intensity-2 .glitch-text::before,
.glitch-intensity-2 .glitch-text::after {
  animation-duration: 0.3s;
}

.glitch-intensity-3 .glitch-text::before,
.glitch-intensity-3 .glitch-text::after {
  animation-duration: 0.1s;
}

/* Corruption Level Effects */
.corruption-level-1 {
  filter: contrast(1.2) brightness(1.1);
}

.corruption-level-2 {
  filter: contrast(1.5) brightness(1.2) saturate(1.3);
}

.corruption-level-3 {
  filter: contrast(2) brightness(1.5) saturate(2) hue-rotate(10deg);
}

/* Broken Layout Effects */
.broken-layout {
  transform: rotate(0.5deg);
}

.broken-layout:nth-child(even) {
  transform: rotate(-0.3deg);
}

.broken-layout:nth-child(3n) {
  transform: rotate(0.2deg);
}

/* Anti-User Experience Effects */
.anti-scroll {
  overflow: hidden;
  animation: antiScroll 0.1s infinite;
}

@keyframes antiScroll {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* Pop-up Hell Effects */
.popup-hell .popup {
  animation: popupHell 0.5s infinite;
}

@keyframes popupHell {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(1deg);
  }
  50% {
    transform: scale(0.9) rotate(-1deg);
  }
  75% {
    transform: scale(1.05) rotate(0.5deg);
  }
}

/* Right-click Disabled Effect */
.no-right-click {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.no-right-click::after {
  content: 'NO RIGHT CLICKING';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: var(--color-background);
  padding: var(--spacing-normal);
  font-family: var(--font-accent);
  font-weight: bold;
  text-transform: uppercase;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.no-right-click.show-error::after {
  opacity: 1;
}

/* Mobile Glitch Effects */
@media (max-width: 768px) {
  .glitch-text::before,
  .glitch-text::after {
    animation-duration: 0.8s;
  }
  
  .noise-overlay {
    opacity: calc(var(--noise-opacity) * 0.5);
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .glitch-text::before {
    color: var(--color-background);
  }
  
  .glitch-text::after {
    color: var(--color-primary);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .glitch-text::before,
  .glitch-text::after {
    animation: none;
  }
  
  .noise-overlay {
    animation: none;
  }
  
  .ant-trail,
  .ant-trail-animation {
    animation: none;
  }
}