html.hb-lock{overflow:hidden}
html.hb-skip #hb-pre{display:none!important}
#hb-pre{--cream:#f6e7b4;--gold:#f7b500;--bh:min(46vh,430px);--w:calc(var(--bh)*.4218);
 position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:hidden;font-family:Poppins,system-ui,sans-serif;
 background:rgba(8,30,17,.9);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);cursor:pointer;
 transition:opacity .9s ease,backdrop-filter .9s ease,-webkit-backdrop-filter .9s ease,transform .9s ease,visibility 0s .9s}
#hb-pre *{box-sizing:border-box;margin:0}
#hb-pre::before,#hb-pre::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
#hb-pre::before{width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;background:#2a7a3c}
#hb-pre::after{width:40vmax;height:40vmax;right:-12vmax;bottom:-14vmax;background:#7a5a08}
#hb-pre.done{opacity:0;visibility:hidden;transform:scale(1.04);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);pointer-events:none}
.hb-stack{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3vh,28px)}
.hb-bottle{position:relative;width:var(--w);opacity:0;transform:translateY(40px) scale(.94)}
.hb-bottle img{display:block;width:100%;height:auto;max-width:none}
.hb-body{margin-top:calc(var(--w)*109/434);filter:drop-shadow(0 28px 34px rgba(0,0,0,.5))}
.hb-cap{position:absolute;left:0;top:0;z-index:3;transform-origin:20% 100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.hb-mouth{position:absolute;left:50%;top:calc(var(--w)*100/434);width:0;height:0;z-index:2}
.hb-glow{position:absolute;left:-26vmin;top:-26vmin;width:52vmin;height:52vmin;border-radius:50%;background:radial-gradient(circle,rgba(247,181,0,.55),rgba(247,181,0,0) 65%);opacity:0}
.hb-p{position:absolute;left:0;top:0;width:var(--s);height:var(--s);opacity:0;filter:blur(var(--b,0px));color:var(--c)}
.hb-p svg{width:100%;height:100%;overflow:visible}
.hb-word{display:flex;position:relative;z-index:3;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:clamp(34px,6.5vw,60px);letter-spacing:.08em;line-height:1;
 background:linear-gradient(180deg,#fff6d2,#f2b705);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.hb-word span{opacity:0;display:inline-block}
.hb-tag{position:relative;z-index:3;font-size:14px;letter-spacing:.04em;color:var(--cream);opacity:0}
#hb-pre.play .hb-bottle{animation:hb-rise 1.5s cubic-bezier(.25,.6,.2,1) .1s both}
#hb-pre.play .hb-cap{animation:hb-uncap 2.2s cubic-bezier(.45,.05,.25,1) 1.7s both}
#hb-pre.play .hb-glow{animation:hb-glow 3.6s ease-out 2.1s both}
#hb-pre.play .hb-p{animation:hb-herb var(--d) cubic-bezier(.3,.6,.3,1) var(--t) both}
#hb-pre.play .hb-word span{animation:hb-letter .9s cubic-bezier(.2,.8,.2,1) calc(3.6s + var(--i)*.09s) both}
#hb-pre.play .hb-tag{animation:hb-letter 1s ease 4.4s both}
@keyframes hb-rise{to{opacity:1;transform:none}}
@keyframes hb-uncap{0%{transform:none}30%{transform:translateY(-22%) rotate(-3deg)}70%{transform:translate(70%,-60%) rotate(22deg);opacity:1}100%{transform:translate(150%,30%) rotate(48deg);opacity:0}}
@keyframes hb-glow{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@keyframes hb-herb{0%{opacity:0;transform:translate(-50%,0) scale(.2) rotate(0)}12%{opacity:1}
55%{transform:translate(calc(-50% + var(--x)),var(--y)) scale(1) rotate(var(--r))}
100%{opacity:0;transform:translate(calc(-50% + var(--x)*1.2),calc(var(--y) + 18vh)) scale(.9) rotate(calc(var(--r)*1.7))}}
@keyframes hb-letter{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){#hb-pre.play .hb-cap,#hb-pre.play .hb-glow,#hb-pre.play .hb-p{animation:none}#hb-pre.play .hb-p,#hb-pre.play .hb-glow{opacity:0}#hb-pre.play .hb-bottle,#hb-pre.play .hb-word span,#hb-pre.play .hb-tag{animation:hb-rise .4s both}}
