/* docs/stylesheets/extra.css */
.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
  font-family: 'Courier New', Courier, monospace; 
  padding: 2rem;
  border: 1px dashed rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.glitch-wrapper {
  position: relative;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 4px;
  margin-bottom: 1rem;
}

/* Base adjustment for light/dark mode */
[data-md-color-scheme="slate"] .glitch-wrapper {
    color: #fff;
}
[data-md-color-scheme="default"] .glitch-wrapper {
    color: #333;
}

.glitch {
  position: relative;
  display: inline-block;
}

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

[data-md-color-scheme="slate"] .glitch::before,
[data-md-color-scheme="slate"] .glitch::after {
    background: #1e1e1e;
}

[data-md-color-scheme="default"] .glitch::before,
[data-md-color-scheme="default"] .glitch::after {
    background: #fff;
}


.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #00fff9;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(20px, 9999px, 10px, 0); }
  20% { clip: rect(60px, 9999px, 80px, 0); }
  40% { clip: rect(10px, 9999px, 30px, 0); }
  60% { clip: rect(90px, 9999px, 100px, 0); }
  80% { clip: rect(40px, 9999px, 20px, 0); }
  100% { clip: rect(70px, 9999px, 50px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(90px, 9999px, 100px, 0); }
  20% { clip: rect(20px, 9999px, 10px, 0); }
  40% { clip: rect(60px, 9999px, 80px, 0); }
  60% { clip: rect(10px, 9999px, 30px, 0); }
  80% { clip: rect(80px, 9999px, 60px, 0); }
  100% { clip: rect(30px, 9999px, 50px, 0); }
}

.sub-text {
  font-size: 1.2rem;
  color: var(--md-code-fg-color);
  opacity: 0;
  animation: fade-in 2s ease-in-out forwards 1s;
}

@keyframes fade-in {
  to { opacity: 1; }
}

.loader {
  margin-top: 2rem;
  width: 50%;
  height: 4px;
  background: rgba(128,128,128,0.3);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.loader::after {
  content: '';
  position: absolute;
  left: -50%;
  width: 50%;
  height: 100%;
  background: #7e57c2; /* Indigo-ish */
  animation: load 2s infinite ease-in-out;
}

@keyframes load {
  0% { left: -50%; }
  100% { left: 100%; }
}