/* wareby: the warebucks story (homepage, desktop + phone).
   four real shop clips play in turn inside a rounded card, joined by straight cuts. along the bottom: a frosted receipt
   (what you bought, where) and a dark glass wallet whose balance rolls like an odometer. coins
   flip along an arc between them; thin bars along the top show which shop you're in. */
.lv{position:relative;aspect-ratio:5/4;width:100%;border-radius:28px;overflow:hidden;background:#2A2D38;isolation:isolate;box-shadow:0 2px 4px rgba(20,27,52,.06),0 30px 60px -30px rgba(120,80,0,.55);}
.lv-poster,.lv-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.lv-v{z-index:0;}
.lv-v.top{z-index:1;} /* clips stack; the cut just swaps which one is on top */
.lv-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(10,14,30,.42),rgba(10,14,30,0) 22%,rgba(10,14,30,0) 60%,rgba(10,14,30,.4));}

/* which shop we're in */
.lv-prog{position:absolute;z-index:3;left:16px;right:16px;top:14px;display:flex;gap:5px;}
.lv-prog i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.34);overflow:hidden;box-shadow:0 1px 4px rgba(10,14,30,.35);}
.lv-prog b{display:block;width:0;height:100%;border-radius:inherit;background:#fff;transition:width .1s linear;}

/* the receipt */
.lv-rc{position:absolute;z-index:4;left:14px;bottom:14px;display:flex;align-items:center;max-width:calc(100% - 210px);padding:7px 8px 7px 7px;border-radius:17px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 18px 36px -18px rgba(10,14,30,.65);opacity:0;transform:translateY(16px) scale(.96);transform-origin:left bottom;transition:opacity .3s ease,transform .6s cubic-bezier(.2,.9,.25,1);}
.lv-rc.on{opacity:1;transform:none;}
.lv-rc>img{flex:none;width:40px;height:40px;margin-right:10px;border-radius:11px;object-fit:cover;}
.lv-rt{min-width:0;padding-right:4px;}
.lv-rt b{display:block;overflow:hidden;font-size:14px;font-weight:800;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;color:var(--ink,#141B34);}
.lv-rt small{display:flex;align-items:center;gap:4px;margin-top:2px;overflow:hidden;font-size:12.5px;font-weight:700;color:var(--muted,#5E6577);white-space:nowrap;}
.lv-rt small svg{flex:none;width:10px;height:12px;color:var(--blue,#2148E0);}
.lv-tag{flex:none;display:inline-flex;align-items:center;gap:5px;height:28px;max-width:0;margin-left:0;padding:0;overflow:hidden;border-radius:999px;font-style:normal;font-size:12.5px;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;transition:max-width .5s cubic-bezier(.2,.9,.25,1),padding .5s cubic-bezier(.2,.9,.25,1),margin .5s cubic-bezier(.2,.9,.25,1),opacity .25s;}
.lv-tag.on{max-width:150px;margin-left:6px;padding:0 11px 0 8px;opacity:1;}
.lv-tag img{width:16px;height:16px;}
.lv-tag svg{width:13px;height:13px;}
.lv-tag.up{background:var(--gold,#F6B92B);color:var(--ink,#141B34);}
.lv-tag.paid{background:var(--blue,#2148E0);color:#fff;}
.lv-rc.spend .lv-pr{display:none;}

/* the wallet */
.lv-wal{position:absolute;z-index:4;right:14px;bottom:14px;display:flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;border-radius:18px;background:rgba(16,20,38,.6);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 18px 36px -18px rgba(0,0,0,.75);color:#fff;}
.lv-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);}
.lv-ic img{width:28px;height:28px;}
.lv-ic.flip img{animation:lvFlip .7s cubic-bezier(.2,.9,.25,1);}
@keyframes lvFlip{to{transform:rotateY(360deg)}}
.lv-wt small{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.66);}
.lv-bal{display:block;margin-top:1px;font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.od{display:inline-block;height:1.1em;overflow:hidden;vertical-align:top;}
.od-s{display:block;transition:transform .9s cubic-bezier(.2,.9,.25,1);}
.od-s>span{display:block;height:1.1em;line-height:1.1em;text-align:center;}
.lv-delta{position:absolute;right:10px;bottom:calc(100% + 7px);padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .5s cubic-bezier(.2,.9,.25,1);}
.lv-delta.up{background:var(--gold,#F6B92B);color:var(--ink,#141B34);}
.lv-delta.down{background:#fff;color:var(--ink,#141B34);}
.lv-delta.on{opacity:1;transform:none;}

/* coins in flight, and the little nudge when they land */
.lv-coin{position:absolute;left:0;top:0;z-index:5;width:22px;height:22px;pointer-events:none;will-change:transform;}
.lv-coin img{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(90,60,0,.35));animation:lvSpin .6s linear infinite;}
@keyframes lvSpin{to{transform:rotateY(360deg)}}
.lv-hit{animation:lvHit .32s cubic-bezier(.2,.9,.25,1);}
@keyframes lvHit{40%{transform:scale(1.05)}}

/* the headline lines light up with the phase they describe */
.bk-w{display:block;opacity:.26;transition:opacity .45s var(--ease,ease);}
.bk-w.on{opacity:1;}
.bk-t{position:relative;display:inline-block;isolation:isolate;}
.bk-t::after{content:'';position:absolute;left:0;right:0;bottom:.04em;height:.085em;border-radius:.05em;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease,ease);z-index:-1;}
.bk-w.on .bk-t::after{transform:scaleX(1);}
.bk-cap{display:block;min-height:1.4em;margin-top:14px;text-align:center;font-size:15px;font-weight:700;color:#5A5446;}
.bk-cap.in{animation:capIn .4s var(--ease,ease);}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}}

/* still version: motion off, screenshots, old browsers (the first frame + one receipt) */
.bk-still .bk-w{opacity:1;}
.bk-still .bk-t::after{display:none;}
.bk-still .lv-rc{opacity:1;transform:none;}
.bk-still .lv-prog{display:none;}
@media (prefers-reduced-motion:reduce){.bk-w{opacity:1;}.bk-t::after{display:none;}}

/* small cards (phones, and the phone page on a wider screen): smaller chips, the +N tag becomes a
   corner badge and the wallet drops its label so both fit on one row. keyed to the CARD's width. */
.lv{container-type:inline-size;}
@container (max-width:460px){
  .lv-prog{left:12px;right:12px;top:10px;gap:4px;}
  .lv-prog i{height:2.5px;}
  .lv-rc{left:9px;bottom:9px;max-width:calc(100% - 112px);padding:5px 6px 5px 5px;border-radius:14px;overflow:visible;}
  .lv-rc>img{width:32px;height:32px;margin-right:8px;border-radius:9px;}
  .lv-rt b{font-size:12.5px;}
  .lv-rt small{font-size:11px;}
  .lv-pr,.lv-full{display:none;}
  .lv-tag{position:absolute;right:-8px;top:-17px;height:22px;max-width:none;padding:0 8px 0 6px;font-size:11.5px;gap:4px;box-shadow:0 6px 14px -6px rgba(10,14,30,.5);transform:scale(.6);transition:opacity .2s,transform .45s cubic-bezier(.34,1.56,.64,1);}
  .lv-tag.on{margin:0;padding:0 8px 0 6px;transform:none;}
  .lv-tag img{width:14px;height:14px;}
  .lv-tag svg{width:11px;height:11px;}
  .lv-wal{right:9px;bottom:9px;gap:7px;padding:5px 13px 5px 5px;border-radius:15px;}
  .lv-ic{width:32px;height:32px;border-radius:10px;}
  .lv-ic img{width:23px;height:23px;}
  .lv-wt small{display:none;}
  .lv-bal{margin:0;font-size:21px;}
  .lv-delta{right:6px;font-size:11.5px;padding:2px 8px;}
  .lv-coin{width:18px;height:18px;}
}
@media (max-width:520px){
  .lv{border-radius:22px;}
  .bk-cap{min-height:2.8em;font-size:13.5px;}
}