/* public/assets/css/preloader-style.css - Mit neuem Glitch-Code */

/* Grundlayout & Hintergrund */
html, body {
  margin: 0; padding: 0; background-color: #212121; color: #eceff1;
  font-family: 'WorkSans', sans-serif; overflow: hidden; height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Wrapper für Logo und Balken */
.preloader-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    max-width: 400px;
}

/* Logo Styling & Fade-In */
/* WICHTIG: Das Logo braucht jetzt die Klasse .logo-overlay, damit der neue Glitch greift */
#logo.logo-overlay {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  max-width: 100%;
  max-height: 40vh;
  height: auto;
  display: block;
  margin-bottom: 1.5rem;
}
#logo.logo-overlay.visible {
  opacity: 1;
}

/* Entfernte alte #logo.glitch-active Regel */

/* LADEBALKEN (Basis bleibt) */
.progress-bar-container {
  width: 100%;
  height: 8px;
  background-color: #323232;
  border-radius: 4px;
  margin-top: 0;
  margin-bottom: 1.5rem; /* Abstand zum (entfernten) Text war hier */
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease-out 0.4s;
}
.progress-bar-container.visible {
  opacity: 1;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #536dfe; /* Standardfarbe */
  transition: width 10s linear;
}

/* === NEUER GLITCH EFFEKT (CODE VOM USER) === */
@keyframes glitch {
  0% {
      transform: none;
      filter: none;
      clip-path: inset(0 0 0 0); /* Clip-Path zurücksetzen */
  }
  5% {
      transform: translate(-15px, 0) skewX(-8deg);
      filter: drop-shadow(-10px 0 #bf3f2f);
      clip-path: inset(5% 0 80% 0);
  }
  10% {
      transform: translate(15px, 0) skewX(10deg);
      filter: drop-shadow(12px 0 #007acc);
      clip-path: inset(15% 0 70% 0);
  }
  15% {
      transform: translate(-12px, 4px) rotate(1deg);
      filter: drop-shadow(-12px 4px #00c853);
      clip-path: inset(25% 0 55% 0);
  }
  20% {
      transform: translate(14px, -4px) rotate(-1deg);
      filter: drop-shadow(14px -4px #ff6d00);
      clip-path: inset(40% 0 40% 0);
  }
  25% {
      transform: translate(-10px, 3px) skewX(5deg);
      filter: drop-shadow(-10px 3px #4caf50);
      clip-path: inset(55% 0 25% 0);
  }
  30% {
      transform: translate(12px, -3px) skewX(-5deg);
      filter: drop-shadow(12px -3px #eceff1);
      clip-path: inset(70% 0 10% 0);
  }
  35%,
  100% {
      transform: none;
      filter: none;
      clip-path: inset(0 0 0 0); /* Sicherstellen, dass Clip-Path am Ende weg ist */
  }
}

@keyframes glitch-progress {
  0% {
    transform: none;
    background-color: #536dfe;
  }
  10% {
    transform: translateX(-4px);
    background-color: #bf3f2f;
  }
  20% {
    transform: translateX(4px);
    background-color: #007acc;
  }
  30% {
    transform: translateY(-2px);
    background-color: #00c853;
  }
  40% {
    transform: translateY(2px);
    background-color: #ff6d00;
  }
  50% {
    transform: translateX(0px) translateY(0px); /* Korrigiert zu translateX */
    background-color: #4caf50;
  }
  60% {
    transform: translateX(-3px);
    background-color: #eceff1;
  }
  70% {
    transform: translateX(3px);
    background-color: #536dfe;
  }
  80%, 100% {
    transform: none;
    background-color: #536dfe;
  }
}

/* Klassen zum Aktivieren der Animationen */
.progress-bar.glitch-active {
  animation: glitch-progress 0.25s steps(2, end); /* Nur die Animation, keine Endlosschleife */
}

.logo-overlay.glitch-active {
  animation: glitch 0.25s steps(2, end); /* Nur die Animation, keine Endlosschleife */
}
/* === ENDE NEUER GLITCH EFFEKT === */


/* Entfernte Regeln für .loader-text und dessen .glitching Zustand */


/* Fade-Out Layer (Bleibt wie im neuen Projekt) */
.fade-out {
  position: fixed; inset: 0; background: #212121; opacity: 0;
  z-index: 9999; pointer-events: none; transition: opacity 1.5s ease-in-out;
}
.fade-out.active {
  opacity: 1;
}