/* Original pinned, central bottle composition with scroll-driven movement. */
/* Clip decorative overflow without creating a scroll container above sticky. */
html:root,body:not(.showcase-active){overflow-x:clip}
#experience .depth-sticky{perspective:1400px}
#experience #depthBottle{width:min(48vw,760px);max-width:none;transform:translate(-50%,-50%);pointer-events:none}
#experience #depthModel{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
#experience #depthModel{opacity:0;--poster-color:transparent;--progress-bar-color:var(--g);transition:opacity .4s}
#experience #depthBottle.model-ready #depthModel{opacity:1}
#experience .depth-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px;color:var(--g);font-size:11px;letter-spacing:.12em}
#experience .depth-loading[hidden],#experience .depth-retry[hidden]{display:none}
#experience .depth-loading-ring{width:36px;height:36px;border:1px solid #d6aa5533;border-top-color:var(--g);border-radius:50%;animation:depth-loading-spin 1s linear infinite}
#experience .depth-loading.failed .depth-loading-ring{display:none}
#experience .depth-retry{pointer-events:auto;border:1px solid #d6aa5570;padding:12px 18px;min-height:44px;color:var(--g);background:transparent;font:inherit;cursor:pointer}
@keyframes depth-loading-spin{to{transform:rotate(360deg)}}
#experience .depth-copy{position:absolute;inset:0;width:100%;pointer-events:none}
#experience .depth-card{visibility:hidden;transition:opacity .5s,transform .6s,visibility .5s}
#experience .depth-card.active{visibility:visible}
#experience .display{font-family:'DM Sans',Manrope,sans-serif}
#experience .scroll-cue{white-space:nowrap}
@media(max-width:768px){
  #experience #depthBottle{width:100vw;height:var(--mobile-bottle-height,62%);top:var(--mobile-bottle-center,33%)}
  #experience .depth-card{left:24px!important;right:24px!important;top:auto!important;bottom:9%;max-width:460px;margin-inline:auto}
  #experience .depth-card h2{font-size:clamp(30px,8vw,48px);line-height:.9;margin-top:12px}
  #experience .depth-card>p:first-child{font-size:9px}
  #experience .depth-card>p:last-child{font-size:12px;line-height:1.5;margin-top:12px}
  #experience .orbit{top:var(--mobile-orbit-top,53%);width:76vw;height:76vw}
  #experience .scroll-cue{font-size:9px;letter-spacing:.15em;bottom:18px}
}
@media(max-height:500px) and (orientation:landscape){
  #experience #depthBottle{width:44vw;height:85%;top:50%;left:72%}
  #experience .depth-card{left:5%!important;right:auto!important;top:24%!important;bottom:auto;max-width:38%;margin:0}
  #experience .depth-card h2{font-size:28px;line-height:.9;margin-top:10px}
  #experience .depth-card>p:first-child{font-size:8px}
  #experience .depth-card>p:last-child{font-size:11px;line-height:1.4;margin-top:10px}
}
@media(prefers-reduced-motion:reduce){
  #experience .depth-card,#experience #depthModel{transition:none}
  #experience .depth-loading-ring{animation:none}
}