/* BOOOM! in Montserrat Black (SIL Open Font License, booom-font-OFL.txt), cut down to the letters B, O, M and ! */
@font-face{font-family:'Gumball Booom';src:url(/assets/hero/booom.woff2) format('woff2');font-weight:900;font-display:block}
/* The homepage hero: the live Gumball and the BOOOM! picture around it.
   Laid out on the 1098 x 720 grid of the old hero video, so everything keeps
   its place at any width. --flash (0 to 1) is set by hero.js on each frame. */
/* The hero is a picture: clicks go through it (BOOOM! reaches up over the menu). */
.gb-hero{pointer-events:none;position:relative;width:100%;max-width:1082px;margin:0 auto;aspect-ratio:1098/720;container-type:inline-size;font-family:'Lato',Helvetica,Arial,sans-serif;--flash:1}
.gb-hero svg.gb-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gb-bursts line{animation:gb-spark .4s ease-in-out infinite alternate}
@keyframes gb-spark{from{transform:translate(calc(var(--x) * -.4),calc(var(--y) * -.4))}to{transform:translate(var(--x),var(--y))}}
.gb-march{animation:gb-march .7s linear infinite}
@keyframes gb-march{from{stroke-dashoffset:19}to{stroke-dashoffset:0}}
.gb-stage{position:absolute;left:30%;top:13%;width:40%;height:62%}
.gb-stage canvas,.gb-stage .gb-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
/* A soft light behind the beacon: always on a little, brightest on each flash. */
.gb-halo{position:absolute;left:-45%;right:-45%;top:-30%;bottom:-12%;pointer-events:none;
  background:radial-gradient(closest-side at 50% 46%,rgba(255,60,30,.55),rgba(255,70,40,.42) 18%,rgba(255,85,55,.27) 38%,rgba(255,100,70,.14) 58%,rgba(255,115,85,.05) 78%,rgba(255,120,90,0) 100%);
  filter:blur(1.5cqw);opacity:calc(.3 + .7 * var(--glow,1));transform:scale(calc(.9 + .12 * var(--glow,1)))}
.gb-stage .gb-poster{object-fit:contain;transition:opacity .4s}
.gb-stage canvas{opacity:0;transition:opacity .4s}
.gb-stage.is-live canvas{opacity:1}
.gb-stage.is-live .gb-poster{opacity:0}
.gb-cap{position:absolute;margin:0;padding:0;text-align:left;color:#333;font-size:1.95cqw;line-height:1.35;font-weight:400}
.gb-cap-left{left:11%;top:45%;width:17.5%}
.gb-cap-right{left:72.6%;top:38.6%;width:20%}
.gb-logos{position:absolute;left:5%;right:5%;top:73.8%;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.gb-logos li{width:11.2cqw;height:11.2cqw;background:#fff;border-radius:1.6cqw;box-shadow:0 .4cqw 2cqw rgba(30,20,60,.08);display:grid;place-items:center;padding:0;margin:0}
.gb-logos img{width:62%;height:62%;object-fit:contain}
@media (prefers-reduced-motion:reduce){.gb-bursts line,.gb-march{animation:none}}
.gb-sweep{opacity:calc(var(--glow,0) * .9)}