/* Alcohol by volume. Everything scoped under .abv-*. */
.abv-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.abv-sc > svg { display: block; width: 100%; max-width: 330px; height: auto; overflow: visible; }
.abv-lb { fill: var(--dim); font: 700 14px var(--sans); text-anchor: middle; }
.abv-lb.sm { font-size: 12.5px; font-weight: 600; fill: var(--faint); }
.abv-lb.st { text-anchor: start; } .abv-lb.en { text-anchor: end; }
.abv-glass, .abv-gl { fill: rgba(255,255,255,.04); stroke: var(--line-strong); stroke-width: 2.5; stroke-linecap: round; }
.abv-gl { fill: none; }

/* still */
.abv-tube { fill: none; stroke: var(--line-strong); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.abv-cond { stroke: rgba(127,182,255,.35); stroke-width: 16; stroke-linecap: round; }
.abv-wine { fill: #8a1a38; transition: y .3s; }
.abv-burner { fill: #3a3350; stroke: var(--line-strong); stroke-width: 1.5; }
.abv-flame { opacity: 0; transform-origin: 80px 204px; transform: scaleY(.2); transition: opacity .3s, transform .4s; }
.abv-still.lit .abv-flame { opacity: 1; transform: scaleY(1); animation: abv-flick .25s ease-in-out infinite alternate; }
.abv-still.done .abv-flame { opacity: 0; }
@keyframes abv-flick { to { transform: scaleY(.86) scaleX(1.06); } }
.abv-b { fill: rgba(255,255,255,.5); opacity: 0; }
.abv-still.lit .abv-b { animation: abv-rise 1.1s ease-in infinite; }
@keyframes abv-rise { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-40px); } }
.abv-v { fill: #FCC050; opacity: .85; }
.abv-v.cold { fill: #f3e6b0; }
.abv-alc { fill: #f3e6b0; }
.abv-tick { stroke: var(--line-strong); stroke-width: 1.5; }
.abv-ml { fill: var(--gold); font-size: 16px; }
.abv-drip { fill: #f3e6b0; opacity: 0; }
.abv-drip.fall { animation: abv-drip .22s ease-in; }
@keyframes abv-drip { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(26px); } }

/* pour */
.abv-pour { touch-action: none; }
.abv-vial { fill: rgba(255,255,255,.04); stroke: var(--line-strong); stroke-width: 1.5; }
.abv-valc { fill: #f3e6b0; }
.abv-target { stroke: rgba(243,230,176,.5); stroke-width: 1.5; stroke-dasharray: 4 5; }
.abv-beer { fill: #e3a23a; }
.abv-foam { fill: #fff6e0; }
.abv-oz { fill: var(--gold); font-size: 16px; }
.abv-q { fill: var(--faint); font-size: 18px; }
.abv-hit { fill: transparent; cursor: ns-resize; }

/* legs */
.abv-lg { cursor: pointer; }
.abv-tip { transform-box: view-box; transition: transform .45s ease-in-out; }
.abv-lg[data-id="a"] .abv-tip { transform-origin: 74px 200px; }
.abv-lg[data-id="b"] .abv-tip { transform-origin: 226px 200px; }
.abv-lg.tipped .abv-tip { animation: abv-tip .9s ease-in-out; }
@keyframes abv-tip { 50% { transform: rotate(-28deg); } }
.abv-lwine.wa { fill: #f1e3a0; } .abv-lwine.wb { fill: #7a1732; }
.abv-film { opacity: 0; transition: opacity .6s; }
.abv-film { fill: none; stroke-width: 9; }
.abv-lg[data-id="a"] .abv-film { stroke: rgba(241,227,160,.35); }
.abv-lg[data-id="b"] .abv-film { stroke: rgba(176,42,76,.55); }
.abv-lg.coated .abv-film { opacity: 1; }
.abv-tear path { fill: none; stroke-width: 2.5; stroke-linecap: round; opacity: .6; }
.abv-lg[data-id="b"] .abv-tear path { stroke: #c8325a; } .abv-lg[data-id="b"] .abv-tear circle { fill: #d63a64; }
.abv-lg[data-id="a"] .abv-tear path { stroke: rgba(241,227,160,.8); } .abv-lg[data-id="a"] .abv-tear circle { fill: rgba(241,227,160,.9); }
.abv-tear { opacity: 0; animation: abv-tear 2.2s ease-in 3 both; }
.abv-lg[data-id="a"] .abv-tear { animation-iteration-count: 1; animation-duration: 3.2s; }
@keyframes abv-tear { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } }
.abv-lg.still .abv-tear { animation: none; opacity: 0; }
.abv-lg.still .abv-film { opacity: .35; }
.abv-ev { fill: #f3e6b0; opacity: 0; animation: abv-ev 1.6s ease-out 3; }
@keyframes abv-ev { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-26px); } }
.abv-lid { fill: #6e6960; stroke: var(--line-strong); stroke-width: 1.5; opacity: 0; transform: translateY(-30px); transition: opacity .3s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.abv-lg.lidded .abv-lid { opacity: 1; transform: translateY(0); }
.abv-hitg { fill: transparent; }

/* zoom on the film */
.abv-wall { fill: rgba(255,255,255,.06); stroke: var(--line-strong); stroke-width: 1.5; }
.abv-ev2 { fill: #f3e6b0; opacity: 0; animation: abv-ev 1.4s ease-out 3; }
.abv-zl { fill: var(--text); font-size: 14px; font-weight: 600; }
.abv-zl.blue { fill: #9fb8ff; }
.abv-up { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.abv-bead { fill: #b02a4c; animation: abv-bead 2.4s ease-in 3 both; }
@keyframes abv-bead { 0%, 35% { transform: translateY(0) scale(.6); } 50% { transform: translateY(0) scale(1); } 100% { transform: translateY(140px) scale(1); } }
.abv-bead { transform-box: fill-box; transform-origin: center; }

@media (max-height: 700px) {
  .abv-sc > svg { max-width: 330px; max-height: 250px; }
}