/* Three still screens from the app: after a capture, the Buds feed, your profile (Isaac's design).
   Each one is drawn at the design's phone size (402 x 874) inside the demo's phone frame (.vid, demo.css)
   and scaled to fit. On a phone they swipe; on desktop they sit in a row. Nothing moves except a
   gentle reveal, and reduced motion holds still. Sample people, plates and numbers are illustrative. */

/* ---------- the row of phones ---------- */
.shots{--pw:min(72vw, 300px); display:flex; gap:18px; margin-top:26px; padding:16px calc(50% - var(--pw) / 2) 20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.shots::-webkit-scrollbar{display:none}
.shot{flex:none; width:var(--pw); margin:0; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:16px}
.shot .vid{--vh:calc(var(--pw) * 874 / 402); cursor:default}
.shot figcaption{padding:0 6px; text-align:center}
.shot figcaption b{display:block; font-size:19px; font-weight:900; line-height:1.1}
.shot figcaption span{display:block; margin-top:4px; font-size:14px; font-weight:700; line-height:1.35; color:var(--ink-2); text-wrap:balance}
/* which phone is in view (phones only) */
.sdots{display:flex; justify-content:center; gap:7px; margin-top:2px}
.sdots i{width:8px; height:8px; border-radius:50%; border:2px solid var(--ink); background:transparent; transition:background .2s}
.sdots i.on{background:var(--ink)}
/* the reveal: the three phones rise in turn as the row scrolls into view */
.shots.reveal .shot{opacity:0; translate:0 28px; transition:opacity .55s ease, translate .7s var(--ease)}
.shots.reveal .shot:nth-child(2){transition-delay:.12s} .shots.reveal .shot:nth-child(3){transition-delay:.24s}
.shots.reveal.in .shot{opacity:1; translate:0 0}
@media (min-width:900px){
  .shots{--pw:270px; gap:40px; padding:24px 20px 10px; overflow:visible; justify-content:center; align-items:flex-start}
  .shot:nth-child(2){margin-top:-22px}
  .sdots{display:none}
}

/* ---------- shared bits inside a screen ---------- */
.shot .k{color:var(--ink)}
.shot .fade{position:absolute; z-index:2; left:0; right:0; bottom:0; height:120px; background:linear-gradient(to top, var(--cream) 30%, var(--cream-clear)); pointer-events:none}
.shot .nav{z-index:3}
.shot .nb{display:flex; flex-direction:column; align-items:center; gap:3px}
.shot .nb i{width:5px; height:5px; border-radius:50%; background:transparent}
.shot .nav.feed .nmouth{opacity:1} .shot .nav.feed .nb i{background:var(--tomato)}
.shot .nav.prof .nme{opacity:1}
.shot .mouth, .shot .fm img, .shot .fcount img, .shot .pc img, .shot .pt .l img{height:auto}

/* ---------- 1. after a capture: a dish you've had before (the reward's repeat state) ---------- */
.shot .rw.soup{background:var(--butter)}
.shot .rbite{align-self:center; margin:6px 0 16px; display:flex; align-items:center; gap:10px; padding:5px 14px 5px 6px; border-radius:var(--r-chip); background:var(--white); border:var(--border); box-shadow:var(--drop-chip); rotate:-4deg}
.shot .rcat{width:40px; height:40px; border-radius:50%; background:var(--butter); border:2px solid var(--ink); display:grid; place-items:center}
.shot .rcat img{width:32px; height:32px; object-fit:contain}
.shot .rtxt{display:flex; flex-direction:column; line-height:1}
.shot .rtxt b{font-size:22px; font-weight:900; letter-spacing:-.02em}
.shot .rtxt small{margin-top:2px; font-size:12px; font-weight:800; color:var(--ink-2)}

/* ---------- 2. the Buds feed ---------- */
.shot .fd{position:absolute; inset:0; overflow:hidden; padding-top:56px; background:var(--page)}
.shot .fhd{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:6px 20px 0}
/* the streak: a pill with a bite out of its top-right corner */
.shot .fstreak{justify-self:start; display:flex; align-items:center; height:30px; padding:0 17px 0 12px; border-radius:var(--r-pill); background:var(--coral); color:var(--white); font-weight:900; font-size:17px; line-height:1;
  -webkit-mask:radial-gradient(circle 7px at calc(100% - 7px) 0, #0000 98%, #000), radial-gradient(circle 7px at calc(100% + 1px) 7px, #0000 98%, #000); -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 7px at calc(100% - 7px) 0, #0000 98%, #000), radial-gradient(circle 7px at calc(100% + 1px) 7px, #0000 98%, #000); mask-composite:intersect}
.shot .fword{width:92px; height:auto; rotate:-4deg}
.shot .fbell{justify-self:end; position:relative; width:44px; height:44px; border-radius:50%; background:var(--white); border:var(--border); box-shadow:var(--drop-card); display:grid; place-items:center}
.shot .fbell svg{width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.shot .fbell i{position:absolute; top:-5px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:var(--r-pill); background:var(--tomato); border:2px solid var(--ink); color:var(--white); font-style:normal; font-size:11px; font-weight:900; display:grid; place-items:center}
.shot .flab{padding:16px 20px 0; font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--ink-2)}
.shot .frow{display:flex; gap:12px; padding:10px 20px 6px; overflow:hidden}
.shot .fb{flex:none; width:68px; display:flex; flex-direction:column; align-items:center; gap:5px}
.shot .fb small{font-size:12px; font-weight:800}
.shot .fav{position:relative; width:64px; height:64px; border-radius:50%; border:var(--border); box-shadow:var(--drop-chip); background:var(--cream) center/cover no-repeat}
.shot .fth{position:absolute; left:-6px; bottom:-6px; width:32px; height:32px; border-radius:50%; border:2px solid var(--ink); object-fit:cover}
.shot .fav i{position:absolute; right:-6px; top:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:var(--r-pill); background:var(--white); border:2px solid var(--ink); font-style:normal; font-size:11px; font-weight:900; display:grid; place-items:center}
.shot .fpost{padding:0 16px; margin-top:30px}
.shot .fph{display:flex; align-items:center; gap:10px; padding:0 2px 10px}
.shot .fav2{width:36px; height:36px; border-radius:50%; border:var(--border); background:var(--cream) center/cover no-repeat}
.shot .fph b{font-size:16px; font-weight:700} .shot .fph small{font-size:14px; font-weight:700; color:var(--ink-2)}
/* the category chip: ink outline, paper inside, a bite out of the corner of both */
.shot .fcat{margin-left:auto; padding:2.5px; border-radius:12px; background:var(--ink); filter:drop-shadow(0 4px 0 var(--ink));
  -webkit-mask:radial-gradient(circle 6px at calc(100% - 6px) 0, #0000 97%, #000), radial-gradient(circle 6px at calc(100% + 1px) 6px, #0000 97%, #000); -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 6px at calc(100% - 6px) 0, #0000 97%, #000), radial-gradient(circle 6px at calc(100% + 1px) 6px, #0000 97%, #000); mask-composite:intersect}
.shot .fcat span{padding:4px 12px 4px 10px; border-radius:9.5px; background:var(--paper); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  -webkit-mask:radial-gradient(circle 8.5px at calc(100% - 3.5px) -2.5px, #0000 97%, #000), radial-gradient(circle 8.5px at calc(100% + 3.5px) 3.5px, #0000 97%, #000); -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 8.5px at calc(100% - 3.5px) -2.5px, #0000 97%, #000), radial-gradient(circle 8.5px at calc(100% + 3.5px) 3.5px, #0000 97%, #000); mask-composite:intersect}
.shot .ftile{position:relative; height:430px; border-radius:30px; overflow:hidden; background:var(--ink)}
.shot .ftile > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* the lick-o-meter: five mouths, each lick fills the next one */
.shot .fbar{position:absolute; left:12px; right:12px; top:12px; height:50px; padding:0 10px; border-radius:var(--r-pill); background:var(--glass); border:var(--border); box-shadow:var(--drop-chip); display:flex; align-items:center; justify-content:space-evenly}
.shot .fm{width:40px; height:22px}
.shot .fm img{width:100%; height:100%; object-fit:contain; filter:grayscale(1); opacity:.32}
.shot .fm.on img{filter:none; opacity:1}
.shot .fcount{position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:6px; height:38px; padding:0 13px 0 6px; border-radius:var(--r-pill); background:var(--glass); border:var(--border); box-shadow:var(--drop-chip); font-weight:900; font-size:16px; line-height:1; font-variant-numeric:tabular-nums}
.shot .fcount img{width:30px}

/* ---------- 3. your profile: the diary ---------- */
.shot .pf{position:absolute; inset:0; overflow:hidden; padding-top:58px; background:var(--page)}
.shot .phd{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:6px 16px}
.shot .pinv{justify-self:start; display:flex; align-items:center; gap:4px; height:32px; padding:0 9px; border-radius:11px; background:var(--white); border:2px solid var(--ink); box-shadow:0 2px 0 var(--ink); font-size:12px; font-weight:900; white-space:nowrap}
.shot .pinv svg{width:12px; height:12px; fill:none; stroke:var(--ink); stroke-width:3.5; stroke-linecap:round}
.shot .phandle{font-size:14px; font-weight:700; color:var(--ink-2)}
.shot .pgear{justify-self:end; width:42px; height:42px; border-radius:50%; border:var(--border); display:grid; place-items:center}
.shot .pgear svg{width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.shot .pme{display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 20px 0}
.shot .pav{width:104px; height:104px; border-radius:50%; border:var(--border); box-shadow:var(--drop-card); object-fit:cover}
.shot .pme b{font-size:30px; font-weight:900; letter-spacing:-.03em; line-height:1}
.shot .pchips{display:flex; justify-content:center; gap:6px; padding:20px 16px 4px; white-space:nowrap}
.shot .pc{display:flex; align-items:center; gap:4px; height:42px; padding:0 10px; border-radius:var(--r-pill); border:var(--border); box-shadow:var(--drop-card); font-size:16px; font-weight:900}
.shot .pc.buds{background:var(--gold); padding:0 14px; rotate:-4deg}
.shot .pc.licks{background:var(--white); rotate:2deg} .shot .pc.licks img{width:24px}
.shot .pc.bites{background:var(--sky); rotate:-2deg}
.shot .ptabs{display:flex; margin:18px 16px 0; padding:4px; border-radius:var(--r-pill); border:var(--border); box-shadow:var(--drop-card); background:var(--white)}
.shot .ptabs span{flex:1; text-align:center; padding:9px 0; border-radius:var(--r-pill); font-size:15px; font-weight:800}
.shot .ptabs .on{background:var(--ink); color:var(--paper)}
.shot .pday{padding:22px 16px 0}
.shot .pdl{display:flex; align-items:baseline; justify-content:space-between; padding:0 4px 10px}
.shot .pdl b{font-size:20px; font-weight:900} .shot .pdl small{font-size:13px; font-weight:800; color:var(--ink-2)}
.shot .pgrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.shot .pt{position:relative; aspect-ratio:3/4; border-radius:20px; overflow:hidden; border:var(--border); box-shadow:var(--drop-chip); background:var(--cream)}
.shot .pt .p{width:100%; height:100%; object-fit:cover}
.shot .pt i{position:absolute; font-style:normal; font-weight:900; border:2px solid var(--ink); border-radius:var(--r-pill); display:flex; align-items:center; gap:3px; line-height:1.3}
.shot .pt .t{left:6px; top:6px; padding:2px 7px; background:var(--glass); font-size:10px}
.shot .pt .l{right:6px; bottom:6px; padding:2px 7px 2px 5px; background:var(--white); font-size:11px}
.shot .pt .l img{width:14px}

@media (prefers-reduced-motion: reduce){
  .shots.reveal .shot{opacity:1; translate:none; transition:none}
  .sdots i{transition:none}
}