/* Il nastro nel bottone */
:root {
  --carta: #FFF4DC;
  --inchiostro: #2B1408;
  --margine: clamp(18px, 4vw, 56px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

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

.pagina {
  display: grid;
  align-content: space-between;
  gap: 7vh;
  min-height: var(--alto);
  padding: var(--margine);
}
.nota {
  max-width: 38ch;
  margin: 0;
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.08rem);
  font-weight: 480;
  line-height: 1.38;
  opacity: 0.72;
}
.titolo {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.4rem, 1rem + 5.4vw, 6.4rem);
  font-stretch: 115%;
  font-weight: 880;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.bottoni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
}
.sotto {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.8;
}

/* ---------------------------------------------------------------- il bottone */
.bottone {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 1.15em 2.2em;
  border: 0;
  background: none;
  color: var(--inchiostro);
  font-family: inherit;
  font-size: clamp(1.05rem, 0.75rem + 1vw, 1.7rem);
  font-stretch: 110%;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  isolation: isolate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* tenendo premuto, iOS selezionerebbe il testo o aprirebbe il suo menù */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.16s ease-out;
}
.bottone:active {
  transform: scale(0.97);
}
.bottone:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 6px;
  border-radius: 999px;
}
/* la macchia sotto e il suo contorno sopra: il nastro passa fra i due */
.bottone__fondo,
.bottone__bordo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bottone__fondo {
  z-index: -1;
}
.bottone__pieno {
  fill: var(--macchia);
  transition: fill 0.3s ease;
}
.bottone__linea {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.bottone__scritta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  transition: opacity 0.12s ease;
}
.freccia {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* il nastro: copie della scritta in fila, inclinate, che scorrono solo quando il bottone è acceso */
.bottone__nastro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.bottone__storto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  rotate: -3deg;
}
.bottone__scorre {
  display: flex;
  align-items: center;
  width: max-content;
  transform: translateX(var(--da, 0px));
  animation: scorre var(--dura, 3s) linear infinite;
  animation-play-state: paused;
}
.bottone__scorre > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-inline: 0.7em;
  white-space: nowrap;
}
@keyframes scorre {
  from { transform: translateX(var(--da, 0px)); }
  to { transform: translateX(var(--a, 0px)); }
}

.bottone.acceso .bottone__scritta { opacity: 0; }
.bottone.acceso .bottone__nastro { opacity: 1; }
.bottone.acceso .bottone__scorre { animation-play-state: running; }

.ritagli {
  position: absolute;
  width: 0;
  height: 0;
}

@media (max-width: 640px) {
  .bottoni {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* movimento ridotto: niente nastro e niente macchia che si muove, solo il colore che si scalda */
@media (prefers-reduced-motion: reduce) {
  .bottone__nastro { display: none; }
  .bottone.acceso .bottone__scritta { opacity: 1; }
  .bottone.acceso .bottone__pieno { fill: color-mix(in srgb, var(--macchia), var(--inchiostro) 14%); }
}