/* --- CTA BUTTON (little-cta) --- */
/* Example usage:
  <a href="creative-spaces.html">
    <button class="little-cta">LEARN MORE ABOUT Cleveland'S NEXT GREAT INDUSTRY</button>
  </a>

  <a href="https://tape30.com" target="_blank" rel="noopener">
    <button class="little-cta">Visit Tape30.com for More</button>
  </a>
*/
.little-cta {
  color: var(--white);
  border-radius: 6px;
  padding: 1rem 2rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-weight: bold;
  cursor: pointer;
  margin: auto;
  text-align: center;
  filter: var(--filter-shadow);
  border-width: 0.2rem;
  border-color: var(--secondary-color);
  border-style: solid;
  background-color: hsla(0, 0%, 0%, 0.8);
  transition: var(--trans-fast);
  margin-bottom: 1rem;
}

.little-cta:hover {
  transform: scale(1.05);
  filter: drop-shadow(0px 0px 10px var(--secondary-color-glow));
  position: relative;
  overflow: hidden;
}

.little-cta:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    var(--secondary-color-glow) 50%,
    transparent 100%
  );
  opacity: 0.7;
  pointer-events: none;
  animation: shine-across 0.7s forwards;
}