/* cup.css — the live drink render. A clear vessel so every layer shows and
   visibly animates as size / milk / shots / syrup / foam / ice change. */

.cup-stage {
  position: relative;
  width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px 0 0;
  --cup-w: 168px;
  --cup-h: 240px;
  --liquid: #7a5233;
  --liquid-2: #b8895a;
  --foam: #f4ead2;
  --band: #cbb083;
}

.cup {
  position: relative;
  width: var(--cup-w);
  height: var(--cup-h);
  transition: width .5s var(--ease), height .5s var(--ease);
  filter: drop-shadow(0 22px 26px rgba(6,48,31,.22));
  will-change: width, height;
}

/* clear vessel body (tapered) */
.cup-vessel {
  position: absolute; inset: 0;
  top: 22px;
  border-radius: 12px 12px 20px 20px / 10px 10px 34px 34px;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.02) 22%, rgba(255,255,255,.02) 78%, rgba(255,255,255,.28));
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: inset 0 2px 8px rgba(255,255,255,.4), inset -8px 0 18px rgba(6,48,31,.06);
  overflow: hidden;
  clip-path: polygon(6% 0, 94% 0, 88% 100%, 12% 100%);
}
.cup.iced .cup-vessel { top: 30px; border-radius: 8px 8px 16px 16px; }

/* stacked liquid bands, bottom-aligned */
.cup-fill { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.cup-band-liquid {
  width: 100%;
  transition: flex-grow .55s var(--ease-inout), background .55s var(--ease), opacity .4s;
}
.band-base { background: var(--liquid); flex: 2 1 0; }
.band-mid  { background: var(--liquid-2); flex: 1.4 1 0; }
.band-foam { background: var(--foam); flex: 0 1 0; opacity: 0; }
.cup.has-foam .band-foam { flex-grow: .5; opacity: 1; }

/* top surface sheen line between milk & foam */
.cup-fill::after { content: ""; position: absolute; left: 0; right: 0; top: 14%; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,.12), transparent); pointer-events: none; }

/* ice cubes */
.cup-ice { position: absolute; inset: 8% 8% 6% 8%; pointer-events: none; }
.ice {
  position: absolute; width: 30%; height: 22%;
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 5px;
  opacity: 0; transform: scale(.6) rotate(var(--r, 12deg));
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.cup.iced .ice.on { opacity: .9; transform: scale(1) rotate(var(--r, 12deg)); }

/* fruit / inclusion pieces (refreshers) */
.frt { position: absolute; width: 12px; height: 12px; border-radius: 50%; opacity: 0; transition: opacity .4s; }
.cup.has-fruit .frt { opacity: .85; }

/* cold foam / whip on top */
.cup-topfoam {
  position: absolute; left: 8%; right: 8%; top: 24px; height: 0;
  background: var(--foam);
  border-radius: 40% 40% 12px 12px / 60% 60% 12px 12px;
  opacity: 0;
  transition: height .5s var(--ease), opacity .4s, background .4s;
  z-index: 3;
}
.cup.has-topfoam .cup-topfoam { height: 30px; opacity: 1; }
.cup.iced.has-topfoam .cup-topfoam { top: 30px; }

.cup-whip {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 78%; height: 46px; opacity: 0;
  background:
    radial-gradient(circle at 30% 70%, #fffdf8 40%, transparent 42%),
    radial-gradient(circle at 55% 55%, #fffdf8 42%, transparent 44%),
    radial-gradient(circle at 72% 72%, #fffdf8 38%, transparent 40%),
    radial-gradient(circle at 45% 84%, #fffdf8 44%, transparent 46%);
  filter: drop-shadow(0 3px 3px rgba(6,48,31,.12));
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  z-index: 4;
}
.cup.has-whip .cup-whip { opacity: 1; }

/* drizzle over whip/foam */
.cup-drizzle { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 70%; height: 40px; opacity: 0; transition: opacity .4s; z-index: 5; }
.cup.has-drizzle .cup-drizzle { opacity: .9; }

/* lids */
.cup-lid { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 6; }
.cup.hot .cup-lid { width: calc(var(--cup-w) - 2px); height: 26px; background: linear-gradient(#f6f1e8, #e3d7c2); border-radius: 12px 12px 6px 6px; box-shadow: inset 0 -3px 4px rgba(0,0,0,.06); }
.cup.hot .cup-lid::after { content: ""; position: absolute; left: 24%; top: 6px; width: 14px; height: 8px; background: #6b5a41; border-radius: 3px; } /* sip hole */
.cup.iced .cup-lid { width: calc(var(--cup-w) + 6px); height: 34px; background: radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.55), rgba(255,255,255,.2)); border: 1.5px solid rgba(255,255,255,.5); border-radius: 50% 50% 8px 8px / 70% 70% 8px 8px; }

/* straw (iced) */
.cup-straw { position: absolute; left: 58%; top: -30px; width: 10px; height: calc(var(--cup-h) + 20px); background: repeating-linear-gradient(180deg, var(--evergreen, #00694a) 0 12px, #eef7f0 12px 24px); border-radius: 6px; transform: rotate(9deg); transform-origin: bottom center; opacity: 0; z-index: 2; box-shadow: 0 0 0 1px rgba(6,48,31,.08); }
.cup.iced .cup-straw { opacity: 1; }

/* kraft band with the name — the name-on-cup ritual */
.cup-nameband {
  position: absolute; left: -4px; right: -4px; bottom: 34%;
  background: var(--band);
  padding: 9px 8px; z-index: 7;
  box-shadow: 0 2px 5px rgba(6,48,31,.12);
  border-top: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(0,0,0,.06);
  text-align: center;
  transition: background .4s;
}
.cup.iced .cup-nameband { bottom: 40%; background: rgba(255,255,255,.82); }
.cup-nameband .brandline { font-family: var(--display); font-weight: 600; font-size: 12px; color: #4a3a20; letter-spacing: .01em; opacity: .8; }
.cup.iced .cup-nameband .brandline { color: var(--pine); }
.cup-nameband .nameline {
  font-family: "Caveat", var(--display); font-size: 26px; line-height: 1.05; color: #2f2413; min-height: 26px;
  transition: color .3s;
}
.cup.iced .cup-nameband .nameline { color: #0a3a2a; }
.cup-nameband .nameline.empty { color: rgba(60,48,26,.32); font-size: 17px; font-family: var(--sans); font-style: italic; }

/* checkmark ✓ box drawn next to name (barista mark) */
.cup-nameband .checkrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cup-nameband .checkbox { width: 15px; height: 15px; border: 2px solid #7a6440; border-radius: 3px; position: relative; flex: none; }
.cup.marked .cup-nameband .checkbox::after { content: ""; position: absolute; left: 3px; top: -1px; width: 5px; height: 9px; border: solid #7a6440; border-width: 0 2px 2px 0; transform: rotate(42deg); }

/* glossy highlight */
.cup-shine { position: absolute; left: 14%; top: 30px; width: 10px; height: 62%; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); border-radius: 6px; z-index: 8; pointer-events: none; }

/* pour splash animation on add */
@keyframes cupPop { 0%{transform:scale(1)} 35%{transform:scale(1.05) rotate(-1deg)} 100%{transform:scale(1)} }
.cup.pop { animation: cupPop .5s var(--ease); }

/* size-change nudge */
@keyframes sizeNudge { 0%{transform:translateY(0)} 40%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
.cup.nudge { animation: sizeNudge .45s var(--ease); }