/* About page (work/about/index.html): one statement per full screen.

   Without JS (or with reduced motion) the statements are simply stacked
   full-screen sections. With about.js the story is "live": the screen is
   pinned (sticky stage) and as the page scrolls each statement leaves
   through its line masks and the next one types itself in. */
.about-page {
  --header-h: 107px;
}

.about-story .text-reveal,
.about-story .text-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.about-scene {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 3vh) max(7vw, 24px) 7vh;
}

.about-statement {
  font-size: clamp(22px, 4vw, 88px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0;
  max-width: min(76vw, 1320px);
  text-align: left;
  text-transform: none;
  transform-origin: 0 50%;
  width: 100%;
}

/* Longer paragraphs read as text rather than as a statement: smaller,
   lighter, more open lines (about.js also caps their size lower). */
.about-statement--long {
  box-sizing: border-box;
  font-weight: 300;
  line-height: 1.3;
  /* Same left edge as the short statements, shorter lines. */
  padding-right: 10vw;
}

/* ---- Live (pinned) story ---- */
.about-story.is-live {
  /* Starts under the sticky header, so it is pinned from the very top. */
  margin-top: calc(var(--header-h) * -1);
  position: relative;
}

.about-story.is-live .about-stage {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.about-story.is-live .about-scene {
  inset: 0;
  min-height: 0;
  position: absolute;
  visibility: hidden;
}

.about-story.is-live .about-scene.is-on {
  visibility: visible;
}

/* Each word rides inside its own mask. The padding / negative margin keep
   ascenders and descenders inside the mask without changing line spacing. */
.about-w {
  display: inline-block;
  margin: -.08em 0 -.16em;
  overflow: hidden;
  padding: .08em 0 .16em;
  vertical-align: top;
}

.about-wi {
  display: inline-block;
}

/* Typing: letters appear one by one; the newest few jump sideways with a
   double cyan edge (about.js sets their offset). */
.about-c {
  position: relative;
}

.about-story.is-live .about-c {
  visibility: hidden;
}

.about-story.is-live .about-c.is-typed {
  visibility: visible;
}

.about-c.is-hot {
  text-shadow: -.07em 0 #00ddee, .05em 0 rgb(0 221 238 / .45);
}

/* Cyan caret: zero width, so it never pushes the text. */
.about-caret {
  display: inline-block;
  height: 1em;
  position: relative;
  vertical-align: baseline;
  width: 0;
}

.about-caret::after {
  background: #00ddee;
  bottom: -.14em;
  content: "";
  height: 1.02em;
  left: .06em;
  position: absolute;
  width: .07em;
}

.about-caret.is-blink::after {
  animation: about-caret-blink .5s steps(1) infinite;
}

@keyframes about-caret-blink {
  50% { opacity: 0; }
}

/* Leaving: words slide up out of their masks, one after another, with a
   cyan edge. */
.about-scene.is-leaving .about-wi {
  text-shadow: .06em 0 #00ddee;
  transform: translateY(-112%);
  transition: transform .42s cubic-bezier(.6, 0, .75, .25);
}

@media (max-width: 820px) {
  .about-page {
    --header-h: 92px;
  }

  .about-scene {
    padding: calc(var(--header-h) + 2vh) 24px 6vh;
  }

  .about-statement {
    line-height: 1.15;
    max-width: none;
  }

  .about-statement--long {
    line-height: 1.32;
    padding-right: 0;
  }
}