/* The about section is the room once the hero's lamp is on: the same dot
   grid and spotlight, now on paper, behind two collages that stay pinned
   while the two chapters scroll past on the left. */
.about-section {
  /* The collages leave their left ~32% empty; the chapters fill that space. */
  --art-width: min(92%, 150svh);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  color: var(--ink);
}

.about-visual {
  /* 0 while chapter 1 is in view, 1 for chapter 2 (--about-scroll is eased in JS). */
  --about-mix: clamp(0, calc(.5 - var(--about-scroll, 1) / .3), 1);
  /* At rest the light sits on the bulb head in each collage. */
  --spot-x: calc(74.5% - 3% * var(--about-mix));
  --spot-y: calc(19% + 9.5% * var(--about-mix));
  --stage-dot: rgb(35 39 38 / 16%);
  --stage-spot-dot: #e8b400;
  --stage-spot-size: 1.8px;
  --stage-wash: rgb(252 204 12 / 24%);
  /* Pinned below the sticky header, filling the rest of the screen. */
  position: sticky;
  top: var(--header-height, 0px);
  grid-area: 1 / 1 / 3 / 2;
  height: calc(100vh - var(--header-height, 0px));
  height: calc(100svh - var(--header-height, 0px));
  align-self: start;
  overflow: hidden;
  isolation: isolate;
}

/* Multiply lets the paper-white of each collage drop away, so the grid and
   the spotlight show through around the artwork. The masks fade the edges
   (the left one clears the line art from behind the text) and run the
   chapter change: the second collage spreads out from its light bulb
   (68% 28%) while the first is cut away by the same circle. */
.about-image {
  --reveal: calc(var(--about-mix) * (100vw + 80px));
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--art-width);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  mix-blend-mode: multiply;
  transform: translateY(-50%);
  /* Drift against the spotlight for a little depth. */
  translate: calc((50% - var(--spot-x)) * .03) calc((50% - var(--spot-y)) * .03);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 31%, #000 95%, transparent 99%), linear-gradient(transparent 1%, #000 8%, #000 84%, transparent 99%), var(--about-reveal);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 20%, #000 31%, #000 95%, transparent 99%), linear-gradient(transparent 1%, #000 8%, #000 84%, transparent 99%), var(--about-reveal);
  mask-composite: intersect;
  /* Chrome leaves a 1px unmasked rim on transformed, masked images. */
  clip-path: inset(1px);
}

.about-image--defy {
  --about-reveal: radial-gradient(circle at 68% 28%, transparent calc(var(--reveal) - 80px), #000 var(--reveal));
  scale: calc(1 + var(--about-mix) * .06);
}

.about-image--brilliant {
  --about-reveal: radial-gradient(circle at 68% 28%, #000 calc(var(--reveal) - 80px), transparent var(--reveal));
  scale: calc(1.06 - var(--about-mix) * .06);
}

.about-article {
  position: relative;
  z-index: 1;
  grid-column: 1;
  display: flex;
  width: max(440px, calc(100% - .68 * var(--art-width) - 24px));
  min-height: calc(100vh - var(--header-height, 0px));
  min-height: calc(100svh - var(--header-height, 0px));
  flex-direction: column;
  justify-content: center;
  padding: clamp(72px, 9vh, 120px) 0 clamp(72px, 9vh, 120px) max(6vw, 36px);
}

.about-article--defy {
  grid-row: 1;
}

.about-article--brilliant {
  grid-row: 2;
}

.about-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  color: rgb(35 39 38 / 70%);
  font-size: clamp(.82rem, 1.1vw, 1rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
}

.about-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--yellow);
}

.about-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 4.75rem);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
}

.about-article--defy .about-title {
  font-size: clamp(3.5rem, 7vw, 8rem);
}

/* "ordinary" gets a brush stroke like the yellow swirls in the collages. */
.about-title-mark {
  position: relative;
  white-space: nowrap;
}

.about-brush {
  position: absolute;
  z-index: -1;
  bottom: .02em;
  left: -3%;
  width: 106%;
  height: .24em;
  overflow: visible;
  fill: none;
  stroke: var(--yellow);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 9;
}

/* "different idea." gets a marker highlight. */
.about-title-accent {
  background: linear-gradient(var(--yellow), var(--yellow)) 0 88% / 0 40% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.about-word {
  display: inline-block;
  overflow: hidden;
  margin-bottom: -.08em;
  padding-bottom: .08em;
  vertical-align: top;
}

.about-word > span {
  display: inline-block;
  transform: translateY(110%) rotate(6deg);
  transform-origin: left bottom;
}

.about-copy {
  max-width: 46ch;
  margin: clamp(18px, 2.4vw, 30px) 0 0;
  color: rgb(35 39 38 / 80%);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.65;
  opacity: 0;
  transform: translateY(24px);
}

.about-article.is-visible .about-eyebrow {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease, transform 900ms var(--ease-out);
}

.about-article.is-visible .about-word > span {
  transform: none;
  transition: transform 1100ms var(--ease-out) calc(150ms + var(--word, 0) * 70ms);
}

.about-article.is-visible .about-brush {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms cubic-bezier(.65, 0, .35, 1) 700ms;
}

.about-article.is-visible .about-title-accent {
  background-size: 100% 40%;
  transition: background-size 900ms cubic-bezier(.65, 0, .35, 1) 800ms;
}

.about-article.is-visible .about-copy {
  opacity: 1;
  transform: none;
  transition: opacity 900ms ease 450ms, transform 1200ms var(--ease-out) 450ms;
}

@media (max-width: 1024px) {
  /* Stacked: each collage sits above its chapter instead of staying pinned. */
  .about-visual {
    display: contents;
  }

  .about-visual .stage-spot {
    display: none;
  }

  .about-image {
    position: relative;
    top: auto;
    grid-column: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-position: right center;
    transform: none;
    translate: none;
    scale: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%), linear-gradient(transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%), linear-gradient(transparent, #000 8%, #000 92%, transparent);
  }

  .about-image--defy {
    grid-row: 1;
  }

  .about-article--defy {
    grid-row: 2;
  }

  .about-image--brilliant {
    grid-row: 3;
  }

  .about-article--brilliant {
    grid-row: 4;
  }

  .about-article {
    width: auto;
    min-height: 0;
    padding: 8px max(6vw, 36px) clamp(64px, 10vw, 96px);
  }
}

@media (max-width: 680px) {
  .about-image {
    aspect-ratio: 1;
  }

  .about-article {
    padding: 4px 24px 64px;
  }

  .about-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .about-article--defy .about-title {
    font-size: 17vw;
  }

  .about-copy {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-image {
    translate: none;
  }
}