@font-face {
  font-family: 'REBEL_SCENE_DEMO';
  src: url('../fonts/REBEL_SCENE_DEMO.ttf') format('truetype');
}

.glitch-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
}

.glitch {
  position: relative;
  font-family: 'REBEL_SCENE_DEMO', sans-serif;
  font-size: 160px;
  font-weight: 200;
  font-style: normal;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0;
  transform: scale(1);
}

/* Main glitch effect with noise */
.glitch:before,
.glitch:after {
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-style: normal;
  transform: translateX(0);
  animation: glitch-move 8.3s steps(1) infinite;
}

.glitch:before {
  left: -3px;
  text-shadow: 2px 0 #3ca0ff;
  animation: 
    glitch-anim-1 5.7s infinite linear alternate-reverse,
    glitch-move 8.3s steps(1) infinite;
}

.glitch:after {
  left: 3px;
  text-shadow: -2px 0 #a03cff;
  animation: 
    glitch-anim-2 6.1s infinite linear alternate-reverse,
    glitch-move 8.3s steps(1) infinite reverse;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(26px, 9999px, 44px, 0); }
  3.7% { clip: rect(180px, 9999px, 212px, 0); }
  7.4% { clip: rect(113px, 9999px, 144px, 0); }
  11.1% { clip: rect(46px, 9999px, 82px, 0); }
  14.8% { clip: rect(89px, 9999px, 98px, 0); }
  18.5% { clip: rect(126px, 9999px, 151px, 0); }
  22.2% { clip: rect(76px, 9999px, 110px, 0); }
  25.9% { clip: rect(137px, 9999px, 184px, 0); }
  29.6% { clip: rect(195px, 9999px, 223px, 0); }
  33.3% { clip: rect(169px, 9999px, 234px, 0); }
  37% { clip: rect(42px, 9999px, 67px, 0); }
  40.7% { clip: rect(138px, 9999px, 192px, 0); }
  44.4% { clip: rect(15px, 9999px, 48px, 0); }
  48.1% { clip: rect(99px, 9999px, 131px, 0); }
  51.8% { clip: rect(82px, 9999px, 156px, 0); }
  55.5% { clip: rect(133px, 9999px, 177px, 0); }
  59.2% { clip: rect(28px, 9999px, 143px, 0); }
  62.9% { clip: rect(162px, 9999px, 188px, 0); }
  66.6% { clip: rect(71px, 9999px, 126px, 0); }
  70.3% { clip: rect(144px, 9999px, 195px, 0); }
  74% { clip: rect(53px, 9999px, 119px, 0); }
  77.7% { clip: rect(88px, 9999px, 154px, 0); }
  81.4% { clip: rect(123px, 9999px, 189px, 0); }
  85.1% { clip: rect(105px, 9999px, 167px, 0); }
  88.8% { clip: rect(145px, 9999px, 198px, 0); }
  92.5% { clip: rect(35px, 9999px, 91px, 0); }
  96.2% { clip: rect(127px, 9999px, 182px, 0); }
  100% { clip: rect(93px, 9999px, 146px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(19px, 9999px, 36px, 0); }
  3.7% { clip: rect(172px, 9999px, 195px, 0); }
  7.4% { clip: rect(144px, 9999px, 198px, 0); }
  11.1% { clip: rect(32px, 9999px, 123px, 0); }
  14.8% { clip: rect(198px, 9999px, 267px, 0); }
  18.5% { clip: rect(51px, 9999px, 184px, 0); }
  22.2% { clip: rect(210px, 9999px, 245px, 0); }
  25.9% { clip: rect(184px, 9999px, 216px, 0); }
  29.6% { clip: rect(123px, 9999px, 189px, 0); }
  33.3% { clip: rect(134px, 9999px, 173px, 0); }
  37% { clip: rect(167px, 9999px, 228px, 0); }
  40.7% { clip: rect(192px, 9999px, 215px, 0); }
  44.4% { clip: rect(148px, 9999px, 196px, 0); }
  48.1% { clip: rect(131px, 9999px, 157px, 0); }
  51.8% { clip: rect(156px, 9999px, 181px, 0); }
  55.5% { clip: rect(177px, 9999px, 239px, 0); }
  59.2% { clip: rect(143px, 9999px, 164px, 0); }
  62.9% { clip: rect(188px, 9999px, 227px, 0); }
  66.6% { clip: rect(126px, 9999px, 179px, 0); }
  70.3% { clip: rect(195px, 9999px, 252px, 0); }
  74% { clip: rect(119px, 9999px, 191px, 0); }
  77.7% { clip: rect(178px, 9999px, 254px, 0); }
  81.4% { clip: rect(143px, 9999px, 189px, 0); }
  85.1% { clip: rect(155px, 9999px, 167px, 0); }
  88.8% { clip: rect(145px, 9999px, 198px, 0); }
  92.5% { clip: rect(67px, 9999px, 122px, 0); }
  96.2% { clip: rect(156px, 9999px, 198px, 0); }
  100% { clip: rect(134px, 9999px, 179px, 0); }
}

@keyframes glitch-move {
  0% { transform: translateX(0); }
  19% { transform: translateX(-2px); }
  37% { transform: translateX(2px); }
  56% { transform: translateX(-1px); }
  74% { transform: translateX(1px); }
  93% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* Media Queries */
@media (max-width: 1200px) {
  .glitch {
    font-size: 100px;
  }
}

@media (max-width: 768px) {
  .glitch {
    font-size: 60px;
  }
}

@media (max-width: 480px) {
  .glitch {
    font-size: 40px;
  }
}