/* Words between brackets: the services page of a made-up sound studio on warm paper. The services section is tall
   and holds a sticky stage; in it a column of words moves up through a fixed pair of brackets. GSAP moves the
   column and the two brackets; the sharpness and the width of every word change with a CSS transition. */
:root {
  --fondo: #f2eee6;        /* the paper */
  --inchiostro: #1d1b17;   /* the words */
  --parentesi: #ff4b1f;    /* the brackets */
  --tenue: #7a7366;        /* the small text */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'JetBrains Mono Variable', ui-monospace, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

.apertura {
  display: grid;
  align-content: center;
  min-height: 70vh;
  padding: 0 clamp(18px, 6vw, 110px);
}

.apertura__marchio,
.apertura__sotto,
.palco__testo p {
  margin: 0;
  color: var(--tenue);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.6;
}

.apertura__titolo {
  margin: 0.08em 0 0.2em;
  font-family: 'Saira Variable', 'Arial Narrow', sans-serif;
  font-size: clamp(64px, 14vw, 220px);
  font-stretch: 70%;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- the services */
.servizi {
  position: relative;
  height: 340vh;
}

.palco {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  align-items: center;
  height: 100vh;
  height: 100lvh;
  padding: 0 clamp(18px, 6vw, 110px);
  overflow: hidden;
}

.palco__testo {
  align-self: start;
  padding-top: 14vh;
}

.lista {
  --passo: clamp(64px, 9.4vw, 150px);   /* the height of one word: the script measures it */
  position: relative;
  height: 100%;
}

.colonna {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - var(--passo) / 2);
  margin: 0;
  padding: 0 0 0 clamp(36px, 4.6vw, 70px);
  list-style: none;
}

.parola {
  height: var(--passo);
  font-family: 'Saira Variable', 'Arial Narrow', sans-serif;
  font-size: calc(var(--passo) * 0.92);
  font-stretch: 62%;
  font-weight: 800;
  line-height: var(--passo);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  filter: blur(10px);
  opacity: 0.55;
  transition:
    filter 0.55s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.55s cubic-bezier(0.33, 1, 0.68, 1),
    font-stretch 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.parola[data-attiva='true'] {
  opacity: 1;
  font-stretch: 78%;
}

/* the brackets stay in the middle of the stage; each one is an SVG that GSAP slides sideways */
.parentesi {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - var(--passo) * 0.62);
  height: calc(var(--passo) * 1.24);
  pointer-events: none;
}

.parentesi svg {
  position: absolute;
  top: 0;
  width: auto;
  height: 100%;
  overflow: visible;
}

.parentesi__sx {
  left: 0;
}

.parentesi__dx {
  right: 0;
}

.parentesi path {
  fill: none;
  stroke: var(--parentesi);
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* on a phone the text goes above and the words take the width */
@media (max-width: 760px) {
  .palco {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .palco__testo {
    padding-top: 12vh;
  }

  .lista {
    --passo: clamp(52px, 15vw, 90px);
  }

  .colonna {
    padding-left: 28px;
  }
}

/* less motion: the list stands still, the brackets jump to the word of the moment and only sharpness and colour fade */
@media (prefers-reduced-motion: reduce) {
  .parola {
    transition: filter 0.4s linear, opacity 0.4s linear;
  }

  .parola[data-attiva='true'] {
    font-stretch: 62%;
  }
}