/**
 * Glitch Theme Styles
 * Aggressive cyberpunk data corruption
 */

.theme-glitch {
  background-color: var(--glitch-bg, #000);
  font-family: 'Courier New', monospace; /* Fallback */
  font-family: 'Arial Black', 'Impact', sans-serif;
  position: relative;
  overflow: hidden;
}

/* Background flash */
.theme-glitch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  animation: glitch-flash 5s infinite steps(1);
}

/* Base Text */
.theme-glitch .glitch-sign-text,
.theme-glitch .glitch-flow-text {
  color: var(--glitch-color, #00ffff);
  font-weight: 900;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  position: relative;
  /* Hard shadow for depth */
  text-shadow: 4px 4px 0px #ff00ff; 
  animation: glitch-main 2s infinite;
}

/* Duplicate layers for RGB split and clipping */
.theme-glitch .glitch-sign-text::before,
.theme-glitch .glitch-sign-text::after,
.theme-glitch .glitch-flow-text::before,
.theme-glitch .glitch-flow-text::after {
  content: attr(data-text); /* Works for SIGN, manual for FLOW */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--glitch-bg, #000);
}

.theme-glitch .glitch-sign-text::before,
.theme-glitch .glitch-flow-text::before {
  color: #ff00ff;
  text-shadow: -2px 0 #00ffff;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  animation: glitch-slice-top 2s infinite steps(2, end);
  z-index: -1;
}

.theme-glitch .glitch-sign-text::after,
.theme-glitch .glitch-flow-text::after {
  color: #00ffff;
  text-shadow: -2px 0 #ff00ff;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  animation: glitch-slice-bottom 3s infinite steps(2, end);
  z-index: -2;
}


/* Specifics for FLOW mode - requires JS to set data-text or use separate elements for effects */
.theme-glitch .glitch-flow-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.theme-glitch .glitch-flow-text {
  padding: 0 0.5em;
  flex-shrink: 0;
}
/* Note: For FLOW, pseudo-elements with content: attr(data-text) need data-text set on the span */


/* Animations */
@keyframes glitch-main {
  0% { transform: translate(0); }
  2% { transform: translate(-2px, 2px); }
  4% { transform: translate(-2px, -2px); }
  6% { transform: translate(2px, 2px); }
  8% { transform: translate(2px, -2px); }
  10% { transform: translate(0); }
  100% { transform: translate(0); }
}

@keyframes glitch-slice-top {
  0% { transform: translate(0); clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); }
  5% { transform: translate(-5px, 0); clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%); }
  10% { transform: translate(5px, 0); clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); }
  15% { transform: translate(0); }
  100% { transform: translate(0); }
}

@keyframes glitch-slice-bottom {
  0% { transform: translate(0); clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); }
  5% { transform: translate(5px, 0); clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%); }
  10% { transform: translate(-5px, 0); clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); }
  15% { transform: translate(0); }
  100% { transform: translate(0); }
}

@keyframes glitch-flash {
  0% { opacity: 0; }
  2% { opacity: 0.1; }
  3% { opacity: 0; }
  98% { opacity: 0; }
  99% { opacity: 0.1; }
  100% { opacity: 0; }
}