:root{--stout:#1a1208;--amber:#f5a623;--gold:#ffcc4d;--foam:#fff8e7;--hop:#7cb342}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at top,#3a2410 0%,var(--stout) 55%) fixed;color:var(--foam);font-family:'Bricolage Grotesque',sans-serif;overflow-x:hidden}
.mono{font-family:'JetBrains Mono',monospace}
#bubbles{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5}
#root{position:relative;z-index:1}
.glass{background:rgba(255,248,231,.04);backdrop-filter:blur(10px);border:1px solid rgba(245,166,35,.18)}
.card{transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-6px);border-color:var(--amber);box-shadow:0 10px 40px -10px rgba(245,166,35,.5)}
.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.marquee{display:flex;gap:4rem;animation:mq 25s linear infinite;width:max-content}
@keyframes mq{to{transform:translateX(-50%)}}
.beer-fill{animation:fill 2.4s cubic-bezier(.4,0,.2,1) forwards;transform:translateY(100%)}
@keyframes fill{to{transform:translateY(0)}}
.foam{animation:foam 2.4s ease forwards;opacity:0}
@keyframes foam{80%{opacity:0}100%{opacity:1}}
.bub{position:absolute;bottom:0;width:6px;height:6px;border-radius:50%;background:rgba(255,248,231,.6);animation:rise 3s infinite ease-in}
@keyframes rise{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-240px);opacity:0}}
.caret::after{content:'▋';animation:blink 1s steps(1) infinite;color:var(--amber)}
@keyframes blink{50%{opacity:0}}
.confetti{position:fixed;top:-40px;font-size:28px;animation:drop linear forwards;z-index:100;pointer-events:none}
@keyframes drop{to{transform:translateY(110vh) rotate(720deg)}}
.pour{position:fixed;inset:0;z-index:90;pointer-events:none;background:linear-gradient(to top,#d98b0f,#f5a623 85%,var(--foam) 85%);animation:pour 2.6s ease forwards}
@keyframes pour{0%{transform:translateY(100%)}40%,60%{transform:translateY(0)}100%{transform:translateY(-100%)}}
input[type=range]{accent-color:var(--amber)}
.seg:hover{transform:scaleY(1.4)}