:root {
  --primary-hue: 0;
  --primary-lightness: 50;
  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness) * 1%));
  --shadow-primary-hue: 180;
  --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
  --color: hsl(0, 0%, 100%);
  --font-size: 20px;
  --label-size: 9px;
  --shadow-secondary-hue: 60;
  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
  --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
  --border: 4px;
  --shimmy-distance: 5;
  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
}

@font-face {
  font-family: Cyber;
  src: url("https://assets.codepen.io/605876/Blender-Pro-Bold.otf");
  font-display: swap;
}

.cybr-btn {
  font-family: 'Cyber', sans-serif;
  color: var(--color);
  cursor: pointer;
  background: var(--primary);
  text-transform: uppercase;
  font-size: var(--font-size);
  outline: none;
  letter-spacing: 2px;
  position: relative;
  font-weight: 700;
  border: none;
  min-width: 300px;
  height: 75px;
  line-height: 75px;
  margin-top: 40px;
  transition: background 0.1s;
  clip-path: var(--clip);
  padding: 0 2rem;
  text-align: center;
}

.cybr-btn:hover {
  background: var(--shadow-primary);
}

.cybr-btn:after,
.cybr-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: var(--clip);
  z-index: -1;
}

.cybr-btn:before {
  background: var(--shadow-primary);
  transform: translate(var(--border), 0);
}

.cybr-btn:after {
  background: var(--primary);
}

.cybr-btn__glitch {
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
  background: var(--shadow-primary);
  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
  clip-path: var(--clip);
  animation: glitch 1s infinite;
  display: none;
}

.cybr-btn:hover .cybr-btn__glitch {
  display: block;
}

.cybr-btn__glitch:before {
  content: '';
  position: absolute;
  top: calc(var(--border) * 1);
  right: calc(var(--border) * 1);
  bottom: calc(var(--border) * 1);
  left: calc(var(--border) * 1);
  clip-path: var(--clip);
  background: var(--primary);
  z-index: -1;
}

@keyframes glitch {
  0% { clip-path: var(--clip-one); }
  2%, 8% { clip-path: var(--clip-two); transform: translate(calc(var(--shimmy-distance) * -1%), 0); }
  6% { transform: translate(calc(var(--shimmy-distance) * 1%), 0); }
  9% { transform: translate(0, 0); }
  10% { clip-path: var(--clip-three); transform: translate(calc(var(--shimmy-distance) * 1%), 0); }
  13% { transform: translate(0, 0); }
  14%, 21% { clip-path: var(--clip-four); transform: translate(calc(var(--shimmy-distance) * 1%), 0); }
  25% { clip-path: var(--clip-five); }
  30% { transform: translate(calc(var(--shimmy-distance) * -1%), 0); }
  35%, 45% { clip-path: var(--clip-six); }
  40% { transform: translate(calc(var(--shimmy-distance) * 1%)); }
  50% { transform: translate(0, 0); }
  55% { clip-path: var(--clip-seven); transform: translate(calc(var(--shimmy-distance) * 1%), 0); }
  60% { transform: translate(0, 0); }
  31%, 61%, 100% { clip-path: var(--clip-four); }
}

/* ✅ Responsive Enhancement */
@media (max-width: 768px) {
  .cybr-btn {
    font-size: 16px;
    min-width: 220px;
    padding: 0 1.5rem;
    margin-top: 30px;
  }
}

@media (max-width: 480px) {
  .cybr-btn {
    font-size: 14px;
    min-width: 180px;
    padding: 0 1rem;
    margin-top: 25px;
  }
}