/* FT-style scrollytelling */

.scrolly {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.scrolly-figure {
  position: sticky;
  top: 0;
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 1;
  padding: 0 1.5rem;
}

.scrolly-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.scrolly-steps {
  position: relative;
  z-index: 2;
}

/* The text card itself (FT-like) */
.scrolly-steps .step {
  display: block;
  padding: 2rem 2.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.10),
    0 12px 28px rgba(0, 0, 0, 0.08);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50vh;
  margin-bottom: 50vh;
  /* Only one visible at a time */
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-in-out;
}

.scrolly-steps .step.is-active {
  opacity: 1;
  pointer-events: auto;
  /* This is the "float from bottom then scroll away" behavior */
  position: sticky;
  bottom: 2rem;
}

/* When scrolling up, flip the sticky anchor so the box "floats" downward (top -> bottom) */
html[data-scroll-dir="up"] .scrolly-steps .step.is-active {
  top: 2rem;
  bottom: auto;
}

/* Position variants (controlled by position="left|center|right" on scrolly_step) */
.scrolly-steps .step-left,
.scrolly-steps .step-left.is-active {
  margin-left: 2rem;
  margin-right: auto;
}

.scrolly-steps .step-center,
.scrolly-steps .step-center.is-active {
  margin-left: auto;
  margin-right: auto;
}

.scrolly-steps .step-right,
.scrolly-steps .step-right.is-active {
  margin-left: auto;
  margin-right: 2rem;
}

.scrolly-steps .step:last-child {
  margin-bottom: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .scrolly-figure {
    /* Give charts more space on mobile + reserve some room for the sticky text card overlay */
    height: 70vh;
    padding: 1rem 1rem 7rem;
    align-items: flex-start;
  }

  .scrolly-steps .step {
    margin-top: 40vh;
    margin-bottom: 40vh;
    padding: 1.25rem 1.25rem;
  }

  .scrolly-steps .step.is-active {
    bottom: 1rem;
  }

  html[data-scroll-dir="up"] .scrolly-steps .step.is-active {
    top: 1rem;
    bottom: auto;
  }
}