/* Lightweight beer motion: transform/opacity, with no canvas or animation library. */
.hero-fizz{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;opacity:0;transition:opacity .6s}
.beer-motion .hero-fizz{opacity:1}
.fizz-bubble{position:absolute;left:var(--x);bottom:6%;width:var(--size);height:var(--size);border:1px solid #eeb76488;border-radius:50%;background:#eeb76416;opacity:0;animation:fizz-rise var(--duration) var(--delay) linear infinite;animation-play-state:paused}
.hero.is-in-view .fizz-bubble{animation-play-state:running}
.hero-seal{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover){.beer-motion .hero-seal:hover{transform:rotate(-9deg) scale(1.04)}}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 0;background:transparent;border:0;color:inherit;font-size:10px;letter-spacing:.015em}
.motion-toggle:hover{color:var(--copper)}
.motion-status{display:block;width:11px;height:11px;border-inline:3px solid currentColor;opacity:.8}
.motion-toggle[data-paused=true] .motion-status{border:0;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.motion-toggle:disabled{opacity:.6;cursor:default}
.footer-bottom{align-items:center}.footer-bottom .motion-toggle{min-height:30px;font-size:9px}

.pour-card{position:absolute;left:24px;bottom:24px;width:156px;padding:14px 12px 9px;border:1px solid #f1dab143;background:#21180ed6;backdrop-filter:blur(8px);color:#f0dfbe;--pour-color:#cf8b26}
.pour-caption{display:block;text-align:center;font-size:7px;letter-spacing:.15em;line-height:1.6}
.pour-glass{display:block;width:112px;height:134px;overflow:visible;margin:3px auto 0}
.pour-stop{stop-color:var(--pour-color);transition:stop-color .6s}
.tap-outline,.glass-outline{fill:none;stroke:#e8e0d0;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.glass-outline{stroke-width:1.5}.tap-outline{stroke:#d4b486}
.glass-shine{fill:none;stroke:#fff8dd75;stroke-width:2;stroke-linecap:round}
.pour-foam{fill:#f2e8cf}.pour-stream{fill:var(--pour-color);opacity:0;transform-origin:75px 34px}
.glass-bubbles circle{fill:#fff1b8;opacity:0;animation:glass-fizz 3.2s linear infinite;animation-play-state:paused}
.glass-bubbles circle:nth-child(2){animation-delay:-1.4s;animation-duration:3.6s}.glass-bubbles circle:nth-child(3){animation-delay:-.8s;animation-duration:2.9s}.glass-bubbles circle:nth-child(4){animation-delay:-2.1s;animation-duration:4s}.glass-bubbles circle:nth-child(5){animation-delay:-.3s;animation-duration:3.5s}.glass-bubbles circle:nth-child(6){animation-delay:-2.7s;animation-duration:3.8s}
.beer-motion .beer-visual.is-in-view .glass-bubbles circle{animation-play-state:running}
.pour-replay{display:flex;align-items:center;justify-content:center;gap:11px;background:none;color:inherit;font-size:10px;padding:4px 8px;margin:0 auto;min-height:36px;width:100%}
.pour-replay span{font-size:17px;line-height:1}.pour-replay:hover{color:#ffd187}
.beer-motion .is-pouring .pour-liquid{animation:glass-fill 2.3s cubic-bezier(.2,.5,.3,1) both}
.beer-motion .is-pouring .pour-stream{animation:tap-pour 2.3s linear both}
.beer-motion .is-pouring .pour-glass{animation:glass-settle 2.6s ease-out both;transform-origin:50% 90%}
.beer-motion .is-pouring .glass-bubbles{animation:bubbles-arrive 2.3s both}
.beer-panel{animation:none}
.beer-motion .beer-panel:not([hidden]) .beer-character{animation:character-cheers .75s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 80%}
.beer-motion .beer-panel:not([hidden]) h3{animation:beer-detail-in .48s .06s both}
.beer-motion .beer-panel:not([hidden]) .beer-description{animation:beer-detail-in .48s .12s both}
.beer-motion .beer-panel:not([hidden]) .tasting-notes{animation:beer-detail-in .48s .18s both}
.beer-motion .beer-panel:not([hidden]) .beer-prices{animation:beer-detail-in .48s .24s both}
.alchemy-elements{position:relative;isolation:isolate}
.alchemy-elements::before{content:'';position:absolute;top:31px;left:7%;right:7%;height:1px;background:#e8e0d02e;z-index:-1;transform-origin:left}
.alchemy-elements img{background:var(--olive);padding-inline:5px;box-sizing:content-box}
.alchemy-elements>div:nth-child(1){--step:0}.alchemy-elements>div:nth-child(2){--step:1}.alchemy-elements>div:nth-child(3){--step:2}.alchemy-elements>div:nth-child(4){--step:3}.alchemy-elements>div:nth-child(5){--step:4}
.beer-motion .alchemy.brew-visible .alchemy-elements::before{animation:brew-connect 2s .15s both}
.beer-motion .alchemy.brew-visible .alchemy-elements>div{animation:brew-element 1s calc(var(--step)*.27s) both}
.beer-motion .alchemy.brew-visible .alchemy-elements img{animation:element-glow 1.4s calc(var(--step)*.27s) both}
@media(hover:hover){.beer-motion .alchemy-elements>div:hover img{transform:translateY(-5px);transition:transform .35s}.pour-replay:hover span{transform:rotate(-30deg);transition:transform .3s}}

@keyframes fizz-rise{0%{opacity:0;transform:translate3d(0,0,0) scale(.75)}12%{opacity:.4}75%{opacity:.24}100%{opacity:0;transform:translate3d(var(--drift),-63vh,0) scale(1.25)}}
@keyframes glass-fill{0%,9%{transform:translateY(94px)}78%,100%{transform:translateY(0)}}
@keyframes tap-pour{0%,3%{opacity:0;transform:scaleY(1)}8%{opacity:1;transform:scaleY(1)}78%{opacity:1;transform:scaleY(.28)}86%,100%{opacity:0;transform:scaleY(.28)}}
@keyframes glass-settle{0%,80%{transform:rotate(0)}87%{transform:rotate(-3deg)}94%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}
@keyframes glass-fizz{0%{opacity:0;transform:translateY(0)}18%{opacity:.8}80%{opacity:.45}100%{opacity:0;transform:translateY(-67px)}}
@keyframes bubbles-arrive{0%,65%{opacity:0}100%{opacity:1}}
@keyframes character-cheers{0%{opacity:0;transform:translateY(12px) rotate(-12deg) scale(.86)}55%{opacity:1;transform:translateY(-5px) rotate(5deg) scale(1.05)}100%{opacity:1;transform:none}}
@keyframes beer-detail-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes brew-connect{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes brew-element{0%{opacity:.3;transform:translateY(9px)}70%{opacity:1;transform:translateY(-4px)}100%{opacity:1;transform:none}}
@keyframes element-glow{0%,100%{filter:none}45%{filter:drop-shadow(0 0 9px #f0d19755)}}
@media(max-width:600px){.hero-bottom .scroll-link{display:none}.hero-bottom{padding-top:11px}.motion-toggle{font-size:9px;gap:6px}.pour-card{left:16px;bottom:16px;width:129px;padding:10px 9px 5px}.pour-glass{width:91px;height:109px}.pour-caption{font-size:6px}.pour-replay{font-size:9px;min-height:32px;gap:8px}.pour-replay span{font-size:15px}.alchemy-elements::before{top:24px}.alchemy-elements img{padding-inline:3px}.footer-bottom .motion-toggle{margin:8px 0 0}.hero-fizz .fizz-bubble:nth-child(n+9){display:none}}
/* One control pauses existing entrance effects as well as the new beer animations. */
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}
.motion-paused{scroll-behavior:auto}.motion-paused .reveal{opacity:1!important;transform:none!important}.motion-paused .hero-fizz{opacity:0}.motion-paused .glass-bubbles circle{opacity:0}.motion-paused .pour-liquid{transform:none}.motion-paused .pour-stream{opacity:0}.motion-paused .pour-replay{display:none}
@media(prefers-reduced-motion:reduce){.hero-fizz,.pour-replay{display:none}.pour-liquid{transform:none}.pour-stream,.glass-bubbles circle{opacity:0}.alchemy-elements::before{transform:none}.beer-character{transform:none}}

.page-hidden *,.page-hidden *::before,.page-hidden *::after{animation-play-state:paused!important}
