/* JOY'S BOX V53 — scroll-follow capabilities + true mobile client marquee */

@media (min-width:901px){
  .cap-v52{
    --cap-follow-y:0px;
    align-items:start!important;
  }

  /* The visual is no longer CSS-sticky. It lives in the grid and is translated
     through the chapters by the scroll controller, so it follows the selected
     capability without the sticky jump/disappearance seen in V52. */
  .cap-v52__visual{
    position:relative!important;
    top:auto!important;
    height:clamp(560px,72vh,760px)!important;
    min-height:0!important;
    transform:translate3d(0,var(--cap-follow-y),0);
    will-change:transform;
    z-index:4;
  }

  .cap-v52__frame{
    box-shadow:0 34px 100px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.025) inset!important;
  }

  .cap-v52__image{
    opacity:0!important;
    clip-path:inset(7% 0 7% 0)!important;
    transform:translate3d(0,22px,0) scale(1.045)!important;
    transition:
      opacity .52s ease,
      transform .9s cubic-bezier(.16,1,.3,1),
      clip-path .85s cubic-bezier(.16,1,.3,1)!important;
  }
  .cap-v52__image.is-active{
    opacity:1!important;
    clip-path:inset(0 0 0 0)!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }

  .cap-v52__chapter{
    min-height:54vh!important;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:clamp(48px,5vw,80px)!important;
    padding-bottom:clamp(58px,6vw,94px)!important;
  }

  .cap-v52__chapter::before{
    content:"";
    display:block;
    width:0;
    height:1px;
    margin:0 0 26px;
    background:linear-gradient(90deg,var(--gold),rgba(194,154,61,0));
    transition:width .7s cubic-bezier(.16,1,.3,1);
  }
  .cap-v52__chapter.is-active::before{width:72px}

  .cap-v52__chapter h3,
  .cap-v52__chapter p,
  .cap-v52__meta{
    transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease;
  }
  .cap-v52__chapter:not(.is-active) h3,
  .cap-v52__chapter:not(.is-active) p,
  .cap-v52__chapter:not(.is-active) .cap-v52__meta{
    transform:translate3d(0,7px,0);
  }

  .cap-v52__hud strong{
    max-width:680px!important;
  }
}

/* Mobile: keep the desktop identity-wall idea, but animate an inner motion
   wrapper so legacy mobile !important transform rules cannot freeze it. */
@media (max-width:900px){
  html.v38-mobile .client-rail-v23__track{
    display:block!important;
    width:max-content!important;
    min-width:max-content!important;
    transform:none!important;
    animation:none!important;
    overflow:visible!important;
  }

  .client-track-v53-motion{
    display:flex;
    width:max-content;
    min-width:max-content;
    gap:0;
    will-change:transform;
    backface-visibility:hidden;
    transform:translate3d(0,0,0);
  }
  .client-rail-v23--a .client-track-v53-motion{
    animation:clientV53A 31s linear infinite;
  }
  .client-rail-v23--b .client-track-v53-motion{
    animation:clientV53B 35s linear infinite;
  }

  html.v38-mobile .client-chip-v23,
  html.v38-mobile .client-chip-v23[aria-hidden="true"]{
    display:grid!important;
  }

  /* Slightly denser mobile rail = visibly moving rather than looking like a grid. */
  html.v38-mobile .client-chip-v23,
  html.v38-mobile .client-chip-v23[aria-hidden="true"]{
    width:188px!important;
    min-width:188px!important;
    max-width:188px!important;
    height:128px!important;
    min-height:128px!important;
    max-height:128px!important;
  }
  html.v38-mobile .client-chip-v23 img{
    max-width:122px!important;
    max-height:62px!important;
  }
}

@keyframes clientV53A{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@keyframes clientV53B{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}

@media (prefers-reduced-motion:reduce){
  .client-track-v53-motion{animation:none!important}
  .cap-v52__visual{transform:none!important}
}