/* =========================================
   TELUM TARGETS — BUTTONS
========================================= */

.btn-primary,
.btn-secondary{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: var(--radius-small);
  overflow: hidden;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);

  letter-spacing:0.03em;

  transition:
    transform var(--duration-medium)
    var(--ease-premium),

    background var(--duration-medium)
    var(--ease-premium),

    border-color var(--duration-medium)
    var(--ease-premium),

    box-shadow var(--duration-medium)
    var(--ease-premium);
}

/* =========================================
   PRIMARY BUTTON
========================================= */
.btn-primary {
  color: var(--color-btn-primary-text);
  background:var(--color-btn-primary-bg);
  border: var(--color-btn-primary-border);
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: var(--color-btn-primary-shadow);
}

.btn-primary:active {
  transform: translateY(-1px);
}

/* =========================================
   SECONDARY BUTTON
========================================= */

.btn-secondary {
  color: var(--color-btn-secondary-text);
  background:var(--color-btn-secondary-bg);
  border:var(--color-btn-secondary-border);
}

.btn-secondary:hover {
  transform: translateY(-4px);
  box-shadow: var(--color-btn-secondary-shadow);
  border:var(--border-red);
}

.btn-secondary:active {
  transform: translateY(-1px);
}

/* =========================================
   SHIMMER EFFECT
========================================= */

.btn-primary::before,
.btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,0.25) 50%,
      transparent 100%
    );
  transform: translateX(-120%);
  pointer-events: none;
}

.btn-primary:hover::before,
.btn-secondary:hover::before {
  animation:
    shimmer 900ms
    var(--ease-smooth);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
}