/* BRRY berry presentation, progressive enhancement and accessible motion. */
.reference-scroll-stage{position:relative;background:#000}
.reference-scroll-stage.has-scroll-turn{height:calc(var(--reference-hero-height,0px) + var(--reference-scroll-span,0px))}
.reference-scroll-stage.has-scroll-turn>.hero{position:sticky;top:var(--reference-sticky-top,0px)}
.hero{background:#000}.hero .hero-environment{display:none}.site-header{background:#000}
.reference-art{isolation:auto;aspect-ratio:1;width:44vw;max-width:680px;right:3%;top:50%}
.reference-depth{position:absolute;inset:0;transform:none}
.reference-window{position:absolute;inset:0;overflow:hidden;pointer-events:none;clip-path:ellipse(49% 49% at 50% 50%);mask-image:linear-gradient(to bottom,transparent 6%,#000 12%,#000 89%,transparent 98%)}
.reference-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:1;transition:opacity .18s linear}
.reference-window iframe{opacity:0;transition:opacity .18s linear;position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;pointer-events:none}
.reference-art.is-ready .reference-window iframe{opacity:1}
/* Keep the still opaque beneath the fading canvas to avoid a brightness dip. */
.reference-input{position:absolute;inset:13% 14% 18%;z-index:5;border:0;border-radius:48%;background:transparent;pointer-events:auto;touch-action:pan-y pinch-zoom;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.reference-input:focus-visible{outline:none;box-shadow:none}
.reference-art .reference-input:focus-visible~.reference-hint{color:#ff8dab;text-decoration:underline;text-underline-offset:5px}
.reference-art.is-dragging .reference-input{cursor:grabbing}.reference-art.is-paused .reference-input{cursor:default}
.reference-hint{position:absolute;bottom:5%;left:0;width:100%;text-align:center;font-size:11px;line-height:1.5;letter-spacing:.02em;color:#8f8794;pointer-events:none;z-index:6;opacity:0;transition:color .2s,opacity .18s linear}
.reference-art.is-ready .reference-hint{opacity:1}
.reference-art:hover .reference-hint,.reference-art:focus-within .reference-hint{color:#c9becd}
.reference-art:not(.is-ready) .reference-input{cursor:default}
.reference-art.has-scene-error .reference-input{cursor:default}
.reference-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-copy{translate:none}
.reference-art [hidden]{display:none!important}
@media(max-width:700px){.reference-art{width:110%;max-width:520px;right:auto;top:auto;margin-bottom:23px}.reference-window{inset:-3%}.reference-input{inset:10% 13% 17%}.reference-hint{bottom:2%;font-size:10px}}
@media(prefers-reduced-motion:reduce){.reference-scroll-stage.has-scroll-turn{height:auto}.reference-scroll-stage.has-scroll-turn>.hero{position:relative;top:auto}.reference-depth{transform:none}.hero-copy{translate:none}.reference-hint{transition:none}}
.motion-off .reference-depth{transform:none}.motion-off .hero-copy{translate:none}

.motion-off .reference-scroll-stage.has-scroll-turn{height:auto}.motion-off .reference-scroll-stage.has-scroll-turn>.hero{position:relative;top:auto}

@media(prefers-reduced-motion:reduce){.reference-window iframe,.reference-poster,.reference-hint{transition:none}}
.motion-off .reference-window iframe,.motion-off .reference-poster,.motion-off .reference-hint{transition:none}

/* Match the live site cursor drift without requiring WebGL. */
.reference-art.is-fallback .reference-depth{transform-origin:50% 50%}
.reference-art.is-fallback .reference-input,.reference-art.is-fallback .reference-hint{display:none}
@media(prefers-reduced-motion:reduce){.reference-art.is-fallback .reference-depth{transform:none!important;transition:none}}
.motion-off .reference-art.is-fallback .reference-depth{transform:none!important;transition:none}