/* The brew machine beside "Curiosity in. Useful products out." (v2: walnut espresso machine).
   Ingredient tags drop into the hopper with a few beans, each one pours a quarter of the cup, and the
   full cup slides away for the next. One timeline in brew.js drives it through the custom properties
   --fill, --flow, --stream, --steam, --cup-opacity and --cup-x. Ported from extras/experiments/design-brew-v2;
   v1 (the conveyor-belt machine) is kept in extras/archive/brew-v1. Sizes are in % and cqw of the scene. */
.brew { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1.25; justify-self: center; container-type: inline-size; }
.brew-scene { position: absolute; top: 18%; width: 100%; aspect-ratio: 1; isolation: isolate; }
.brew-machine { position: relative; z-index: 0; display: block; width: 100%; height: auto; }

/* Tags and beans fall between the machine and a clipped copy of its hopper, so they drop *into* the glass. */
.brew-flight { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.brew-hopper-front { position: absolute; inset: 0; z-index: 2; width: 100%; height: auto; clip-path: polygon(31% 9%, 73% 9%, 73% 24%, 31% 24%); pointer-events: none; }
.brew-tag { position: absolute; top: 0; left: 29%; width: 44%; padding: 2.3cqw 1.5cqw; text-align: center; font-size: max(10px, 3.2cqw); font-weight: 600; letter-spacing: -.025em; white-space: nowrap; color: #433625; background: #fffdf7; border: 1px solid #c7b28e; border-radius: 1.7cqw; box-shadow: 0 .8cqw 0 #e4d8c2, 0 1.7cqw 3.8cqw #503c2020; opacity: 0; will-change: transform, opacity; }
.brew-bean { position: absolute; top: 0; left: 50%; width: 1.9%; height: 2.8%; border-radius: 48%; background: radial-gradient(ellipse at 30% 25%, #b48051, #714326 50%, #3d2317); box-shadow: inset 1px 1px 1px #e0b58a60, 0 1px 1px #3c221e15; opacity: 0; will-change: transform, opacity; }
.brew-bean::after { content: ''; position: absolute; left: 45%; top: 10%; width: 15%; height: 80%; border-left: 1px solid #382017; border-radius: 50%; transform: rotate(13deg); }

/* The brew light and the two streams from the portafilter. */
.brew-indicator { position: absolute; z-index: 3; left: 30.4%; top: 41%; width: 2%; height: 2%; border-radius: 50%; background: #3473ff; box-shadow: 0 0 9px #3d74ff; opacity: calc(.3 + var(--flow, 0) * .7); }
.brew-drips { position: absolute; z-index: 3; left: 46.4%; top: 54%; width: 7.7%; height: 8%; }
.brew-drips i { position: absolute; top: 0; left: 0; width: 3%; height: 100%; border-radius: 1px; background: linear-gradient(90deg, #4c2916, #b6763c, #583018); transform-origin: top; transform: scaleY(var(--stream, 0)); opacity: var(--flow, 0); }
.brew-drips i + i { left: 90%; }

/* The glass cup. */
.brew-cup { position: absolute; z-index: 4; left: 40%; top: 61%; width: 21%; height: 13%; filter: drop-shadow(0 3px 2px #2b1d1630); opacity: var(--cup-opacity, 1); transform: translateX(var(--cup-x, 0px)); will-change: transform, opacity; }
.brew-handle { position: absolute; right: -22%; top: 15%; width: 38%; height: 61%; border: 1cqw solid #dddcd3; border-radius: 45%; box-shadow: inset 0 0 0 1px #fff, 1px 1px 1px #66554555; }
.brew-glass { position: absolute; inset: 0; overflow: hidden; border: 2px solid #dbd9cd; border-radius: 5% 5% 38% 38%; background: linear-gradient(100deg, #ffffffb0, #ffffff10 25%, #ffffff35 65%, #ffffffb0); box-shadow: inset 3px 0 3px #fff8, inset -3px 0 3px #74685840; }
.brew-coffee { position: absolute; bottom: 0; width: 100%; height: var(--fill, 0%); border-radius: 45% 45% 0 0 / 10% 10% 0 0; background: linear-gradient(#d4a15d 0 7%, #a96932 9%, #6a351a 22%, #382016); box-shadow: inset 0 2px 1px #efd09b80; }
.brew-coffee::after { content: ''; position: absolute; top: 0; left: 18%; width: 64%; height: 8%; border: 1px solid #e4b67580; border-radius: 50%; opacity: var(--flow, 0); animation: brew-ripple .9s infinite; }
.brew-shine { position: absolute; left: 8%; top: 8%; width: 8%; height: 77%; border-radius: 50%; background: #fff8; }
.brew-rim { position: absolute; left: 0; top: -4%; width: 100%; height: 12%; border: 2px solid #e3ded1; border-radius: 50%; box-shadow: 0 -1px 0 #fff; }
.brew-steam { position: absolute; left: 22%; top: -60%; width: 60%; height: 55%; opacity: var(--steam, 0); }
.brew-steam i { position: absolute; left: 10%; width: 20%; height: 90%; border-left: 1px solid #aaa396; border-radius: 50%; filter: blur(.6px); animation: brew-steam 2.8s infinite; }
.brew-steam i:nth-child(2) { left: 45%; animation-delay: .8s; }
.brew-steam i:nth-child(3) { left: 80%; animation-delay: 1.6s; }

/* The line engraved on the walnut front; it follows the fascia's slight tilt. */
.brew-caption { position: absolute; z-index: 5; top: 84.6%; left: 7.5%; width: 68%; margin: 0; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: 2.7cqw; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; color: #f0d9ae; text-shadow: 0 1px 1px #32190bcc; transform: rotate(2deg); pointer-events: none; }

.brew.is-paused * { animation-play-state: paused !important; }
@keyframes brew-ripple { from { transform: scaleX(.3); opacity: .8; } to { transform: scaleX(1); opacity: 0; } }
@keyframes brew-steam { 0% { opacity: 0; transform: translateY(5px); } 45% { opacity: .7; } 100% { opacity: 0; transform: translateY(-12px); } }

/* Reduced motion: a still frame, a nearly full cup under the machine (brew.js sets the values). */
@media (prefers-reduced-motion: reduce) {
  .brew-flight, .brew-steam { display: none; }
  .brew-coffee::after { animation: none; }
}