/* Working style hero: clinking steins (cheers.js). The stage covers the hero, never takes clicks,
   and is hidden until the animation plays and again once it ends. */
.content-hero.has-cheers{position:relative}
.cheers{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;visibility:hidden}
.cheers.is-playing{visibility:visible}
.cheers[hidden]{display:none}
.cheers-stein{position:absolute;left:0;top:0;will-change:transform}
.cheers-stein>img{display:block;width:100%;height:100%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.18))}
.cheers-left>img{transform:scaleX(-1)}
/* A fist grips each stein's handle; its long coat sleeve runs off the screen edge. */
.cheers-hand{position:absolute;left:63.15%;top:25.71%;width:327.78%;height:65.69%}
.cheers-left .cheers-hand{left:-290.93%;transform:scaleX(-1)}
.cheers-hand img{display:block;width:100%;height:100%;filter:drop-shadow(0 14px 18px rgba(0,0,0,.16))}
.cheers-clink{position:absolute;left:0;top:0;width:clamp(150px,18vw,260px);opacity:0;will-change:transform,opacity}
.cheers-clink svg{display:block;width:100%;height:auto;overflow:visible}
@font-face{font-family:Clink;src:url('/assets/clink-bangers.woff2') format('woff2');font-display:block}
.cheers-clink text{font:400 70px/1 Clink,Impact,sans-serif;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){.cheers{display:none}}