/* JOY'S BOX V56 — sticky journey fix + cinematic capability image dissolve */

/* --------------------------------------------------------------------------
   THE WORK BEHIND THE EXPERIENCE
   Replace the V55 water-drop with a compositor-friendly cinematic dissolve.
   No circular mask, no ripple ring: just depth, crossfade and a soft light pass.
   -------------------------------------------------------------------------- */
@media (min-width:901px){
  .cap-v52__image{
    clip-path:none!important;
    overflow:hidden!important;
    filter:none!important;
    transition:none!important;
    transform:translate3d(0,0,0)!important;
    will-change:opacity,transform;
  }

  .cap-v52__image::before,
  .cap-v52__image::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
  }

  /* Warm film veil — passes once as the next image settles. */
  .cap-v52__image::before{
    z-index:5;
    width:44%;
    height:auto;
    aspect-ratio:auto;
    left:-52%;
    right:auto;
    top:0;
    bottom:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:linear-gradient(100deg,
      transparent 0%,
      rgba(255,239,198,.025) 20%,
      rgba(255,229,164,.13) 49%,
      rgba(91,173,163,.055) 69%,
      transparent 100%);
    mix-blend-mode:screen;
    transform:skewX(-8deg) translate3d(0,0,0);
  }

  /* A tiny soft exposure lift, not a visible graphic effect. */
  .cap-v52__image::after{
    z-index:4;
    background:linear-gradient(180deg,rgba(255,245,218,.055),transparent 30%,rgba(0,0,0,.04));
  }

  .cap-v52__image.v54-enter-forward,
  .cap-v52__image.v54-enter-back{
    animation:capV56DissolveIn .82s cubic-bezier(.16,1,.3,1) both!important;
    z-index:3!important;
  }
  .cap-v52__image.v54-leave-forward,
  .cap-v52__image.v54-leave-back{
    animation:capV56DissolveOut .56s cubic-bezier(.4,0,.2,1) both!important;
    z-index:2!important;
  }
  .cap-v52__image.v54-enter-forward::before,
  .cap-v52__image.v54-enter-back::before{
    animation:capV56LightPass .88s cubic-bezier(.18,.75,.2,1) both!important;
  }
  .cap-v52__image.v54-enter-forward::after,
  .cap-v52__image.v54-enter-back::after{
    animation:capV56Exposure .72s ease-out both!important;
  }

  .cap-v52__image img{
    transform:translate3d(0,0,0) scale(1.022)!important;
    filter:saturate(.82) contrast(1.04) brightness(.86)!important;
    transition:none!important;
    will-change:transform;
  }
  .cap-v52__image.is-active img{
    animation:capV56ImageEase .95s cubic-bezier(.16,1,.3,1) both!important;
  }
}

@keyframes capV56DissolveIn{
  0%{opacity:0;transform:translate3d(0,10px,0) scale(1.012)!important}
  38%{opacity:.72}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)!important}
}
@keyframes capV56DissolveOut{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)!important}
  100%{opacity:0;transform:translate3d(0,-5px,0) scale(.997)!important}
}
@keyframes capV56ImageEase{
  0%{transform:translate3d(0,0,0) scale(1.022)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes capV56LightPass{
  0%{opacity:0;transform:skewX(-8deg) translate3d(0,0,0)}
  18%{opacity:.9}
  76%{opacity:.34}
  100%{opacity:0;transform:skewX(-8deg) translate3d(360%,0,0)}
}
@keyframes capV56Exposure{
  0%{opacity:0}
  24%{opacity:.7}
  100%{opacity:0}
}

/* --------------------------------------------------------------------------
   PLAN THE EVENT FROM THE AUDIENCE'S POINT OF VIEW
   V55 made the section itself overflow:hidden. That establishes a clipping /
   scrolling ancestor and breaks the sticky stage, producing the large black
   gap seen in the recording. The section must remain overflow-visible; clip
   only the visual stage itself.
   -------------------------------------------------------------------------- */
.journey-v54{
  overflow:visible!important;
  contain:none!important;
}
.journey-v54__scroll{
  position:relative!important;
  overflow:visible!important;
}
.journey-v54__sticky{
  position:sticky!important;
  top:0!important;
  overflow:clip!important;
  isolation:isolate;
}
.journey-v54__stage{
  overflow:hidden!important;
}

/* Keep the illuminated traveler visually locked to the line without a giant
   bloom that looks detached from the route. */
.journey-v55__traveler-glow{
  fill:rgba(225,187,83,.12)!important;
  stroke:rgba(225,187,83,.10)!important;
  stroke-width:1.4!important;
  opacity:.72!important;
}
.journey-v54__traveler-halo{
  opacity:.92!important;
}

@media (max-width:900px){
  /* Same sticky fix on mobile. The sticky viewport owns the crop, not the
     entire long section, so there is no dead black tail while scrolling. */
  .journey-v54{
    overflow:visible!important;
  }
  .journey-v54__scroll{
    height:440svh!important;
    min-height:2720px!important;
    overflow:visible!important;
  }
  .journey-v54__sticky{
    position:sticky!important;
    top:0!important;
    height:100svh!important;
    min-height:620px!important;
    overflow:hidden!important;
  }
  .journey-v54__stage{
    height:calc(100svh - 54px)!important;
    min-height:566px!important;
  }
  .journey-v54__svg{
    top:0!important;
    width:134vw!important;
    height:64%!important;
  }
  .journey-v54__copy-stage{
    bottom:46px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .cap-v52__image.v54-enter-forward,
  .cap-v52__image.v54-enter-back,
  .cap-v52__image.v54-leave-forward,
  .cap-v52__image.v54-leave-back,
  .cap-v52__image.is-active img,
  .cap-v52__image::before,
  .cap-v52__image::after{animation:none!important}
}