/* The sticker that follows the words: a big quote on a deep aubergine page. The two coloured words are the handles;
   the stickers sit in the same box as the quote, placed by two numbers the script writes (where the pointer is) and
   turned by a third (how fast it is moving). Each sticker is two boxes: the outer one goes where the script says,
   the inner one pops in and out with a CSS transition, so the two never write over each other's transform. */
:root {
  --fondo: #22193a;        /* the page */
  --testo: #fbf6ec;        /* the quote */
  --accento: #ffb05c;      /* the two words you can point at */
  --tenue: #b9b0d0;        /* who said it and where */
  --carta: #fffdf7;        /* the white rim of the stickers */
  --pelle: #f2b48a;        /* the face */
  --capelli: #3b2a22;      /* the hair and the lines of the face */
  --cuore: #ff5e7a;        /* the heart */
  --nuvoletta: #ffe45c;    /* the speech bubble */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--fondo);
  color: var(--testo);
  font-family: 'Inter Tight Variable', 'Inter Tight', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.palco {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: clamp(96px, 16vh, 180px) clamp(16px, 5vw, 80px) clamp(40px, 8vh, 96px);
}

/* ---------------------------------------------------------------- the quote */
.citazione {
  position: relative;
  margin: 0;
  max-width: 1180px;
  text-align: center;
}

.citazione__testo {
  margin: 0;
  font-size: clamp(34px, 6.2vw, 92px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.citazione__testo p {
  margin: 0;
}

.citazione__testo p + p {
  margin-top: 0.12em;
}

/* the lines of the opening: each one rises out of its own slot */
.riga {
  overflow: clip;
  overflow-clip-margin: 0.2em;
  padding-bottom: 0.06em;
}

.accento {
  position: relative;
  color: var(--accento);
  cursor: pointer;
  outline: none;
  border-radius: 0.12em;
  transition: color 0.15s;
}

/* the word reacts a little beyond its letters, so it is easy to find with a finger too */
.accento::before {
  content: '';
  position: absolute;
  inset: -0.35em -0.25em;
}

.accento:focus-visible {
  box-shadow: 0 0.06em 0 0 var(--accento);
}

.citazione__firma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: clamp(28px, 5vh, 56px);
  font-size: clamp(14px, 1.3vw, 18px);
}

.citazione__firma::before {
  content: '';
  width: 64px;
  height: 1px;
  margin-bottom: 14px;
  background: var(--tenue);
  opacity: 0.5;
}

.firma__chi {
  color: var(--accento);
  font-style: italic;
  font-weight: 500;
}

.firma__dove {
  color: var(--tenue);
  font-style: italic;
}

/* ---------------------------------------------------------------- the stickers */
.adesivo {
  --x: 50%;                /* written by the script: where the pointer is, inside the quote */
  --y: 50%;
  --giro: 0deg;            /* written by the script: the lean */
  --stacco: 4px;           /* the gap between the pointer and the bottom of the sticker */
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: clamp(124px, 15vw, 220px);
  pointer-events: none;
  transform: translate3d(-50%, calc(-100% - var(--stacco)), 0) rotate(var(--giro));
  transform-origin: 50% 100%;
}

.adesivo--cuore {
  --stacco: 12px;
  width: clamp(92px, 10vw, 150px);
}

.adesivo__corpo {
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 14px rgb(10 4 24 / 0.38));
}

.adesivo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* both start hidden; the script pops them in and out (the face grows from its bottom edge, the heart opens like a
   round window from its middle and then beats) */
.adesivo__corpo {
  opacity: 0;
}

.bordo {
  fill: var(--carta);
  stroke: var(--carta);
  stroke-width: 18;
  stroke-linejoin: round;
}

.pelle {
  fill: var(--pelle);
}

.capelli {
  fill: var(--capelli);
}

.guance {
  fill: #ec8a6f;
  opacity: 0.55;
}

.occhi circle {
  fill: #fff;
}

.occhi .pupilla {
  fill: var(--capelli);
}

.tratto {
  fill: none;
  stroke: var(--capelli);
  stroke-width: 6;
  stroke-linecap: round;
}

.nuvoletta {
  fill: var(--nuvoletta);
}

.nuvoletta__testo {
  fill: var(--capelli);
  font-family: 'Inter Tight Variable', 'Inter Tight', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cuore {
  fill: var(--cuore);
}

.luce {
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.7;
}