/* The lift up the building: a made-up coworking building cut open, with a glass lift in the middle. The stage sticks
   for the whole ride; the building is one SVG drawn by the script, its colours come from the variables below. */
:root {
  --carta: #f2ece2;        /* the page */
  --inchiostro: #1d1b23;   /* the text */
  --tenue: #6e6873;        /* the small text */
  --cielo-alto: #7fb0cc;   /* the sky at the top */
  --cielo-basso: #f6d6b2;  /* the sky near the horizon */
  --struttura: #2b2933;    /* floors, frames, cables */
  --cemento: #cfc6b8;      /* the edge of the floors */
  --pozzo: #d6dde2;        /* the back of the lift shaft */
  --vetro: #bfe6f3;        /* the glass of the cabin */
  --accento: #ff6a3d;      /* the floor numbers and the details */
  --passeggero: #2c2935;   /* the passenger */
  --legno: #c08552;        /* the wood */
  --verde: #4f8b5a;        /* the leaves */
  --lobby: #efe4d3;        /* the walls, floor by floor */
  --ufficio: #e2e6ee;
  --palestra: #f1ddd2;
  --biblioteca: #eadcc2;
  --giardino: #dcead3;
  --buio: #14111d;         /* the dark in the rooms before the lift arrives */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------- the ride */
.corsa {
  position: relative;
  height: 600lvh; /* the script sets the real height from the number of floors */
}

.palco {
  position: sticky;
  top: 0;
  height: 100lvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(24px, 3vw, 48px);
  padding: 24px;
  overflow: hidden;
}

.finestra {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--cielo-alto), var(--cielo-basso));
}

.palazzo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the copy beside the building */
.testo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  padding-right: 8px;
}

.testo__marchio {
  margin: 0;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.testo__testa {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* the floor display, like the one above the lift doors */
.quadro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: var(--struttura);
}

.quadro__freccia {
  width: 22px;
  height: 22px;
  fill: var(--accento);
  opacity: 0.18;
}

.quadro__cifra {
  position: relative;
  display: inline-block;
  min-width: 1.3em;
  height: 1.15em;
  overflow: hidden;
  color: var(--accento);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}

.quadro__cifra > span {
  display: block;
}

.testo__nomi {
  display: grid;
  gap: 6px;
}

.testo__piano,
.testo__titolo,
.testo__riga {
  position: relative;
  margin: 0;
}

.testo__piano {
  color: var(--accento);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.testo__titolo {
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 700;
  font-variation-settings: 'wdth' 90;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.testo__riga {
  max-width: 30ch;
  min-height: 4.2em;
  color: var(--tenue);
  font-size: 17px;
  line-height: 1.4;
}

.testo__piano > span,
.testo__titolo > span,
.testo__riga > span {
  display: block;
}

.lettera {
  display: inline-block;
  white-space: pre;
}

/* the lift panel: one button per floor */
.pulsantiera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.pulsante {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--struttura) 22%, transparent);
  border-radius: 50%;
  background: #fff;
  color: var(--inchiostro);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--struttura) 18%, transparent);
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.pulsante > span {
  display: block;
}

.pulsante.is-qui {
  border-color: var(--accento);
  color: var(--accento);
}

.pulsante:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
}

@media (hover: hover) {
  .pulsante:hover {
    border-color: var(--struttura);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--struttura) 30%, transparent);
  }
}

.testo__cenno {
  margin: 0;
  color: var(--tenue);
  font-size: 14px;
}

/* ---------------------------------------------------------------- after the ride */
.uscita {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 18px;
  min-height: 70vh;
  padding: 80px 16px;
  text-align: center;
}

.uscita__marchio {
  margin: 0;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uscita__titolo {
  max-width: 12em;
  margin: 0;
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 700;
  font-variation-settings: 'wdth' 85;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.tasto {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--struttura);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.tasto > span {
  display: block;
}

/* ---------------------------------------------------------------- the SVG colours */
.f-struttura { fill: var(--struttura); }
.f-cemento { fill: var(--cemento); }
.f-pozzo { fill: var(--pozzo); }
.f-vetro { fill: var(--vetro); }
.f-accento { fill: var(--accento); }
.f-passeggero { fill: var(--passeggero); }
.f-legno { fill: var(--legno); }
.f-verde { fill: var(--verde); }
.f-buio { fill: var(--buio); }
.f-lobby { fill: var(--lobby); }
.f-ufficio { fill: var(--ufficio); }
.f-palestra { fill: var(--palestra); }
.f-biblioteca { fill: var(--biblioteca); }
.f-giardino { fill: var(--giardino); }
.s-struttura { stroke: var(--struttura); }
.s-accento { stroke: var(--accento); }
.s-verde { stroke: var(--verde); }
.s-legno { stroke: var(--legno); }

.insegna {
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
}

.mono {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 500;
}

/* ---------------------------------------------------------------- phones and tall screens */
@media (max-width: 759px), (max-aspect-ratio: 5/6) {
  .palco {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 12px 16px 16px;
  }

  .finestra {
    border-radius: 18px;
  }

  .testo {
    gap: 10px;
    padding: 0;
  }

  .testo__marchio {
    display: none;
  }

  .testo__testa {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  .quadro {
    padding: 6px 10px 6px 8px;
    border-radius: 10px;
    gap: 6px;
  }

  .quadro__freccia {
    width: 16px;
    height: 16px;
  }

  .quadro__cifra {
    font-size: 30px;
  }

  .testo__nomi {
    gap: 2px;
  }

  .testo__piano {
    font-size: 12px;
  }

  .testo__titolo {
    font-size: 28px;
  }

  .testo__riga {
    max-width: none;
    min-height: 2.8em;
    font-size: 14px;
    line-height: 1.38;
  }

  .pulsantiera {
    gap: 8px;
    margin-top: 0;
  }

  .pulsante {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .testo__cenno {
    display: none;
  }
}