/* Lotes 3, 5 e 6 do redesenho, só na página inicial: emblema vivo, catálogo e diálogos.
   Preços, checkout e regras não mudam. Redução de movimento é tratada em blake-theme.css. */

/* Lote 3: entrada do palco em etapas. */
@keyframes stage-rise{from{opacity:0;transform:translateY(18px)}}
.stage .stage-copy:before,.stage .stage-copy>*{animation:stage-rise .8s var(--ease-out) both}
.stage .stage-copy>:nth-child(1){animation-delay:.08s}
.stage .stage-copy>:nth-child(2){animation-delay:.2s}
.stage .stage-copy>:nth-child(3){animation-delay:.3s}
.stage .stage-copy>:nth-child(4){animation-delay:.4s}
.stage .stage-copy>:nth-child(5){animation-delay:.5s}
.stage .stage-visual{animation:stage-rise .9s .15s var(--ease-out) both}

/* Lote 3: emblema vivo com olhos, brilho, faíscas e inclinação. */
.stage .stage-art{container-type:size}
.stage .emblem{position:relative;display:block;width:min(100cqw,calc(100cqh * 580 / 472));aspect-ratio:580/472;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-out);animation:emblem-float 7s ease-in-out infinite}
.stage .emblem img{display:block;width:100%;height:100%}
@keyframes emblem-float{50%{translate:0 -8px}}
.emblem-eye{position:absolute;top:45%;width:9%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;pointer-events:none;background:radial-gradient(circle,#96ecfff2,#43baff66 38%,transparent 70%);mix-blend-mode:screen;opacity:.6;animation:emblem-eyes 4.5s ease-in-out infinite}
.emblem-eye.left{left:43.1%}
.emblem-eye.right{left:57.8%}
@keyframes emblem-eyes{0%,100%{opacity:.35;scale:.8}45%{opacity:1;scale:1.2}}
.emblem-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#ffffff4d 50%,transparent 58%);background-size:260% 100%;background-position:130% 0;mix-blend-mode:overlay;-webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 58%,transparent 100%);animation:emblem-shine 6s 1.2s ease-in-out infinite}
@keyframes emblem-shine{0%{background-position:130% 0}35%,100%{background-position:-40% 0}}
.stage-spot{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(360px circle at var(--mx,50%) var(--my,40%),#176ff238,transparent 65%)}
.stage-embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Lote 5: filtros com pílula deslizante. */
.store-page .store-tabs.has-pill{position:relative}
.store-page .store-tabs.has-pill button{position:relative;z-index:1;background:transparent;transition:color .25s,border-color .25s,background-color .25s}
.store-page .store-tabs.has-pill button.active{background:transparent;border-color:transparent}
.store-page .store-tabs .tab-pill{position:absolute;left:0;top:0;z-index:0;border-radius:10px;background:var(--blue);box-shadow:0 6px 22px #176ff24d;pointer-events:none;transition:transform .45s var(--ease-out),width .45s var(--ease-out),height .45s var(--ease-out)}

/* Lote 5: cartões entram em sequência e a borda acende perto do cursor. */
.store-page #products .product,.store-page #products .product:hover{position:relative;background-image:radial-gradient(320px circle at var(--mx,-400px) var(--my,-400px),#43baff14,transparent 60%)}
.store-page #products .product::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(220px circle at var(--mx,-400px) var(--my,-400px),#43baffd9,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.store-page #products .product.card-enter{animation:card-in .5s var(--ease-out) both;animation-delay:calc(var(--card-index,0) * 60ms)}
@keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.98)}}

/* Lote 4: ícones se desenham ao passar o mouse. */
.store-page :is(.panel-access button,.store-tabs button,.mobile-service-dock :is(button,a)):hover .ui-icon :is(path,circle){stroke-dasharray:1;animation:icon-draw .6s var(--ease-out)}
@keyframes icon-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Lote 6: diálogos entram com escala e o fundo desfoca. */
.store-page dialog[open]{animation:dialog-in .35s var(--ease-out)}
.store-page dialog[open]::backdrop{backdrop-filter:blur(6px);animation:backdrop-in .3s ease}
@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes backdrop-in{from{opacity:0}}
.store-page .checkout-steps .active b{animation:step-pulse 1.8s ease-out infinite}
@keyframes step-pulse{0%{box-shadow:0 0 0 0 #43baff80}70%,100%{box-shadow:0 0 0 9px #43baff00}}

/* Lote 6: QR Code do Pix com linha de leitura enquanto aguarda o pagamento. */
.store-page .pix-qr{position:relative;display:inline-block;overflow:hidden;border-radius:12px}
.store-page .pix-qr img{display:block}
.store-page .pix-qr::after{content:"";position:absolute;left:6%;right:6%;top:6%;height:3px;border-radius:3px;background:#43baff;box-shadow:0 0 14px #43baff;animation:pix-scan 1.8s ease-in-out infinite alternate;pointer-events:none}
@keyframes pix-scan{to{top:92%}}