/* L’inchiostro sul bottone */
:root {
  --nebbia: #E6ECEF;
  --inchiostro: #14212B;
  --lampone: #D1495B;
  --verde: #2E7D6B;
  --carta: #F7F8F6;
  --tenue: #4E5B64;
  --margine: clamp(18px, 4vw, 56px);
  --scorre: cubic-bezier(0.23, 1, 0.32, 1);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  background: var(--nebbia);
  color: var(--inchiostro);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}

.banco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--alto);
  padding: calc(var(--margine) * 2.6) var(--margine) calc(var(--margine) * 1.4);
}
.nota {
  position: absolute;
  top: var(--margine);
  left: var(--margine);
  max-width: 34ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.08rem);
  font-weight: 500;
  line-height: 1.38;
}

.invito {
  width: min(100%, 780px);
}
.invito__titolo {
  max-width: 15ch;
  margin: 0 0 1.1rem;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.invito__testo {
  max-width: 46ch;
  margin: 0 0 2rem;
  color: var(--tenue);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.5;
}
.invito__bottoni,
.invito__cartellini {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.invito__cartellini {
  gap: 10px;
}
.invito__etichetta {
  margin: 2.6rem 0 0.8rem;
  color: var(--tenue);
  font-size: 0.92rem;
  font-weight: 600;
}

/* ---- il bottone: una base e, sopra, lo stesso bottone in inchiostro, tagliato a pennello ---- */
.bottone {
  /* la striscia d’inchiostro va da --da ad --a: fuori dal bottone tutte e due, finché non ci passi sopra */
  --da: -12%;
  --a: -12%;
  --fondo: transparent;
  --testo: var(--inchiostro);
  --bordo: var(--inchiostro);
  --inchiostro-fondo: var(--inchiostro);
  --inchiostro-testo: var(--carta);
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border: 2px solid var(--bordo);
  background: var(--fondo);
  color: var(--testo);
  font-size: 0.95rem;
  font-weight: 620;
  text-decoration: none;
  transition: transform 160ms var(--scorre);
  -webkit-tap-highlight-color: transparent;
}
.bottone:active {
  transform: scale(0.97);
}
.bottone:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 4px;
}
.bottone__testo {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.35em 1em;
  line-height: 1;
  white-space: nowrap;
}
.bottone__freccia {
  width: 1em;
  height: 1em;
  transition: transform 320ms var(--scorre);
}
/* l’inchiostro: stesso testo nello stesso punto, così il colore si spezza proprio sul bordo della pennellata */
.bottone__inchiostro {
  position: absolute;
  inset: 0;
  display: flex;
  background: var(--inchiostro-fondo);
  color: var(--inchiostro-testo);
  clip-path: polygon(
    calc(var(--da) - 2px) 0%,
    calc(var(--a) + 3px) 0%,
    calc(var(--a) - 2px) 12.5%,
    calc(var(--a) + 4px) 25%,
    calc(var(--a) - 3px) 37.5%,
    calc(var(--a) + 2px) 50%,
    calc(var(--a) - 4px) 62.5%,
    calc(var(--a) + 3px) 75%,
    calc(var(--a) - 1px) 87.5%,
    calc(var(--a) + 2px) 100%,
    calc(var(--da) - 3px) 100%,
    calc(var(--da) + 4px) 87.5%,
    calc(var(--da) - 2px) 75%,
    calc(var(--da) + 3px) 62.5%,
    calc(var(--da) - 4px) 50%,
    calc(var(--da) + 2px) 37.5%,
    calc(var(--da) - 3px) 25%,
    calc(var(--da) + 3px) 12.5%
  );
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .bottone:hover .bottone__freccia {
    transform: translateX(4px);
  }
}

/* ---- le varianti ---- */
.bottone--grande {
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
}
.bottone--pieno {
  --fondo: var(--inchiostro);
  --testo: var(--carta);
  --inchiostro-fondo: var(--lampone);
}
.bottone--cartellino {
  --inchiostro-fondo: var(--verde);
  border-width: 1.5px;
  font-size: 0.88rem;
}
.bottone--cartellino .bottone__testo {
  padding: 0.7em 1em 0.75em;
}

/* movimento ridotto: niente pennellata che corre, il colore cambia sul posto */
.bottone--ridotto .bottone__inchiostro {
  clip-path: none;
  opacity: 0;
}