@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap");

:root {
  --primary-color: #00ffd5;
  --accent-color: #ff00ff;
  --alt-color: #fffc00;
  --dark-color: #0a0a16;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: var(--dark-color);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: "Orbitron", sans-serif;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.glitch-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1000px;
}

svg {
  width: 100%;
  height: auto;
}

.main-text {
  animation: text-shift 10s infinite alternate;
}

.text-path {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards, glow 4s ease-in-out infinite alternate;
}

.text-path-r {
  stroke: #ff004c;
  filter: blur(1px);
  animation: dash 5s linear forwards,
    glitch-anim-1 0.2s ease-in-out infinite alternate;
}

.text-path-g {
  stroke: #00ff3c;
  filter: blur(1px);
  animation: dash 5s linear forwards,
    glitch-anim-2 0.3s ease-in-out infinite alternate;
}

.text-path-b {
  stroke: #0033ff;
  filter: blur(1px);
  animation: dash 5s linear forwards,
    glitch-anim-3 0.35s ease-in-out infinite alternate;
}

.glitch-element {
  animation: random-glitch 0.1s ease-in-out infinite;
  opacity: 0;
}

.glitch-element:nth-child(1) {
  animation-delay: 0.1s;
}

.glitch-element:nth-child(2) {
  animation-delay: 0.2s;
}

.glitch-element:nth-child(3) {
  animation-delay: 0.3s;
}

.glitch-element:nth-child(4) {
  animation-delay: 0.4s;
}

.glitch-element:nth-child(5) {
  animation-delay: 0.5s;
}

.glitch-element:nth-child(6) {
  animation-delay: 0.6s;
}

.scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 255, 213, 0.05) 50%
  );
  background-size: 100% 4px;
  z-index: 2;
  pointer-events: none;
  animation: scanlines 0.5s linear infinite;
}

.noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/png;base64,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");
  opacity: 0.05;
  z-index: 1;
  pointer-events: none;
}

.color-shift {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: hue;
  animation: color-cycle 10s infinite;
  opacity: 0.2;
  pointer-events: none;
  z-index: 3;
}

.grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 50px 50px;
  background-image: linear-gradient(
      rgba(0, 255, 213, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(0, 255, 213, 0.05) 1px, transparent 1px);
  z-index: 0;
  pointer-events: none;
}

.glitch-button {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 30px;
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s;
  z-index: 5;
}

.glitch-button:hover {
  background: rgba(0, 255, 213, 0.1);
  text-shadow: 0 0 8px var(--primary-color);
  box-shadow: 0 0 10px var(--primary-color);
}

.glitch-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 213, 0.2),
    transparent
  );
  transition: all 0.6s;
}

.glitch-button:hover::before {
  left: 100%;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px var(--primary-color));
  }
  50% {
    filter: drop-shadow(0 0 8px var(--primary-color));
  }
}

@keyframes text-shift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, -1px);
  }
  40% {
    transform: translate(-1px, 1px);
  }
  60% {
    transform: translate(2px, 0);
  }
  80% {
    transform: translate(0, -2px);
  }
}

@keyframes glitch-anim-1 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2px, 1px);
  }
  40% {
    transform: translate(-1px, -1px);
  }
  60% {
    transform: translate(1px, 1px);
  }
  80% {
    transform: translate(2px, -1px);
  }
  100% {
    transform: translate(1px, -1px);
  }
}

@keyframes glitch-anim-2 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(2px, 1px);
  }
  40% {
    transform: translate(1px, -1px);
  }
  60% {
    transform: translate(-1px, 1px);
  }
  80% {
    transform: translate(-2px, -1px);
  }
  100% {
    transform: translate(1px, 1px);
  }
}

@keyframes glitch-anim-3 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, -2px);
  }
  40% {
    transform: translate(-1px, 2px);
  }
  60% {
    transform: translate(2px, -1px);
  }
  80% {
    transform: translate(-2px, 1px);
  }
  100% {
    transform: translate(1px, -1px);
  }
}

@keyframes scanlines {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4px);
  }
}

@keyframes random-glitch {
  0%,
  100% {
    opacity: 0;
  }
  30%,
  70% {
    opacity: 0.8;
  }
}

@keyframes color-cycle {
  0% {
    background-color: rgba(255, 0, 255, 0.2);
  }
  25% {
    background-color: rgba(0, 255, 213, 0.2);
  }
  50% {
    background-color: rgba(255, 255, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 100, 255, 0.2);
  }
  100% {
    background-color: rgba(255, 0, 255, 0.2);
  }
}
/* Strong override to remove hover effect */
.glitch-button.disable-hover:hover,
.glitch-button.disable-hover:hover::before {
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  left: -100% !important;
  transition: none !important;
}