.ball-flight{position:fixed;left:0;top:0;width:256px;height:256px;z-index:4;pointer-events:none;transform-origin:center;will-change:transform;contain:layout style;overflow:clip}
.ball-flight[hidden]{display:none}
.ball-flight[data-phase="landed"]{position:absolute;will-change:auto}
.ball-flight img{width:100%;height:100%;object-fit:contain;max-width:none;filter:drop-shadow(1px 2px 2px #172d2514)}
#experience-title{position:relative}
#experience-title .ball-arrival{position:absolute;right:-3%;bottom:90px;width:1px;height:1px;pointer-events:none}
.ball-dock{position:absolute;left:0;top:0;width:1px;height:1px}
.ball-shadow{position:absolute;left:-44px;top:77px;width:88px;height:8px;background:radial-gradient(ellipse,#59432245,transparent 70%);border-radius:50%;opacity:var(--landing-shadow,0);transform:scale(var(--shadow-scale,1))}
body:not(.scroll-ready) .ball-arrival{display:none}
@media(max-width:999px){#experience-title .ball-arrival{right:20%;bottom:65px}.ball-shadow{left:-30px;top:55px;width:60px;height:6px}}
@media(prefers-reduced-motion:reduce){.ball-flight,.ball-arrival{display:none}#experience-title{transform:none}}

/* The bottom third of the actual court frame carries its sand into the next section. */
.experience{isolation:isolate}
.sand-continuation{position:absolute;inset:0 0 auto;height:var(--sand-height,470px);z-index:-1;pointer-events:none;background-image:linear-gradient(#f3ebdc85,#f3ebdcaa),url('../v6/assets/frame-12-wide.webp');background-size:100% 100%,150% auto;background-position:center,center bottom;background-repeat:no-repeat;mask-image:linear-gradient(to bottom,#000 0%,#000 50%,#000d 65%,#0006 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,#000d 65%,#0006 82%,transparent 100%)}
@media(max-width:999px){.sand-continuation{background-image:linear-gradient(#f3ebdc85,#f3ebdcaa),url('../v6/assets/frame-12.webp');background-size:100% 100%,auto 650%;background-position:center,center 84%}}
@media(max-width:760px){.sand-continuation{height:var(--sand-height,410px)}}

/* Mobile pairs the resting ball with copy already placed in its final column. */
@media(max-width:760px){
 .experience .section-intro{position:relative}
 .scroll-ready #experience-title{position:static}
 .scroll-ready #experience-title .ball-arrival{left:54px;right:auto;top:var(--mobile-ball-y,360px);bottom:auto}
 .scroll-ready .experience .mobile-copy{margin-left:124px;width:calc(100% - 124px);min-height:120px;display:flex;align-items:center;padding-left:14px;mask-image:linear-gradient(100deg,#000 calc(var(--copy-reveal,1) * 140% - 40%),transparent calc(var(--copy-reveal,1) * 140%));-webkit-mask-image:linear-gradient(100deg,#000 calc(var(--copy-reveal,1) * 140% - 40%),transparent calc(var(--copy-reveal,1) * 140%));opacity:calc(.35 + var(--copy-reveal,1) * .65)}
}