/* A cena mantém a geometria fixa; somente transform e opacity acompanham o progresso. */
@media (min-height: 601px) and (prefers-reduced-motion: no-preference) {
  .hero-product .product-pool-stage {
    --stage-dx: 11vw;
    --stage-dy: -9svh;
    left: 50%;
    top: 64%;
    width: min(77vw, 1120px);
    transform: translate3d(
      calc(-50% + var(--intro-progress, 0) * var(--stage-dx)),
      calc(-50% + var(--intro-progress, 0) * var(--stage-dy)),
      0
    ) scale(clamp(.01, calc(var(--stage-fit-a, 1) - var(--stage-fit-b, 0) * var(--intro-progress, 0)), 1));
  }

  .hero-product .product-pool-stage,
  .hero-product .product-render,
  .hero-product .hero-content,
  .hero-product .hero-second-copy {
    will-change: auto;
  }

  .hero-product .product-render { filter: none; }
  .hero-product .product-render-front { opacity: var(--pool-front-opacity, 1); }
  .hero-product .product-render-top { opacity: var(--pool-top-opacity, 0); }
  .hero-product .hero-second-copy { opacity: var(--pool-copy-opacity, 0); }
  .hero-scroll .hero-product .hero-content {
    opacity: calc(1 - var(--pool-copy-opacity, 0));
    transform: translate3d(0, calc(var(--intro-progress, 0) * -125px), 0);
  }

  .hero-product .product-callout p {
    background: #f2f8fcf2;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero-product.is-pool-moving .product-pool-stage { will-change: transform; }
  .hero-product.is-pool-moving .product-render,
  .hero-product.is-pool-moving .hero-content,
  .hero-product.is-pool-moving .hero-second-copy {
    will-change: transform, opacity;
  }

  /* Uma vista disponível permanece visível se o outro arquivo não carregar. */
  .hero-product .product-pool-stage.top-image-unavailable .product-render-front,
  .hero-product .product-pool-stage.front-image-unavailable .product-render-top {
    opacity: 1;
  }

  @media (min-width: 900px) and (max-width: 1100px) {
    .hero-product .product-pool-stage {
      --stage-dx: 21vw;
      width: 77vw;
    }
  }

  @media (max-width: 899px) {
    .hero-product .product-pool-stage {
      --stage-dx: 0px;
      --stage-dy: 7svh;
      top: 66%;
      width: 94vw;
    }
  }

  @media (max-width: 599px) {
    .hero-product .product-render-front {
      transform: rotateZ(calc(-6deg + var(--intro-progress, 0) * 12deg)) scale(calc(.89 + var(--intro-progress, 0) * .12));
    }
  }

  @media (max-width: 599px) and (max-height: 700px) {
    .hero-product .product-pool-stage { --stage-dy: 5svh; }
  }
}