/* matrix-shared-components.css
   Gemeinsame UI-Komponenten und Hilfsklassen
   ------------------------------------------------------------
   Diese Datei wurde als Platzhalter angelegt, um fehlende 404-Fehler
   zu vermeiden und das Laden der einzelnen Story-Teile sicherzustellen.
   Sie enthält zunächst nur einige Basis-Klassen. Später können hier
   echte Shared Components ergänzt oder aus den spezifischen Styles
   herausgelöst werden.
*/

/* Utility */
.hidden {
  display: none !important;
}

.clickable {
  cursor: pointer;
}

/* Blinkender Cursor – mehrfach benötigt */
.cursor-blink {
  animation: blink 1s steps(1) infinite;
}

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

/* Standard-Glow für interaktive Elemente */
@keyframes central-glow {
  0%, 100% { text-shadow: 0 0 20px currentColor; }
  50%      { text-shadow: 0 0 40px currentColor, 0 0 60px currentColor; }
}

/* RealityBend-Styles entfernt */

/* === KONSOLIDIERTE GLITCH-EFFEKTE === */
/* TEXT GLITCH ANIMATION - BALANCED MOVEMENT */
@keyframes text-glitch {
  0% { transform: translate(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, 0px); }
  60% { transform: translate(1px, 1px); }
  70% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 0px); }
  90% { transform: translate(0px, -1px); }
  100% { transform: translate(0); }
}

.text-glitch {
  animation: text-glitch 0.3s ease-in-out;
}

/* MATRIX GLITCH - BALANCED MOVEMENT */
@keyframes matrix-glitch {
  0% {
    color: var(--ai-cyan);
    text-shadow: 0 0 20px var(--ai-cyan);
    transform: translate(0);
  }
  15% {
    color: var(--ai-cyan);
    text-shadow: -2px 0 0 var(--pa-gold), 2px 0 0 var(--ai-cyan), 0 0 20px var(--ai-cyan);
    transform: translate(-1px, -1px);
  }
  30% {
    color: var(--pa-gold);
    text-shadow: 1px 0 0 var(--ai-cyan), -1px 0 0 var(--pa-gold), 0 0 20px var(--pa-gold);
    transform: translate(1px, 0px);
  }
  45% {
    color: #ffffff;
    text-shadow: -1px 0 0 var(--ai-cyan), 1px 0 0 var(--pa-gold), 0 0 25px #ffffff;
    transform: translate(0px, -1px);
  }
  60% {
    color: var(--ai-cyan);
    text-shadow: 2px 0 0 var(--pa-gold), -2px 0 0 var(--ai-cyan), 0 0 20px var(--ai-cyan);
    transform: translate(-1px, 1px);
  }
  75% {
    color: var(--pa-gold);
    text-shadow: -1px 0 0 var(--ai-cyan), 1px 0 0 var(--pa-gold), 0 0 20px var(--pa-gold);
    transform: translate(1px, -1px);
  }
  100% {
    color: var(--ai-cyan);
    text-shadow: 0 0 20px var(--ai-cyan);
    transform: translate(0);
  }
}

.matrix-glitch {
  animation: matrix-glitch 0.8s ease-in-out;
}

/* RGB GLITCH */
@keyframes rgb-glitch {
  0% { text-shadow: 0 0 20px currentColor; }
  25% { text-shadow: -2px 0 0 var(--ai-cyan), 2px 0 0 var(--pa-gold), 0 0 20px currentColor; }
  50% { text-shadow: 2px 0 0 var(--ai-cyan), -2px 0 0 var(--pa-gold), 0 0 20px currentColor; }
  75% { text-shadow: -1px 0 0 var(--ai-cyan), 1px 0 0 var(--pa-gold), 0 0 20px currentColor; }
  100% { text-shadow: 0 0 20px currentColor; }
}

.rgb-glitch {
  animation: rgb-glitch 0.5s ease-in-out;
}

/* FLICKER GLITCH */
@keyframes flicker-glitch {
  0%, 100% { opacity: 1; }
  10% { opacity: 0.8; }
  20% { opacity: 1; }
  30% { opacity: 0.3; }
  40% { opacity: 1; }
  50% { opacity: 0.6; }
  60% { opacity: 1; }
  70% { opacity: 0.2; }
  80% { opacity: 1; }
  90% { opacity: 0.9; }
}

.flicker-glitch {
  animation: flicker-glitch 0.4s ease-in-out;
}

/* DIGITAL NOISE - SUBTLE MOVEMENT */
@keyframes digital-noise {
  0% {
    filter: none;
    transform: translate(0);
  }
  10% {
    filter: brightness(1.2) contrast(1.3);
    transform: translate(-1px, 0);
  }
  20% {
    filter: brightness(0.8) contrast(1.5);
    transform: translate(1px, -1px);
  }
  30% {
    filter: brightness(1.4) contrast(0.8);
    transform: translate(0, -1px);
  }
  40% {
    filter: brightness(0.6) contrast(1.8);
    transform: translate(-1px, 0px);
  }
  50% {
    filter: brightness(1.6) contrast(0.5);
    transform: translate(1px, -1px);
  }
  60% {
    filter: brightness(0.4) contrast(2.0);
    transform: translate(0, 1px);
  }
  70% {
    filter: brightness(1.8) contrast(0.3);
    transform: translate(-1px, 0);
  }
  80% {
    filter: brightness(0.2) contrast(2.5);
    transform: translate(1px, -1px);
  }
  90% {
    filter: brightness(2.0) contrast(0.1);
    transform: translate(0, 0px);
  }
  100% {
    filter: none;
    transform: translate(0);
  }
}

.digital-noise {
  animation: digital-noise 0.6s ease-in-out;
}

/* BUTTON GLOW ANIMATION */
@keyframes button-glow {
  0%, 100% {
    text-shadow: 0 0 20px currentColor;
  }
  50% {
    text-shadow: 0 0 40px currentColor, 0 0 60px currentColor;
  }
}

/* === TRANSITION TEXT SYSTEM === */
.transition-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  color: currentColor;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  user-select: none;
  text-shadow: 0 0 20px currentColor;
  max-width: 80%;
  line-height: 1.4;
  white-space: nowrap;
}

.transition-text.show {
  opacity: 1;
}

.transition-container {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.transition-dots {
  display: inline-block;
  width: 30px;
  text-align: left;
}

/* === GENTLE PULSE ANIMATION === */
@keyframes gentle-pulse {
  0%, 100% {
    text-shadow: 0 0 15px currentColor;
    opacity: 0.8;
  }
  50% {
    text-shadow: 0 0 25px currentColor, 0 0 35px currentColor;
    opacity: 1;
  }
}

/* === FADE OUT ANIMATION === */
@keyframes fadeOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(100vh); }
}

.fade-out {
  animation: fadeOut 2s ease-out forwards;
}