/* Lettere in piedi con l'ombra lunga
   I colori stanno tutti qui: il cielo e la terra cambiano col sole (script.js li mescola). */
:root {
  --lettera: #d9602a;       /* faccia delle lettere */
  --bordo: #ffb27a;         /* il filo di luce sulla testa delle lettere */
  --ombra: #0b3b39;         /* colore dell'ombra, mai nero puro */
  --ombra-forza: 0.52;      /* quanto è scura l'ombra */
  --terra-chiara: #eadbc4;
  --terra-scura: #d8c1a0;
}

html,
body {
  margin: 0;
}
body {
  background: var(--terra-scura);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}

.corsa {
  height: 280vh;             /* quanto si scorre per portare il sole a sera */
}
.palco {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
@supports (height: 100svh) {
  .palco { height: 100svh; }
}

.cielo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--cielo-alto, #cfebe5), var(--cielo-basso, #fff1e0) var(--base-y, 72%));
}
.sole {
  position: absolute;
  left: var(--sole-x, 40%);
  top: var(--sole-y, 30%);
  width: 16vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sole, #fff6e6);
  box-shadow: 0 0 14vmin 4vmin color-mix(in srgb, var(--sole, #fff6e6) 28%, transparent);
  transform: translate(-50%, -50%);
}
.terra {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--base-y, 72%);
  bottom: 0;
  background: linear-gradient(to bottom, var(--terra-chiara), var(--terra-scura));
}

.parola {
  margin: 0;
  font-weight: 820;
  font-stretch: calc(var(--wdth, 100) * 1%);
  font-size: var(--corpo, 18vw);
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.parola__testo {
  display: inline-block;
}
.lettera {
  display: inline-block;
}
.base-misura {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

/* le lettere in piedi: la linea di base cade esattamente sulla linea di terra */
.parola--luce {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--parola-top, 50%);
  text-align: center;
  color: var(--lettera);
  text-shadow: 0 calc(var(--corpo, 18vw) * -0.028) 0 var(--bordo);
  z-index: 3;
}

/* il piano dell'ombra: parte dalla linea di terra e si sdraia verso chi guarda */
.piano-vista {
  position: absolute;
  left: -30%;
  right: -30%;
  top: var(--base-y, 72%);
  height: 140%;
  perspective: var(--prospettiva, 800px);
  perspective-origin: 50% -60%;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 2;
}
.piano {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  transform: rotateX(72deg);
}
.parola--ombra {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ombra-base, 0px) * -1);
  text-align: center;
  color: var(--ombra);
  opacity: var(--ombra-forza);
  transform-origin: 50% var(--ombra-base, 0px);
  -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0, 0, 0, 0.26) 100%);
  mask-image: linear-gradient(to top, #000 8%, rgba(0, 0, 0, 0.26) 100%);
  filter: blur(0.6px);
}