@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100');

.e-con .elementor-widget.elementor-widget-static_glitch {
  min-width: 100% !important;
}

.ets-static-glitch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 10;
  min-height: auto;
  height: auto;
}

.ets-static-glitch-wrapper {
  font-family: 'Roboto Mono', monospace;
  font-weight: 100;
  margin: 0;
  padding: 0;
  display: inline-block;
  line-height: 1.4em;
  overflow: visible;
  text-transform: none !important;
  position: relative;
  z-index: 9999;
  min-height: auto;
  height: auto;
}

.ets-static-glitch-text,
.ets-static-before,
.ets-static-after {
  display: inline-block;
  line-height: 1.4em;
  overflow: visible;
  text-transform: none !important;
  position: relative;
  z-index: 9999;
  color: inherit;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  text-fill-color: initial;
  word-break: normal;
  overflow-wrap: normal;
  word-wrap: normal;
}

.ets-static-before:not(:empty) {
  margin-right: 0.25em;
}

.ets-static-after:not(:empty) {
  margin-left: 0.25em;
}

.ets-static-glitch-wrapper .ets-static-before,
.ets-static-glitch-wrapper .ets-static-after {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  text-fill-color: initial !important;
  color: inherit;
}

/* Glitch Animation - reused from text-scramble */
.ets-static-glitch-text.ets-glitch {
  position: relative;
  z-index: 9999;
  animation: ets-glitch-skew 1s linear infinite;
  display: inline-block;
  max-width: none !important;
  overflow: visible !important;
}

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

.ets-static-glitch-text.ets-glitch:before {
  animation: ets-glitch-top 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  text-shadow: -0.05em 0 #ff00de;
}

.ets-static-glitch-text.ets-glitch:after {
  animation: ets-glitch-bottom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  text-shadow: 0.05em 0 #00fff9;
}

@keyframes ets-glitch-skew {
  2%, 64% {
    transform: translate(0.05em, 0) skew(0deg);
  }
  4%, 60% {
    transform: translate(-0.05em, 0) skew(0deg);
  }
  62% {
    transform: translate(0, 0) skew(5deg);
  }
}

@keyframes ets-glitch-top {
  2%, 64% {
    transform: translate(0.05em, -0.05em);
  }
  4%, 60% {
    transform: translate(-0.05em, 0.05em);
  }
  62% {
    transform: translate(0.3em, -0.03em) skew(-13deg);
  }
}

@keyframes ets-glitch-bottom {
  2%, 64% {
    transform: translate(-0.05em, 0);
  }
  4%, 60% {
    transform: translate(-0.05em, 0);
  }
  62% {
    transform: translate(-0.5em, 0.12em) skew(21deg);
  }
}

/* Code style support */
.ets-static-glitch-text.ets-code-text {
  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
}

/* Mobile wrap control */
.ets-static-glitch-wrapper.ets-no-wrap-mobile {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .ets-static-glitch-wrapper.ets-no-wrap-mobile {
    white-space: nowrap;
  }
  
  .ets-static-glitch-wrapper:not(.ets-no-wrap-mobile) {
    white-space: normal;
  }
}