/* Ściana słów: szum maszyny, z którego zostaje wiersz. Rysowane w WebGL (noxadus-rzezba.js). */

.rz {
  position: relative;
  margin-top: clamp(110px, 14vw, 200px);
}

.rz-intro {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vw, 70px);
  text-align: center;
}

.rz-intro h2 {
  margin: 14px auto 0;
  font-size: clamp(34px, 5vw, 70px);
  font-weight: 780;
  line-height: .98;
  letter-spacing: -.05em;
}

.rz-stage {
  position: relative;
  height: 100svh;
  margin-inline: calc(50% - 50vw);
}

.rz-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #030505;
}

.rz-gl {
  display: block;
  width: 100%;
  height: 100%;
}

/* Krawędzie sceny gasną w tło strony, bez twardych linii. */
.rz-pin::before,
.rz-pin::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  height: 18vh;
  pointer-events: none;
}

.rz-pin::before {
  top: 0;
  background: linear-gradient(#050707, rgba(5, 7, 7, 0));
}

.rz-pin::after {
  bottom: 0;
  background: linear-gradient(rgba(5, 7, 7, 0), #050707);
}

.rz-lines {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rz-outro {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 5vw, 60px);
}

/* Bez WebGL albo bez ruchu: wiersz stoi nieruchomo w podświetlonej przestrzeni. */
.rz.is-static .rz-stage {
  height: auto;
}

.rz.is-static .rz-pin {
  position: relative;
  display: grid;
  place-items: center;
  height: auto;
  min-height: 70svh;
  padding: 90px 20px;
  background: radial-gradient(60% 55% at 50% 45%, rgba(142, 234, 203, .12), transparent 72%), #030505;
}

.rz.is-static .rz-gl {
  display: none;
}

.rz-fallback {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .7em;
  color: #fff8ec;
  font-size: clamp(24px, 4.2vw, 46px);
  font-weight: 300;
  text-align: center;
  text-shadow: 0 0 18px rgba(142, 234, 203, .6);
}

.rz-fallback p {
  margin: 0;
}

.rz-word {
  display: inline-block;
  white-space: nowrap;
}

.rz-word span {
  display: inline-block;
  transform: translateY(var(--y)) rotate(var(--r));
}