/* RB living layer (preview). Decorative only: transform/opacity animations, paused off-screen (.lc-run), static under reduced motion. */
.rb-has-lc{position:relative}
.rb-lc{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:layout paint}
.lc-o{position:absolute;width:92px;height:92px;opacity:.9}
.lc-o svg{width:100%;height:100%;overflow:visible;display:block}
.lc-tl{top:10px;left:max(8px,2vw)}.lc-tr{top:10px;right:max(8px,2vw)}.lc-bl{bottom:10px;left:max(8px,2vw)}.lc-br{bottom:10px;right:max(8px,2vw)}
@media (max-width:700px){.lc-o{width:58px;height:58px;opacity:.75}}
.lc-o *,.rb-plx *{animation-play-state:paused!important}
.lc-run .lc-o *,.rb-plx.lc-run *{animation-play-state:running!important}
.lc-o [class^="a-"],.lc-o [class*=" a-"],.rb-plx [class*="a-"]{transform-box:fill-box;transform-origin:center;will-change:transform}
@keyframes lcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes lcSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes lcRise{0%{transform:translateY(30px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(-70px);opacity:0}}
@keyframes lcFall{0%{transform:translate(0,-30px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(12px,90px) rotate(260deg);opacity:0}}
@keyframes lcTw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@keyframes lcFlick{0%,100%{transform:scale(1,1);opacity:1}30%{transform:scale(.85,1.15);opacity:.85}60%{transform:scale(1.1,.9);opacity:.95}}
@keyframes lcLid{0%,70%,100%{transform:translateY(0) rotate(0)}78%{transform:translateY(-9px) rotate(-6deg)}86%{transform:translateY(0)}92%{transform:translateY(-3px)}}
@keyframes lcFlap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.3)}}
@keyframes lcSpin{to{transform:rotate(360deg)}}
@keyframes lcToss{0%,60%,100%{transform:translateY(0) rotate(0)}75%{transform:translateY(-26px) rotate(200deg)}88%{transform:translateY(0) rotate(360deg)}}
@keyframes lcWave{0%,100%{transform:skewY(-6deg) translateY(0)}50%{transform:skewY(6deg) translateY(3px)}}
@keyframes lcPump{0%,100%{transform:scale(.55)}60%{transform:scale(1)}70%{transform:scale(1)}}
@keyframes lcPress{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes lcShine{0%,70%{transform:translateX(-60px)}100%{transform:translateX(60px)}}
@keyframes lcDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-10px)}}
.a-bob{animation:lcBob 4.5s ease-in-out infinite}
.a-sway{transform-origin:50% 0!important;animation:lcSway 5s ease-in-out infinite}
.a-swayb{transform-origin:50% 100%!important;animation:lcSway 4.2s ease-in-out infinite}
.a-rise{animation:lcRise 6s linear infinite}
.a-fall{animation:lcFall 5s linear infinite}
.a-tw{animation:lcTw 2.6s ease-in-out infinite}
.a-flick{transform-origin:50% 100%!important;animation:lcFlick .9s ease-in-out infinite}
.a-lid{animation:lcLid 4s ease-in-out infinite}
.a-flap{animation:lcFlap .5s ease-in-out infinite}
.a-spin{animation:lcSpin 14s linear infinite}
.a-toss{animation:lcToss 4s ease-in-out infinite}
.a-wave{animation:lcWave 3.4s ease-in-out infinite}
.a-pump{transform-origin:50% 100%!important;animation:lcPump 3s ease-in-out infinite}
.a-press{animation:lcPress 1.5s ease-in-out infinite}
.a-shine{animation:lcShine 3.6s ease-in-out infinite}
.a-drift{animation:lcDrift 7s ease-in-out infinite}
.d1{animation-delay:-.8s!important}.d2{animation-delay:-1.7s!important}.d3{animation-delay:-2.6s!important}.d4{animation-delay:-3.5s!important}.d5{animation-delay:-4.3s!important}
/* balloon arch inflates on scroll into view */
.lc-arch .a-inf{transform:scale(.2);opacity:.2;transition:transform .7s cubic-bezier(.3,1.6,.5,1),opacity .5s}
.lc-arch.lc-in .a-inf{transform:scale(1);opacity:1}
.lc-arch.lc-in .a-inf:nth-child(2n){transition-delay:.08s}.lc-arch.lc-in .a-inf:nth-child(3n){transition-delay:.16s}
/* tappable: poppers + hero balloons (only these take pointer events, always beneath .wrap content) */
.lc-tap{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rb-cf{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none}
.rb-cf i{position:absolute;width:7px;height:10px;border-radius:2px;background:var(--c);animation:lcBurst .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes lcBurst{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
/* hero parallax balloon layer */
.rb-plx{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.rb-plx .pl{position:absolute;will-change:transform}
.rb-plx .pb{display:block;width:var(--w,54px);pointer-events:auto;cursor:pointer;transition:transform .25s,opacity .25s}
.rb-plx .pb svg{width:100%;height:auto;overflow:visible;display:block}
.rb-plx .pb.popped{transform:scale(1.35);opacity:0;pointer-events:none}
@media (max-width:700px){.rb-plx .pb{width:calc(var(--w,54px)*.7)}.rb-plx .pl.hide-m{display:none}}
@media (prefers-reduced-motion:reduce){.rb-lc *,.rb-plx *{animation:none!important;transition:none!important}.lc-arch .a-inf{transform:none;opacity:1}.rb-cf{display:none}.lc-tap,.rb-plx .pb{pointer-events:none;cursor:default}}
@media print{.rb-lc,.rb-plx{display:none}}

/* ===== 2026-10-22 PREVIEW: Play music pill docked into the right floating column (was bottom-center, overlapped content) ===== */
.rbm-pill:not(.rbm-pill-inline){left:auto!important;right:var(--fab-right,max(12px,env(safe-area-inset-right)))!important;bottom:calc(var(--rb-col-top,300px) + var(--fab-gap,10px) + var(--fab,48px) + var(--fab-gap,10px))!important;transform:translateY(12px)!important;z-index:70!important}
.rbm-pill.on:not(.rbm-pill-inline){transform:none!important}
@media(max-width:1023px){
 .rbm-pill:not(.rbm-pill-inline){width:var(--fab,48px);height:var(--fab,48px);padding:0!important;gap:0!important;justify-content:center;font-size:0!important}
 .rbm-pill:not(.rbm-pill-inline) .rbm-pill-ic{width:100%;height:100%}
}
body.rb-chat-open .rbm-pill:not(.rbm-pill-inline){opacity:0!important;pointer-events:none!important}