.bean-hero{isolation:isolate;--approach:64px;width:100%;height:100%;position:relative}.bean-hero-canvas{pointer-events:none;position:absolute;inset:0}.bean-hero-can{z-index:2;object-fit:contain;filter:none;width:100%;height:100%;display:block;position:relative}.bean-layer{inset:calc(var(--approach) * -1) 0 0;pointer-events:none;z-index:1;position:absolute;overflow:hidden}.bean-layer-front{z-index:3}.bean-particle{left:var(--sx);top:var(--sy);width:var(--bean-size);height:var(--bean-size);transform:translate(-50%,-50%) rotate(var(--bean-turn));position:absolute}.bean-hero[data-motion=running] .bean-particle,.bean-hero[data-motion=paused] .bean-particle{opacity:0;will-change:transform,opacity;top:0;left:0}.bean-particle img{object-fit:contain;width:100%;height:100%;display:block}.bean-hero-error{color:var(--cream);place-items:center;display:grid;position:absolute;inset:0}@media(max-width:767px){.bean-hero{--approach:48px}.bean-layer-back .bean-particle:nth-child(n+10),.bean-layer-front .bean-particle:nth-child(n+4){display:none}.bean-particle{width:calc(var(--bean-size) * .7);height:calc(var(--bean-size) * .7)}}