/* Lo sfondo di nebbia colorata: una carta bianco caldo e sopra una nebbia di tre tinte morbide (albicocca, pervinca,
   burro) disegnata da un solo shader WebGL piccolo, con una grana fine da pellicola. Sopra, il titolo di un'app per
   dormire inventata (hush) in Mona Sans, che ha gli assi del peso e della larghezza. */
:root {
  --carta: #f4f1ea;      /* il fondo */
  --tinta-a: #f5ae8a;    /* la nebbia albicocca */
  --tinta-b: #a8b6f2;    /* la nebbia pervinca */
  --tinta-c: #f1d79c;    /* la nebbia burro */
  --inchiostro: #1c1b22; /* il titolo, la pillola */
  --tenue: #5f5a63;      /* le scritte piccole */
  --elastico: cubic-bezier(0.34, 1.9, 0.45, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Mona Sans Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pagina {
  --margine: clamp(16px, 4.4vw, 60px);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100svh;
  min-height: 460px;
  padding: clamp(18px, 3vw, 34px) var(--margine);
  overflow: hidden;
  isolation: isolate;
}

.fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
}

/* senza WebGL resta una nebbia ferma, fatta di sfumature */
.pagina.senza-gl {
  background:
    radial-gradient(60% 70% at 22% 28%, color-mix(in srgb, var(--tinta-a) 80%, transparent), transparent 70%),
    radial-gradient(55% 65% at 80% 62%, color-mix(in srgb, var(--tinta-b) 80%, transparent), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--tinta-c) 80%, transparent), transparent 70%),
    var(--carta);
}

/* ---------------------------------------------------------------- la testata */
.testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.testa p {
  margin: 0;
}

.marchio {
  font-size: 21px;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.03em;
}

.testa__nota {
  color: var(--tenue);
  font-size: 14px;
  font-weight: 500;
}

/* ---------------------------------------------------------------- il titolo */
.eroe {
  display: grid;
  place-items: center;
  padding-bottom: 5vh;
}

.blocco {
  display: grid;
  justify-items: center;
  max-width: 820px;
  text-align: center;
}

.occhiello {
  margin: 0 0 18px;
  color: var(--tenue);
  font-size: 14px;
  font-weight: 520;
  letter-spacing: 0.01em;
}

.titolo {
  margin: 0;
  font-size: clamp(2.2rem, 1rem + 4vw, 4.6rem);
  font-weight: 520;
  font-stretch: 100%;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

/* le parole: GSAP muove l'involucro */
.parola {
  display: inline-block;
}

.azione {
  margin-top: 32px;
}

/* ---------------------------------------------------------------- la pillola elastica */
.pillola {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  color: var(--carta);
  font-size: 15px;
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.pillola::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--inchiostro);
  transition: inset 0.6s var(--elastico);
}

.pillola__scritta {
  font-stretch: 100%;
  text-align: center;
  transition: font-stretch 0.6s var(--elastico);
}

.pillola__scritta::before {
  content: attr(data-testo);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-stretch: 125%;
}

.pillola__freccia {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s var(--elastico);
}

@media (hover: hover) and (pointer: fine) {
  .pillola:hover::before {
    inset: -2px -7px;
  }

  .pillola:hover .pillola__scritta {
    font-stretch: 125%;
  }

  .pillola:hover .pillola__freccia {
    transform: translateX(3px);
  }
}

.pillola:active::before {
  inset: 2px 3px;
}

.pillola:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  .titolo {
    font-size: clamp(2rem, 10vw, 2.6rem);
  }
}