body {
  background-color: #f0f0f0;
  font-family: system-ui, sans-serif;
}

.hk-heading {
  text-align: center;
}

.hk-button-grid {
  padding: 20px 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.hk-btn {
  text-decoration: none;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: 15px;
  color: #fff;
  background-color: #000;
  position: relative;
  overflow: hidden;
}

/* 1. Diagonal Shine */
.hk-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-45deg);
  transition: left 1s ease;
}
.hk-shine:hover::after {
  left: 100%;
}

/* 2. Text Slide Up */
.hk-slide span {
  display: inline-block;
  transform: translateY(50%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hk-slide:hover span {
  transform: translateY(0);
  opacity: 1;
}

/* 3. Ripple Burst */
.hk-ripple::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.25) 10%,
    transparent 10%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease-out;
}
.hk-ripple:hover::after {
  transform: translate(-50%, -50%) scale(5);
}

/* 4. Soft Ripple */
.hk-soft-ripple::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.5s ease-out;
}
.hk-soft-ripple:hover::before {
  transform: translate(-50%, -50%) scale(2);
}

/* 5. Shine Swipe */
.hk-swipe::before {
  content: "";
  position: absolute;
  top: 0;
  left: -95%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(30deg);
  transition: left 0.5s ease-in-out;
}
.hk-swipe:hover::before {
  left: 95%;
}

/* 6. Glitch Shake */
.hk-glitch:hover {
  animation: hk-glitch 0.2s linear 2;
}
@keyframes hk-glitch {
  0% {
    transform: skewX(0deg);
  }
  25% {
    transform: skewX(15deg);
  }
  50% {
    transform: skewX(-15deg);
  }
  75% {
    transform: skewX(10deg);
  }
  100% {
    transform: skewX(0deg);
  }
}

/* 7. Animated Border */
.hk-border {
  background-color: transparent;
  color: #000;
  border-radius: 0;
}

.hk-border::before,
.hk-border::after {
  content: "";
  position: absolute;
  background-color: #000;
  transition: all 1s;
}

.hk-border::before {
  top: 0;
  left: -100%;
  width: 100%;
  height: 5px;
}
.hk-border::after {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 5px;
}
.hk-border:hover::before {
  left: 0;
}
.hk-border:hover::after {
  right: 0;
}

.hk-border span::before,
.hk-border span::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 100%;
  background-color: #000;
  transition: all 1s;
}

.hk-border span::before {
  top: -100%;
  right: 0;
}
.hk-border span::after {
  bottom: -100%;
  left: 0;
}
.hk-border:hover span::before {
  top: 0;
}
.hk-border:hover span::after {
  bottom: 0;
}
/* 8. Flip Hover */
.hk-real-flip {
  position: relative;
  background: #111;
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
  perspective: 900px;
}

/* text stays normal */
.hk-real-flip span {
  position: relative;
  z-index: 3;
}

/* base background */
.hk-real-flip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #111;
  z-index: 1;
}

/* flipping background */
.hk-real-flip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6a5cff, #00e0ff);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transform-origin: center;
  transition: transform 0.6s ease;
  z-index: 2;
}

/* REAL flip */
.hk-real-flip:hover::before {
  transform: rotateY(0deg);
}

/* 9. Zoom Pulse */
.hk-zoom {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hk-zoom:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* 10. Fill From Bottom */
.hk-fill::before {
  content: "";
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: -1;
  transition: bottom 0.4s ease;
}
.hk-fill {
  z-index: 1;
}
.hk-fill:hover::before {
  bottom: 0;
}
.hk-fill:hover {
  color: #000;
}

/* 11. Soft Glow */
.hk-glow {
  transition: box-shadow 0.4s ease;
}
.hk-glow:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4),
    0 0 25px rgba(255, 255, 255, 0.6);
}

/* 12. Split Reveal */
.hk-split span::before,
.hk-split span::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  background: rgba(255, 255, 255, 0.25);
  transition: transform 0.4s ease;
}

.hk-split span::before {
  left: 0;
  transform: translateX(-100%);
}
.hk-split span::after {
  right: 0;
  transform: translateX(100%);
}

.hk-split:hover span::before {
  transform: translateX(0);
}
.hk-split:hover span::after {
  transform: translateX(0);
}
/* 21. Liquid Wave */
.hk-liquid-wave {
  background: #111;
}
.hk-liquid-wave::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.25),
    transparent 60%
  );
  animation: hk-wave 6s linear infinite;
}
@keyframes hk-wave {
  0% {
    transform: translateX(-30%) translateY(-30%);
  }
  50% {
    transform: translateX(30%) translateY(30%);
  }
  100% {
    transform: translateX(-30%) translateY(-30%);
  }
}

/* 22. Magnetic Hover */
.hk-magnetic {
  transition: transform 0.25s ease;
}
.hk-magnetic:hover {
  transform: scale(1.06);
}

/* 23. Gradient Sweep */
.hk-gradient-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35),
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.hk-gradient-sweep:hover::before {
  transform: translateX(100%);
}

/* 24. Outline Morph */
.hk-outline-morph {
  background: transparent;
  color: #000;
  border: 2px solid #000;
}
.hk-outline-morph:hover {
  background: #000;
  color: #fff;
  border-radius: 40px;
}

/* 25. Noise Hover */
.hk-noise-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
    circle at 0 0,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hk-noise-hover:hover::after {
  opacity: 1;
}

/* 26. Tilt Depth */
.hk-tilt-depth {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hk-tilt-depth:hover {
  transform: perspective(600px) rotateX(6deg) translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* 27. Sheen Pro */
.hk-sheen-pro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    60deg,
    transparent 40%,
    rgba(255, 255, 255, 0.45),
    transparent 60%
  );
  transform: translateX(-120%);
}
.hk-sheen-pro:hover::after {
  animation: hk-sheen 0.8s ease;
}
@keyframes hk-sheen {
  to {
    transform: translateX(120%);
  }
}

/* 28. Soft Fill */
.hk-soft-fill {
  background: #111;
}
.hk-soft-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hk-soft-fill:hover::before {
  opacity: 0.12;
}