/* luz.css — volume e luz no site da Banoffi (12/11/2026). Trabalha junto do luz.js.
   Cartões e fotos inclinam na direção do mouse ou do dedo e acendem onde ele toca; os botões afundam no clique.
   Para desligar tudo: tirar do index.html as linhas do luz.css e do luz.js. */

/* o brilho que acende onde o dedo toca */
.arco,.doce__foto,.mosaico figure,.historia__fotos .redondo,.historia__fotos .ret,.visite__foto,.torr__ambiente,.emcasa__foto{--luz-cor:rgba(255,244,250,.42)}
.citacao,.colada,.torr__info,.cupom{--luz-cor:rgba(255,255,255,.7);--luz-modo:normal;--luz-raio:55%}
.doce__foto{--luz-esc:1.02}
.torrone img.luz-on,.emcasa__foto img.luz-on{filter:brightness(1.06) saturate(1.05)}

/* a abertura em camadas: o selo fica na frente da foto e anda mais que ela (mouse; no Android, a inclinação do aparelho) */
.hero .arco{translate:calc(var(--gx,0) * 5px) calc(var(--gy,0) * 4px)}
.hero .selo-giro{translate:calc(var(--gx,0) * -12px) calc(var(--gy,0) * -9px)}
.cupom__prato{translate:calc((var(--gx,0) + var(--lnx,0)) * 9px) calc((var(--gy,0) + var(--lny,0)) * 5px)}

/* botões com corpo: luz em cima, base embaixo, afundam no clique */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(90,0,45,.28),0 2px 0 rgba(120,0,66,.5),0 2px 4px rgba(168,22,79,.25),0 14px 24px -10px rgba(168,22,79,.55)}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(90,0,45,.28),0 3px 0 rgba(120,0,66,.5),0 4px 8px rgba(168,22,79,.25),0 20px 30px -12px rgba(168,22,79,.6)}
.btn:active{transform:translateY(2px) scale(.99);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(90,0,45,.28),0 0 0 rgba(120,0,66,.5),0 6px 12px -8px rgba(168,22,79,.6)}
.btn--claro{box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(184,0,104,.12),0 2px 0 #e9c4d6,0 2px 4px rgba(75,34,54,.12),0 14px 26px -12px rgba(75,34,54,.4)}
.btn--claro:active{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(184,0,104,.12),0 0 0 #e9c4d6,0 6px 12px -8px rgba(75,34,54,.4)}
.btn--choc{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.25),0 2px 0 rgba(40,14,26,.6),0 14px 26px -12px rgba(75,34,54,.5)}
.btn--choc:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 rgba(40,14,26,.6),0 6px 12px -8px rgba(75,34,54,.5)}

/* preço de cada doce: etiqueta em relevo */
.doce__preco{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(90,0,45,.2),0 8px 16px -8px rgba(60,0,30,.5)}

@media (prefers-reduced-motion:reduce){.hero .arco,.hero .selo-giro,.cupom__prato{translate:none}}