/* Homepage scroll storytelling: page progress bar, stacking project cards
   and images that scale up as they enter. Driven by js/home-motion.js. */

/* Page progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 3px;
  background-color: #fffdd0;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Stacking cards: desktop and large tablets with enough height */
@media screen and (min-width: 992px) and (min-height: 700px) {
  /* overflow: hidden on these ancestors would stop the cards from sticking */
  .motion-ready .page-wrapper,
  .motion-ready .section_portfolio {
    overflow: clip;
  }

  .motion-ready .section_portfolio .portfolio_item-wrapper.is-home {
    padding-bottom: 20vh;
  }

  .motion-ready .section_portfolio .portfolio-item {
    position: sticky;
    top: var(--stack-top, 7rem);
    height: auto;
    padding: 2.5rem;
    /* Solid dark panel that covers the card underneath as it stacks.
       No shadow, and it is never dimmed, so it stays one flat colour. */
    background-color: #141514;
    border: 1px solid #ffffff14;
    border-radius: 1.5rem;
  }

  /* Shrink and dim the card's contents (not its background) as the next card covers it */
  .motion-ready .section_portfolio .portfolio_item-left {
    transform: scale(var(--stack-scale, 1));
    transform-origin: 0 0;
    filter: brightness(var(--stack-dim, 1));
  }

  .motion-ready .section_portfolio .portfolio_image {
    filter: brightness(var(--stack-dim, 1));
  }

  .motion-ready .section_portfolio .portfolio_image {
    max-height: calc(100vh - 14rem);
  }
}

/* Images scale up from slightly smaller as they come into view */
.motion-ready .section_portfolio .portfolio_image {
  transform: scale(calc(var(--enter-scale, 1) * var(--stack-scale, 1)));
  transform-origin: 50% 100%;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
}