.bbk-bonus-hero .bbk-bonus-phone{position:relative;height:526px;isolation:isolate}
.bbk-bonus-hero .bbk-bonus-phone canvas{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;z-index:1}
.bbk-bonus-hero .bbk-phone-ready canvas{visibility:visible}
.bbk-bonus-hero .bbk-phone-ready img{visibility:hidden}
.bbk-phone-shadow{display:none;position:absolute;left:25%;bottom:2%;width:50%;height:5%;background:#39112c66;filter:blur(16px);border-radius:50%;pointer-events:none}
.bbk-phone-ready .bbk-phone-shadow{display:block}
.bbk-bonus-hero .bbk-phone-pause{position:absolute;right:-12px;bottom:-12px;z-index:2;border:1px solid #ffffff66;border-radius:50%;width:40px;height:40px;padding:0;background:#8c286866;color:#fff;font:16px/1 sans-serif;cursor:pointer}
.bbk-bonus-hero .bbk-phone-pause:focus-visible{outline:3px solid white;outline-offset:3px}
.bbk-phone-pause[hidden]{display:none}
@media(max-width:1000px) and (min-width:701px){.bbk-bonus-hero .bbk-bonus-phone{height:451px}}
@media(max-width:700px){.bbk-bonus-hero .bbk-bonus-phone{height:376px}}

/* Soft moving color fields stay entirely behind the original phone. */
.bbk-bonus-hero .bbk-bonus-art.bbk-gradient-ready{position:relative;overflow:hidden;isolation:isolate}
.bbk-bonus-hero .bbk-gradient-ready::before{content:"";position:absolute;inset:-40%;width:180%;height:180%;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 28% 32%,#ed92bf99 0%,transparent 48%),radial-gradient(ellipse at 76% 70%,#69257280 0%,transparent 48%),radial-gradient(ellipse at 65% 20%,#d6479266 0%,transparent 45%);transform:translate(var(--bbk-drift-x,0%),var(--bbk-drift-y,0%)) rotate(var(--bbk-drift-rotate,0deg));will-change:transform}
@media(prefers-reduced-motion:reduce){.bbk-bonus-hero .bbk-gradient-ready::before{display:none}}