.coffee-invite {
  display: none; align-items: center; gap: 26px;
  color: #f4efe4; text-decoration: none;
}

/* Review-only standard-desktop finale, enabled by ?board-start-preview. */
@media (min-width: 1300px) and (min-aspect-ratio: 7/5) and (min-height: 601px) {
  html.board-start-preview .work .coffee-invite { display: flex; position: absolute; z-index: 3; visibility: hidden; }
  html.board-start-preview .work.board-complete .coffee-invite { visibility: visible; }
}

/* 240px at 900 tall: large enough to show the painting, clear of the grid and the panel edge. */
.coffee-invite .coffee-art { height: var(--coffee-art-height, 26.7svh); width: auto; overflow: visible; }
.coffee-invite .coffee-lines path {
  fill: none; stroke: #f4efe4; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85;
}
.coffee-invite .coffee-brush-stroke {
  fill: none; stroke: #fff; stroke-width: 190; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.coffee-invite.drawing .coffee-lines path { animation: coffee-draw var(--t) cubic-bezier(.5,0,.3,1) var(--d) forwards; }
.coffee-invite.drawing .coffee-brush-stroke { animation: coffee-draw 1.1s cubic-bezier(.4,0,.4,1) 1.5s forwards; }

/* The raster artwork stays intact. Only its existing liquid and stream are
   masked during the standard-desktop shot, then restored at the finish. */
.coffee-espresso-cutout, .coffee-stream-cutout { opacity: 0; }
.coffee-shot-overlay, .coffee-shot-flow, .coffee-stream-cover { display: none; }
.espresso-shot:not(.filled) .coffee-espresso-cutout { opacity: 1; }
.espresso-shot .coffee-stream-cutout { opacity: 1; }
.espresso-shot .coffee-stream-cover { display: block; }
.espresso-shot:not(.filled) .coffee-shot-overlay { display: block; }
.espresso-shot .coffee-original-stream { display: none; }
.coffee-fill { transform: translateY(62px); }
.espresso-shot.brewing .coffee-fill { animation: espresso-fill 6s linear forwards; }
.espresso-shot.brewing .coffee-shot-flow { display: block; animation: espresso-flow-envelope 6s linear forwards; }
.coffee-pour-column { transform-origin: 184px 467px; }
.espresso-shot.brewing .coffee-pour-column { animation: espresso-flow-rise 6s linear forwards; }
.coffee-flow-highlight { opacity: .4; animation: espresso-flow-motion .45s linear infinite; }
.coffee-ripple { opacity: 0; transform-origin: 184px 560px; }
.espresso-shot.brewing .coffee-ripple { animation: espresso-ripple .88s ease-out infinite; }
@keyframes espresso-fill { to { transform: translateY(16px); } }
/* Stream reaches the same surface: 622 initially, 576 when filled. */
@keyframes espresso-flow-rise { to { transform: scaleY(.7032); } }
@keyframes espresso-flow-envelope { 0% { opacity: 0; } 3%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes espresso-flow-motion { to { stroke-dashoffset: -21; } }
@keyframes espresso-ripple { from { transform: scale(.3); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }

.coffee-invite .coffee-words { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* The hidden full word reserves its width so the group stays centred while typing. */
.coffee-invite .coffee-prompt { display: grid; min-height: 52px; font-size: 52px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.coffee-invite .coffee-ghost, .coffee-invite .coffee-typing { grid-area: 1 / 1; }
.coffee-invite .coffee-ghost { visibility: hidden; padding-right: 5px; }
.coffee-invite .coffee-typing { display: flex; align-items: center; }
.coffee-invite .coffee-caret { width: 2px; height: .9em; margin-left: 3px; background: currentColor; opacity: 0; }
.coffee-invite.prompting .coffee-caret { opacity: 1; animation: coffee-blink 1s steps(1) infinite; }
.coffee-invite .coffee-arrow { width: 28px; height: 52px; margin-left: 2px; overflow: visible; }
.coffee-invite .coffee-arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.coffee-invite.typed .coffee-arrow path { animation: coffee-draw .6s ease-out forwards; }
.coffee-invite.typed .coffee-arrow { animation: coffee-bob 1.8s ease-in-out .8s infinite; }
.coffee-invite:hover .coffee-prompt, .coffee-invite:focus-visible .coffee-prompt { color: #fff; }

@keyframes coffee-draw { to { stroke-dashoffset: 0; } }
@keyframes coffee-blink { 50% { opacity: 0; } }
@keyframes coffee-bob { 50% { translate: 0 5px; } }

@media (prefers-reduced-motion: reduce) {
  .coffee-invite.drawing .coffee-lines path,
  .coffee-invite.drawing .coffee-brush-stroke,
  .coffee-invite.typed .coffee-arrow path { animation: none; stroke-dashoffset: 0; }
  .coffee-invite.typed .coffee-arrow, .coffee-invite.prompting .coffee-caret { animation: none; }
  .coffee-fill, .coffee-shot-flow, .coffee-pour-column, .coffee-flow-highlight, .coffee-ripple { animation: none; }
}