/* =====================================================================
   extras-visual.css — ARQUIVO NOVO. Só camada de acabamento visual (mais moderno/jovem).
   Não muda textos, imagens, caminhos nem layout: só brilho, profundidade e movimento.
   Para desfazer: apague este arquivo e a linha <link> marcada "NOVO: visual" no index.html.
   ===================================================================== */

/* 1. Brilho ambiente roxo e dourado atrás do conteúdo (fixo, não rola, não recebe toque) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 85% -5%,rgba(166,59,240,.28),transparent 70%),
    radial-gradient(50% 35% at -5% 35%,rgba(245,184,28,.10),transparent 70%),
    radial-gradient(60% 40% at 50% 110%,rgba(140,40,220,.22),transparent 70%)}

/* 2. Títulos de seção com degradê sutil */
.sec-head h2,.view>h1{background:linear-gradient(90deg,#fff 30%,var(--lilas));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* 3. Cartões: sobem ao passar o mouse e afundam ao tocar */
.card,.cat,.banner,.story .ring{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
.card:hover,.cat:hover{transform:translateY(-4px);border-color:rgba(190,90,255,.55)}
.card:active,.cat:active,.banner:active{transform:scale(.97)}
.card-art{overflow:hidden}
.card-art img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-art img{transform:scale(1.06)}

/* 4. Botões com brilho e relevo */
.btn{border-radius:999px;box-shadow:0 8px 22px rgba(166,59,240,.4),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover{filter:brightness(1.1);box-shadow:0 10px 28px rgba(166,59,240,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.btn:active{transform:scale(.96)}
.btn.ghost{box-shadow:none}

/* 5. Filtros (chips) e busca mais arredondados, com foco brilhante */
.chip{border-radius:999px;transition:transform .15s,background .2s,border-color .2s}
.chip:active{transform:scale(.94)}
.chip[aria-current]{box-shadow:0 6px 18px rgba(166,59,240,.45)}
.search:focus-within,.search input:focus{border-color:var(--ouro);box-shadow:0 0 0 3px rgba(245,184,28,.22)}

/* 6. Anel das categorias com brilho que pulsa de leve */
.ring{box-shadow:0 0 18px rgba(194,75,255,.35)}

/* 7. Barra de baixo: ícone ativo com destaque dourado */
.tabs a[aria-current]{box-shadow:0 0 18px rgba(166,59,240,.45)}

/* 8. Seletor de tamanho (300 ml / 500 ml / 1 L) com mais presença */
.seg{border:1px solid var(--line)}
.seg button{transition:background .2s,color .2s,box-shadow .2s,transform .15s}
.seg button:active{transform:scale(.95)}

/* 9. Entrada suave de cada tela */
@keyframes extras-tela{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view{animation:extras-tela .35s ease both}

/* Respeita quem prefere menos movimento (o index.html já faz isso; reforço aqui) */
@media (prefers-reduced-motion:reduce){
  body::before{display:none}
  .view,.card,.cat,.btn,.chip,.card-art img{animation:none!important;transition:none!important;transform:none!important}
}
@media print{ body::before{display:none} .view{animation:none} }