/* ==========================================================================
   Bottone (widget "wcf--button" di Animation Addons, effetto "rollover-left").
   All'hover un fondo mattone entra da sinistra e il testo diventa beige; uscendo
   il fondo si ritira verso destra. Sul vivo animava width/left/right: qui lo stesso
   movimento con transform: scaleX (niente ricalcolo del layout).
     .btn--outline  bordo mattone, fondo trasparente   (es. "scopri le nostre tende")
     .btn--solid    fondo beige, senza bordo            (es. sopra le foto scure)
   La larghezza la decide il contenitore: il bottone lo riempie (width 100%), come sul
   vivo; per un bottone largo quanto il testo basta un contenitore che non si allarga
   (in una colonna flex: align-self: flex-start).
   ========================================================================== */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 20px 30px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-mattone);
  transition: color 0.4s var(--ease-out-power2), background-color 0.4s var(--ease-out-power2);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-mattone);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.btn:hover,
.btn:focus-visible {
  color: var(--color-beige);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.btn--outline {
  border: 1px solid var(--color-mattone);
  background-color: transparent;
}

.btn--solid {
  border: 0;
  background-color: var(--color-beige);
}

@media (max-width: 1024px) {
  .btn {
    font-size: 16px;
  }
}