@media (max-width: 440px) { .hours { font-size: 17px; white-space: nowrap; } }
/* ---------- intro: the first pour ---------- */
.intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg); background-image: radial-gradient(rgba(58,36,16,.10) 1.5px, transparent 1.6px); background-size: 14px 14px; cursor: pointer; animation: intro-failsafe .01s linear 7s forwards; }
.intro::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: radial-gradient(circle at 14px 0, var(--bg) 11px, var(--line) 11.5px, var(--line) 14px, transparent 14.5px) 0 0 / 28px 22px repeat-x; }
.intro.out { transform: translateY(calc(-100% - 40px)); transition: transform .75s cubic-bezier(.7,0,.25,1); pointer-events: none; }
.intro.gone { display: none; }
.intro-stage { display: grid; justify-items: center; gap: 14px; padding: 16px; text-align: center; }
.intro-mug { width: min(46vw, 210px); height: auto; overflow: visible; shape-rendering: crispEdges; transform-origin: 50% 90%; animation: mug-in .45s cubic-bezier(.3,1.6,.5,1) both; }
.intro.out .intro-mug { animation: mug-cheers .5s ease-in forwards; }
.intro-mug .beer { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: pour 1.25s cubic-bezier(.45,.05,.4,1) .35s forwards; }
.intro-mug .stream { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: stream 1.45s linear .2s forwards; }
.intro-mug .foam { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(14px) scaleY(.2); opacity: 0; animation: foam-up .45s cubic-bezier(.3,1.7,.5,1) 1.45s forwards; }
.intro-mug .drip { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: drip .6s ease-out 1.85s forwards; }
.intro-mug .drip.d2 { animation-delay: 2s; }
.intro-mug .bub { opacity: 0; animation: bub 1.1s linear infinite; }
.intro-mug .bub:nth-of-type(2) { animation-delay: .8s; } .intro-mug .bub:nth-of-type(3) { animation-delay: 1.15s; } .intro-mug .bub:nth-of-type(4) { animation-delay: 1.4s; } .intro-mug .bub:nth-of-type(5) { animation-delay: 1.7s; }
.intro-word { font-family: var(--f-pixel-2); font-weight: 700; font-size: clamp(64px, 16vw, 112px); line-height: .9; color: var(--ink); display: flex; gap: .04em; text-shadow: 0 5px 0 var(--foam), 0 9px 0 var(--line); }
.intro-word span { display: inline-block; opacity: 0; transform: translateY(-40px); animation: letter .42s cubic-bezier(.3,1.8,.5,1) forwards; }
.intro-word span:nth-child(1) { animation-delay: 1.65s; } .intro-word span:nth-child(2) { animation-delay: 1.77s; } .intro-word span:nth-child(3) { animation-delay: 1.89s; }
.intro-led { font-family: var(--f-led); font-size: 22px; color: var(--ink); background: rgba(255,248,231,.6); border: 2px solid var(--line); border-radius: 6px; padding: 2px 12px; min-width: 15ch; }
.intro-led .t2 { display: none; }
.intro.poured .intro-led .t1 { display: none; }
.intro.poured .intro-led .t2 { display: inline; animation: blink 1s steps(2, jump-none) 2; }
.intro-led i { font-style: normal; animation: dots 1s steps(4, end) infinite; display: inline-block; width: 3ch; text-align: left; overflow: hidden; vertical-align: bottom; }
.intro-skip { font-family: var(--f-pixel); font-size: 10px; color: var(--muted); letter-spacing: .04em; opacity: 0; animation: fade .3s ease 1s forwards; }
@keyframes mug-in { from { transform: translateY(30px) scale(.7); opacity: 0; } }
@keyframes mug-cheers { 30% { transform: rotate(-14deg) translateY(-6px); } 100% { transform: rotate(8deg) translateY(-30px) scale(1.06); } }
@keyframes pour { to { transform: scaleY(1); } }
@keyframes stream { 12% { transform: scaleY(1); } 80% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(30px); opacity: 0; } }
@keyframes foam-up { to { transform: none; opacity: 1; } }
@keyframes drip { to { transform: scaleY(1); } }
@keyframes bub { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes letter { to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes dots { from { width: 0; } to { width: 4ch; } }
@keyframes fade { to { opacity: 1; } }
@keyframes intro-failsafe { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
.intro *, .intro *::before { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
.intro .bub { display: none; }
.intro.out { transform: none; opacity: 0; transition: opacity .3s; }
}