/* Two complete generated transparent keyring states, no cutout pendants. */
.hero-scroll-stage{position:relative}
.hero-scroll-stage.has-keyring-motion{height:calc(var(--hero-height,850px) + var(--hero-travel,360px))}
.has-keyring-motion>.hero{position:sticky;top:0;overflow:clip}
.hero-grid{perspective:1000px}
.hero-copy h1>.hero-phrase{color:var(--ink)}
#keyring-scene{position:relative;z-index:5;flex:none;transform-style:preserve-3d;touch-action:pan-y;user-select:none}
.keyring-poster,.keyring-layers{position:absolute;inset:0;pointer-events:none}
.keyring-poster img,.keyring-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.keyring-poster{transition:opacity .18s}
.keyring-layers{opacity:0;filter:drop-shadow(0 9px 7px #1e3c221b);transform-style:preserve-3d}
.keyring-layer{backface-visibility:hidden;pointer-events:none}
.keyring-final{z-index:2;opacity:0}.keyring-initial{z-index:1}
#keyring-scene.is-ready .keyring-layers{opacity:1}
#keyring-scene.is-ready .keyring-poster{opacity:0;visibility:hidden}
.keyring-hit{position:absolute;inset:0;width:100%;height:100%;border-radius:30%;z-index:6;cursor:grab;-webkit-tap-highlight-color:transparent}
.keyring-hit:active,.is-dragging .keyring-hit{cursor:grabbing;transform:none}
.keyring-hit:disabled{cursor:default}
.keyring-hit:focus-visible{outline:1px dashed #6f9451;outline-offset:4px}
.keyring-hint{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .18s;pointer-events:none}
#keyring-scene:hover .keyring-hint,#keyring-scene:focus-within .keyring-hint{opacity:1}
.magic-origin{position:relative;display:inline-block}
.magic-baseline{position:absolute;bottom:0;left:0;width:1px;height:1px;pointer-events:none}
.magic-particles{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.hero-copy{position:relative;z-index:3}
.pixel-divider{height:30px;width:calc(100% + var(--pad) + var(--pad));margin-left:calc(-1 * var(--pad));margin-bottom:38px}
.pixel-divider canvas{display:block;width:100%;height:100%}
@media(max-width:480px){.keyring-hint{font-size:8px;bottom:-5px}.pixel-divider{height:28px;margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){.hero-scroll-stage.has-keyring-motion{height:auto}.has-keyring-motion>.hero{position:relative}.keyring-hint{display:none}.magic-particles{display:none}}