/* Wine fault. Everything scoped under .wf-*. */
.wf-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wf-sc > svg { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.wf-lb { fill: var(--dim); font: 700 14px var(--sans); text-anchor: middle; }
.wf-lb.sm2 { font-size: 12.5px; font-weight: 700; }

/* pool */
.wf-deck { fill: #2a3248; }
.wf-wine { fill: #6a1430; }
.wf-must { fill: #5d6b4a; opacity: calc(var(--must, 0) * .55); transition: opacity .4s; }
.wf-pool.corked .wf-must { opacity: .8; }
.wf-lane { stroke: rgba(255,255,255,.14); stroke-width: 1.5; stroke-dasharray: 6 6; }
.wf-speck { fill: #e8f0d0; }
.wf-speck.in { fill: #b8c890; }
.wf-cnt { fill: var(--gold); font-size: 15px; }
.wf-bad { fill: #e8f0d0; font-size: 20px; opacity: 0; transition: opacity .5s; }
.wf-pool.corked .wf-bad { opacity: 1; }

/* cork */
.wf-corkb { fill: #c89a64; stroke: #8a6436; stroke-width: 2; }
.wf-pore { fill: #9a7040; opacity: .7; }
.wf-cl circle { fill: #7fd7ff; stroke: #1c5a7a; stroke-width: 1.5; transition: fill .3s; }
.wf-cl text { fill: #0c2a3a; }
.wf-cl.tca circle { fill: #b8c890; stroke: #4a5a30; }
.wf-cl.tca text { fill: #1e2610; font-size: 11px; }
.wf-cl.tca { animation: wf-pop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes wf-pop { 50% { opacity: .4; } }
.wf-moldin circle { fill: rgba(150,170,130,.55); stroke: rgba(210,225,190,.5); stroke-width: 1; }
.wf-cork.moldy .wf-moldin circle { fill: rgba(120,140,100,.3); stroke: rgba(210,225,190,.25); }
.wf-moldl { fill: #b8c890; }
.wf-cork.moldy .wf-moldl { opacity: 0; transition: opacity .3s; }

/* screw cap */
.wf-capb { fill: #3a0c1c; stroke: var(--line-strong); stroke-width: 2; }
.wf-capc { fill: #b8bcc8; } .wf-capl { stroke: #6b7080; stroke-width: 1.5; }
.wf-bar { fill: #9a6a3a; stroke: #5a3a1e; stroke-width: 2; } .wf-barh { stroke: #3a3350; stroke-width: 5; }
.wf-bm { fill: rgba(184,200,144,.6); }

/* cells */
.wf-brain { fill: rgba(255,255,255,.07); }
.wf-sig { fill: var(--gold); transform-box: fill-box; transform-origin: left; transition: transform .8s; }
.wf-cells.quiet .wf-sig { transform: scaleX(.18); }
.wf-ax { stroke: #4a4458; stroke-width: 4; stroke-linecap: round; }
.wf-spark { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 70; opacity: 0; }
.wf-cells.firing .wf-spark { opacity: 1; animation: wf-fire .7s linear infinite; }
.wf-cell:nth-child(2n) .wf-spark { animation-delay: .25s; }
@keyframes wf-fire { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 80; } }
.wf-body { fill: #c7a2ff; transition: fill .6s; }
.wf-cells.quiet .wf-body { fill: #5a5470; }
.wf-cil { stroke: #c7a2ff; stroke-width: 2; stroke-linecap: round; fill: none; }
.wf-m.f { fill: #ff5d7a; } .wf-m.t { fill: #b8c890; stroke: #4a5a30; stroke-width: 1; }

/* last glass */
.wf-case { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 340px; }
.wf-lg { width: 110px; flex: none; }
.wf-gl2 { fill: none; stroke: var(--line-strong); stroke-width: 2.5; stroke-linecap: round; }
.wf-case ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wf-case li { font: 600 15px var(--sans); color: var(--text); line-height: 1.3; }
.wf-case li b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

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