.bubble-container{pointer-events:none;overflow:hidden}.bubble-container--hero{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}.bubble-container--viewport{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:999}.bubble{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 32%,rgba(255,255,255,.42) 0,rgba(255,255,255,.12) 40%,rgba(255,255,255,.03) 75%,rgba(255,255,255,.16) 100%);border:1px solid rgba(255,255,255,.32);box-shadow:inset -1px -1px 2px rgba(255,255,255,.12),0 0 3px rgba(255,255,255,.08);animation-timing-function:linear;animation-fill-mode:forwards;will-change:transform,opacity,bottom}.bubble::after{content:'';position:absolute;top:18%;left:20%;width:28%;height:28%;border-radius:50%;background:rgba(255,255,255,.65)}.bubble--hero{bottom:-20px;animation-name:riseHeroBubble}@keyframes riseHeroBubble{0%{bottom:-20px;opacity:0}10%{opacity:.9}85%{opacity:.9}100%{bottom:calc(100% + 25px);opacity:0}}.bubble--viewport{bottom:-25px;animation-name:riseViewportBubble}@keyframes riseViewportBubble{0%{transform:translateY(0);opacity:0}8%{opacity:.9}90%{opacity:.9}100%{transform:translateY(-110vh);opacity:0}}