/* ==========================================================================
   buttons.css
   Four button colors:
   btn-red, btn-black, btn-white, btn-grey

   CSS ONLY — No HTML changes required.

   Hover:
   - Background fills smoothly from LEFT → RIGHT
   - Arrow appears smoothly after hover
   ========================================================================== */

/* ==========================================================================
   SHARED
   ========================================================================== */

.btn-red,
.btn-black,
.btn-white,
.btn-grey {
  --btn-bg: var(--color-red);
  --btn-fill: var(--color-black);
  --btn-color: var(--color-white);
  --btn-hover-color: var(--color-white);
  --btn-focus: var(--color-red);

  position: relative;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  gap: 14px;

  padding: 12px 20px;

  border: 0;
  background: var(--btn-bg);

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  color: var(--btn-color);

  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;

  transition: color 0.6s ease;
}

/* ==========================================================================
   SMOOTH LEFT → RIGHT FILL
   ========================================================================== */

.btn-red::before,
.btn-black::before,
.btn-white::before,
.btn-grey::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background: var(--btn-fill);

  /*
   * Start from the LEFT
   * with zero visible width
   */
  transform: scaleX(0);
  transform-origin: left center;

  /*
   * Slow and smooth premium animation
   */
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;
}

/* ==========================================================================
   HOVER — FILL BUTTON
   ========================================================================== */

.btn-red:hover::before,
.btn-black:hover::before,
.btn-white:hover::before,
.btn-grey:hover::before {
  transform: scaleX(1);
}

/* ==========================================================================
   HOVER — TEXT COLOR
   ========================================================================== */

.btn-red:hover,
.btn-black:hover,
.btn-white:hover,
.btn-grey:hover {
  color: var(--btn-hover-color);
}

/* ==========================================================================
   ARROW — HIDDEN INITIALLY
   ========================================================================== */

.btn-red i,
.btn-black i,
.btn-white i,
.btn-grey i {
  /*
   * Completely hidden initially
   */
  opacity: 0;

  /*
   * Remove its space from the button
   */
  width: 0;

  /*
   * Start slightly to the left
   */
  transform: translateX(-10px);

  overflow: hidden;

  font-size: 1.15em;
  line-height: 1;

  /*
   * Smooth arrow reveal
   */
  transition:
    opacity 0.4s ease,
    width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   HOVER — SHOW ARROW
   ========================================================================== */

.btn-red:hover i,
.btn-black:hover i,
.btn-white:hover i,
.btn-grey:hover i {
  opacity: 1;

  /*
   * Restore arrow width
   */
  width: 1.15em;

  /*
   * Slide into position
   */
  transform: translateX(0);
}

/* ==========================================================================
   COLORS
   ========================================================================== */

/* RED BUTTON */

.btn-red {
  --btn-bg: var(--color-red);
  --btn-fill: var(--color-black);

  --btn-color: var(--color-white);
  --btn-hover-color: var(--color-white);

  --btn-focus: var(--color-red);
}

/* BLACK BUTTON */

.btn-black {
  --btn-bg: var(--color-black);
  --btn-fill: var(--color-red);

  --btn-color: var(--color-white);
  --btn-hover-color: var(--color-white);

  --btn-focus: var(--color-red);
}

/* WHITE BUTTON */

.btn-white {
  --btn-bg: var(--color-white);
  --btn-fill: var(--color-red);

  --btn-color: var(--color-black);
  --btn-hover-color: var(--color-white);

  --btn-focus: var(--color-red);
}

/* GREY BUTTON */

.btn-grey {
  --btn-bg: var(--color-grey-mid);
  --btn-fill: var(--color-black);

  --btn-color: var(--color-black);
  --btn-hover-color: var(--color-white);

  --btn-focus: var(--color-red);
}

/* ==========================================================================
   ON DARK BACKGROUND
   ========================================================================== */

.on-dark .btn-red {
  --btn-fill: var(--color-white);
  --btn-hover-color: var(--color-black);
}

.on-dark .btn-red,
.on-dark .btn-black,
.on-dark .btn-white,
.on-dark .btn-grey {
  --btn-focus: var(--color-white);
}

/* ==========================================================================
   FOCUS
   ========================================================================== */

.btn-red:focus-visible,
.btn-black:focus-visible,
.btn-white:focus-visible,
.btn-grey:focus-visible {
  outline: 3px solid var(--btn-focus);
  outline-offset: 4px;
}

/* ==========================================================================
   COMPACT BUTTON
   ========================================================================== */

.btn-compact {
  padding: 14px 22px;
  font-size: 13px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .btn-red::before,
  .btn-black::before,
  .btn-white::before,
  .btn-grey::before,
  .btn-red i,
  .btn-black i,
  .btn-white i,
  .btn-grey i {
    transition: none;
  }
}