/* The manifesto gains opacity in reading order, without changing its layout. */
.manifesto-word {
  display: inline-block;
  color: var(--ink);
  opacity: var(--word-opacity, 0.22);
  transition: opacity 100ms linear;
}

/* The normal page scroll drives one sticky stack. No scroll is intercepted. */
.story-sequence {
  margin-top: 133px;
  height: calc(var(--story-stage-height, 720px) + 210svh);
  scroll-margin-top: 0;
  overflow-x: clip;
  overflow-y: visible;
}
.team-section {
  position: sticky;
  top: max(110px, calc((100svh - var(--story-stage-height, 720px)) / 2));
  align-items: start;
  height: var(--story-stage-height, 720px);
  margin: 0 auto;
}
.story-steps {
  position: relative;
  height: 100%;
}
.story-step {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: var(--caption-opacity, 0);
  transform: translateY(var(--caption-y, 40px));
  pointer-events: none;
}
.story-step:first-child {
  --caption-opacity: 1;
  --caption-y: 0px;
}
.story-step p {
  max-width: 295px;
}
.story-stage {
  position: relative;
  top: auto;
  width: 100%;
  max-width: calc((100svh - 160px) * 0.9531);
  overflow: visible;
  isolation: isolate;
}
.team-canvas {
  overflow: visible;
}
.story-card {
  left: 0;
  top: 0;
  width: 686px;
  height: 671px;
  border-radius: 44px;
  transform-origin: 50% 0;
  /* Keep vector content eligible for a sharp repaint when its scale changes. */
  transform: translate(var(--card-x, 0px), var(--card-y, 0px))
    rotate(var(--card-rotate, 0deg)) scale(var(--card-scale, 1));
}
.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background-image: var(--card-grain);
  background-repeat: repeat;
  background-size: 128px 128px;
  opacity: .028;
  pointer-events: none;
}
.story-card[data-card="0"] { --card-grain: url("./assets/grain/card-grain-0.png"); }
.story-card[data-card="1"] { --card-grain: url("./assets/grain/card-grain-1.png"); }
.story-card[data-card="2"] { --card-grain: url("./assets/grain/card-grain-2.png"); }
.story-card[data-card="3"] { --card-grain: url("./assets/grain/card-grain-3.png"); }
.story-card .card-surface { z-index: 2; }
.story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  box-shadow: inset 0 0 0 .5px rgba(21, 17, 13, .1);
  pointer-events: none;
}
.story-card:nth-child(1) {
  z-index: 4;
}
.story-card:nth-child(2) {
  z-index: 3;
  --card-y: 63.5px;
  --card-scale: 0.942;
}
.story-card:nth-child(3) {
  z-index: 2;
  --card-y: 127px;
  --card-scale: 0.884;
}
.story-card:nth-child(4) {
  z-index: 1;
  --card-y: 127px;
  --card-scale: 0.884;
}
.story-card .card-symbol {
  left: -284.53px;
  top: 21.3px;
}
.story-card:nth-child(2) .card-symbol {
  left: -32.78px;
  top: 148.57px;
  transform: rotate(-30deg) scale(1.0619);
}
.story-card:nth-child(3) .card-symbol {
  left: -4.94px;
  top: 72.13px;
  transform: rotate(-30deg) scale(1.132);
}

@media (max-width: 1500px) {
  .team-section {
    justify-content: center;
  }
}
@media (max-width: 1100px) {
  .story-sequence {
    margin-top: 110px;
  }
}
@media (max-width: 760px) {
  .story-sequence {
    --caption-height: clamp(190px, calc(420px - 50vw), 250px);
    margin-top: 72px;
    height: calc(
      var(--story-stage-height, 360px) + var(--caption-height) + 210svh
    );
  }
  .team-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--story-stage-height, 360px) var(--caption-height);
    gap: 0;
    height: calc(var(--story-stage-height, 360px) + var(--caption-height));
    top: 96px;
  }
  .story-stage {
    grid-column: 1;
    grid-row: 1;
    max-width: min(
      100%,
      calc((100svh - var(--caption-height) - 110px) * 0.9531)
    );
    justify-self: center;
  }
  .story-steps {
    grid-column: 1;
    grid-row: 2;
    height: var(--caption-height);
  }
  .story-step {
    padding: 26px 0 0;
    justify-content: flex-start;
  }
  .story-step p {
    max-width: 330px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .manifesto-word {
    transition: none;
  }
}
@media (max-width: 760px) and (max-height: 600px) {
  .story-sequence {
    height: auto;
  }
  .team-section {
    position: relative;
    top: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .story-stage {
    order: 0;
    width: 240px;
    max-width: 100%;
    align-self: center;
  }
  .story-steps {
    order: 1;
    height: auto;
    display: grid;
    gap: 36px;
  }
  .story-step {
    position: static;
    padding: 0;
    opacity: 1;
    transform: none;
  }
}
@media (forced-colors: active) {
  .manifesto-word {
    opacity: 1;
  }
}