/* Hero TwoToo: только стакан из ролика (src/boba.mp4) на его же сером фоне. Логика — hero.js. */

:root {
  --bg: #D3D3D3;            /* фон ролика */
  /* коробка стакана: кадр 596×822 */
  --cup-h: min(60svh, 112vw);
  --cup-w: calc(var(--cup-h) * 0.7251);
}
@media (min-aspect-ratio: 4/5) {
  :root { --cup-h: 74svh; }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { overflow-x: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.hero { position: relative; height: calc((var(--total, 6) + 1) * 100svh); }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

.cups { position: absolute; left: 50%; top: 50%; width: var(--cup-w); height: var(--cup-h); transform: translate(-50%, -50%); }
.cup { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.cup::after {   /* мягкая тень под стаканом, как в ролике */
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -2.2%; height: 5%; z-index: -1;
  background: radial-gradient(closest-side, rgba(40, 40, 44, .28), transparent); filter: blur(3px);
}
.cup canvas, .poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.poster { transition: opacity .2s linear; }
.poster.gone { opacity: 0; }