/* styles/04-components-extra.css — Степперы, шторки, анимации */
  .splash{justify-content:center}
  .brandbadge{width:122px;height:122px;border-radius:30px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 44px rgba(0,0,0,.45);margin-bottom:22px;animation:pop .55s cubic-bezier(.2,.8,.2,1)}
  .brandbadge img{width:80px;height:auto}
  .brandmono{font-size:50px;font-weight:800;color:#5B3FA0;letter-spacing:1px;width:100%;height:100%;align-items:center;justify-content:center}
  .brandname{font-size:27px;font-weight:800;letter-spacing:.4px;color:#fff}
  .brandzozh{margin-top:9px;background:var(--acc);color:var(--accTx);font-weight:800;font-size:12px;letter-spacing:2px;padding:5px 13px;border-radius:20px}
  .brandslogan{margin-top:18px;font-size:15px;color:rgba(255,255,255,.82);font-style:italic}
  @keyframes pop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}

  .scanbox{position:relative;width:100%;aspect-ratio:3/4;background:#000;border-radius:18px;overflow:hidden;border:1px solid var(--sep)}
  .scanbox video{width:100%;height:100%;object-fit:cover;display:block}
  .camfb{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:#14161d;padding:24px}
  .scanframe{position:absolute;left:14%;right:14%;top:30%;bottom:30%;border:2px solid var(--acc);border-radius:14px;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .scanline{position:absolute;left:16%;right:16%;top:31%;height:2px;background:var(--acc);box-shadow:0 0 10px 1px var(--acc);animation:scanmv 2.2s ease-in-out infinite}
  @keyframes scanmv{0%{top:31%}50%{top:69%}100%{top:31%}}

  .pcard,.btn,.row,.chip,.kb,.heart,.tab,.qty button,.seg button,.pcard .qadd{transition:transform .12s ease}
  .pcard:active{transform:scale(.97)}
  .row:active{background:rgba(255,255,255,.03)}
  .chip:active,.kb:active,.heart:active,.qty button:active,.tab:active{transform:scale(.92)}
  .btn:active{transform:scale(.985)}
  .pcard .pmeta{align-items:flex-end}
  .pcard .qadd{width:30px;height:30px;border-radius:15px;border:0;background:var(--acc);color:var(--accTx);font-size:22px;line-height:0;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;flex:none}
  .pcard .qadd:active{transform:scale(.84)}
  .hscroll{scroll-snap-type:x proximity}
  .hscroll .pcard{scroll-snap-align:start}
  @keyframes navpush{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
  @keyframes navpop{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
  @keyframes navfade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
  #app.nav-push{animation:navpush .26s ease}
  #app.nav-pop{animation:navpop .26s ease}
  #app.nav-fade{animation:navfade .22s ease}
  #app img.pimg,#app img.himg{opacity:0;transition:opacity .45s ease}
  #app img.ld{opacity:1}
  .tab .cnt{animation:badgepop .34s ease}
  @keyframes badgepop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
  .okmark{animation:okpop .55s cubic-bezier(.2,.9,.3,1.3)}
  @keyframes okpop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
  .delivbar{margin-bottom:12px}
  .delivbar .dtxt{font-size:13px;color:var(--label2);margin-bottom:6px}
  .delivbar .dprog{height:8px;border-radius:5px;background:rgba(255,255,255,.10);overflow:hidden}
  .delivbar .dprog i{display:block;height:100%;background:var(--acc);border-radius:5px;transition:width .45s ease}
  .delivok{margin-bottom:12px;font-size:13px;font-weight:700;color:var(--acc)}