/* ==========================================================================
   AUTHIFY — Products scroll-pinned cover-flow (desktop only)
   Below the breakpoint, .products__scrollwrap/.products__pin are inert
   (height:auto, position:static) and the section behaves exactly like the
   plain swipeable carousel in products-showcase.css — untouched on mobile.
   At/above the breakpoint, the section pins in the viewport for a tall
   scroll run and the cards cover-flow through in 3D as the user scrolls.
   ========================================================================== */

@media (min-width: 901px){

  .products__scrollwrap{
    /* pin height (100vh minus the fixed navbar) + 5 steps between 6 cards */
    height: calc(100vh - var(--nav-h, 64px) + 5 * 60vh);
  }

  .products__pin{
    position: sticky;
    /* Sits below the fixed navbar rather than under it, so the heading is
       never clipped/hidden behind the nav bar while pinned. */
    top: var(--nav-h, 64px);
    height: calc(100vh - var(--nav-h, 64px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .products-carousel__viewport{
    display: block;
    position: relative;
    overflow: visible;
    margin: 0;
    padding: 0;
    height: clamp(340px, 30vw, 440px);
    perspective: 1600px;
    perspective-origin: 50% 50%;
  }
  .products-carousel__viewport::-webkit-scrollbar{ display: none; }

  .pcard{
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(300px, 26vw, 400px);
    scroll-snap-align: unset;
    will-change: transform, opacity;
    transition: none; /* transform driven per-frame by JS, not CSS */
  }
  .pcard:hover{ transform: none; box-shadow: var(--shadow-glass); border-color: var(--glass-border); }

  .products__controls{ display: none; }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce){
  /* Skip the scroll-jack entirely — fall back to the plain static grid the
     pin JS never engages with (see products-showcase.js reduceMotion guard),
     so just make sure the cards are readable stacked in normal flow. */
  .products__scrollwrap{ height: auto; }
  .products__pin{ position: static; height: auto; }
  .products-carousel__viewport{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    height: auto;
    overflow: visible;
  }
  .pcard{ position: relative; inset: auto; margin: 0; opacity: 1 !important; transform: none !important; }
}