/* ============================================================
   COMPONENTS — Buttons · Press cards · Arrow · Utils
   ============================================================ */

/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
  padding: 0.75rem 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  border-radius: 1px;
  cursor: pointer;
  transition:
    background  var(--t-fast),
    color       var(--t-fast),
    border-color var(--t-fast),
    box-shadow  var(--t-fast);
  position: relative;
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
}

/* Primary — solid magenta */
.btn--primary {
  background: var(--magenta);
  color: var(--black);
}

.btn--primary:hover {
  background: var(--white);
  box-shadow: 0 0 28px rgba(255, 46, 160, 0.38);
}

/* Ghost — outlined */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.btn--ghost:hover {
  border-color: var(--magenta);
  color: var(--magenta);
  box-shadow: 0 0 18px rgba(255, 46, 160, 0.14);
}

/* Text — no border, muted */
.btn--text {
  background: transparent;
  color: var(--muted);
  padding-inline: 0;
}

.btn--text:hover { color: var(--white); }

/* Large variant */
.btn--large {
  font-size: 0.78rem;
  padding: 1rem 2rem;
}

/* Arrow */
.arrow {
  display: inline-block;
  transition: transform var(--t-fast);
}

.btn:hover .arrow { transform: translateX(4px); }

/* ================================================================
   MISC DETAILS
   ================================================================ */

/* The "Pioneer DJ" tag in about section */
.about-img-tag {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.38);
  z-index: 2;
  pointer-events: none;
}

/* ================================================================
   FOCUS STATES — Keyboard navigation
   ================================================================ */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ================================================================
   SELECTION
   ================================================================ */

::selection {
  background: rgba(255, 46, 160, 0.28);
  color: var(--white);
}

/* ================================================================
   SCROLLBAR — Webkit
   ================================================================ */

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb {
  background: rgba(255, 46, 160, 0.35);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--magenta); }