/* Round 4: round glass lids that zoom out to the whole video; living photo deck; gallery videos; tap-to-play kitchen clips. */

/* ---------- I · THE LIDS ---------- */
.lens__stage { overflow: hidden; background: var(--ink); }
.lens__items { position: absolute; inset: 0; z-index: 3; }
.lensv { position: absolute; left: 0; top: 0; margin: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
.lensv__clip { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; background: #111; isolation: isolate; }
.lensv__clip video { position: absolute; left: 0; width: 100%; object-fit: cover; }
.lensv__glass { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: var(--gl, 1);
  background: radial-gradient(50% 30% at 32% 30%, rgba(255,255,255,.22), transparent 60%), linear-gradient(118deg, transparent 35%, rgba(255,255,255,.14) 43%, transparent 50%); }
.lensv__rim { position: absolute; left: 0; width: 100%; aspect-ratio: 1; top: calc((var(--h) - var(--w)) / 2); border-radius: 50%; pointer-events: none; opacity: var(--rim, 1);
  background: conic-gradient(from 210deg, #e9ebe8, #8b8f8c 12%, #f7f8f6 22%, #6d716e 36%, #d6d9d6 50%, #5b5f5c 64%, #f2f3f1 78%, #8a8e8b 90%, #e9ebe8);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 92.6%, #000 99%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 92%, #000 92.6%, #000 99%, transparent 100%);
}
.lensv::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; opacity: calc(1 - var(--rim, 1));
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 60px 120px -40px rgba(0,0,0,.95); }
.lensv figcaption { position: absolute; left: 50%; top: var(--capY, 100%); transform: translate(-50%, 14px); white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  font-size: 13px; letter-spacing: .06em; color: var(--porcelain); background: rgba(16,18,16,.55); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: var(--cap, 0); transition: opacity .3s; }
.lens .spin__copy { z-index: 120; }

/* ---------- VI · founder photos keep moving ---------- */
.deck__card { transition: translate .9s var(--ease), scale .9s var(--ease); animation: bob 5.5s ease-in-out infinite; }
.deck__card:nth-child(2) { animation-delay: -1.4s; } .deck__card:nth-child(3) { animation-delay: -2.8s; } .deck__card:nth-child(4) { animation-delay: -4.2s; }
@keyframes bob { 50% { translate: 0 -10px; } }
.deck__card.is-lead { animation: none; translate: 0 -7%; scale: 1.12; z-index: 9 !important; box-shadow: 0 50px 90px -30px rgba(0,0,0,.6); }

/* ---------- VII · kitchen: tap a clip to play it ---------- */
.clip { cursor: pointer; }
.clip__play { position: absolute; left: 50%; top: 44%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: rgba(246,244,239,.85); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: opacity .3s, transform .3s; }
.clip__play svg { width: 26px; height: 26px; margin-left: 3px; }
.clip.is-playing .clip__play { opacity: 0; transform: scale(.8); }

/* ---------- VII-b · gallery videos ---------- */
.ph video { height: 100%; width: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ph--v::after { content: "Video"; position: absolute; right: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; color: #fff; background: rgba(0,0,0,.45); }
.lightbox__fig video { max-width: 100%; max-height: 82vh; border-radius: 10px; }

/* ---------- III · buffet line: the open dish in front of you zooms out of the pot ---------- */
.chafer { --zoom: 0; }
.chafer__unit { transform: scale(calc(1 + var(--zoom) * .3)); transform-origin: 50% 70%; z-index: calc(1 + var(--zoom) * 10); }
.chafer__pan { inset: calc(6% - var(--zoom) * 6%); border-radius: calc(50% - var(--zoom) * 42%); }
.chafer__pan video { transform: scale(calc(1.1 - var(--open) * .1 - var(--zoom) * .02)); }
.chafer__stand { opacity: calc(1 - var(--zoom) * .8); }

/* round 5: steady gallery tiles; every tile is 4:5 so the rows never jump while photos load */
.ph { aspect-ratio: 4 / 5; height: clamp(190px, 26vh, 290px); }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.gal__track { backface-visibility: hidden; }

/* round 5: one hero line at a time (the old one leaves before the new one arrives) */
.beat { transition: opacity .22s ease, transform .3s var(--ease); }
.beat.is-on { transition: opacity .45s ease .22s, transform .6s var(--ease) .22s; }

/* round 5 · phones: tidy and centred (house rule) */
@media (max-width: 860px) {
  .track li, .track li.on { font-size: 0; gap: 0; }
  .track { gap: 14px; }
  .gal__filters { gap: 6px; max-width: 360px; margin: 0 auto; }
  .gal .chip { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .replies { justify-content: center; }
  .chat__hint { justify-content: space-between; }
  .chat__body { height: 50vh; }
  .typebox { max-width: 360px; margin-left: auto; margin-right: auto; }
  .postcard { width: 168px; }
  .lens .spin__copy { bottom: calc(var(--dock-h) + 26px); }
  .feed__q { font-size: 1.3rem; }
}
@media (max-width: 860px) {
  .chat__prog { display: none; }
  .chat__status { font-size: 11.5px; white-space: nowrap; }
  .chat__top b { font-size: 15px; }
  .chat__body { height: 34vh; min-height: 220px; }
}