/* Banner cinematográfico da página de produto (inc/produto-cinematic.php), 10/10/2026. Escrito à mão (arquivo solto,
   fora dos pacotes, só no produto que tem o meta _bl_cine). */
.bl .bl-cine{padding:24px 0}
.bl .bl-cine-f{position:relative;margin:0;aspect-ratio:1904/704;border-radius:28px;overflow:hidden;background:#EDE7DF}
.bl .bl-cine-f picture,.bl .bl-cine-f img{display:block;width:100%;height:100%}
.bl .bl-cine-f img{object-fit:cover;object-position:50% 50%}
/* entrada: a foto abre do centro e se afasta devagar */
.bl .bl-cine.arma .bl-cine-f{clip-path:inset(8% 12% round 28px);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.bl .bl-cine.arma .bl-cine-f img{transform:scale(1.14);transition:transform 2.2s cubic-bezier(.2,.75,.2,1)}
.bl .bl-cine.arma.on .bl-cine-f{clip-path:inset(0 round 28px)}
.bl .bl-cine.arma.on .bl-cine-f img{transform:none}
@media (max-width:767px){
	.bl .bl-cine{padding:16px 0}
	.bl .bl-cine-f{aspect-ratio:4/3;border-radius:22px}
	.bl .bl-cine.arma .bl-cine-f{clip-path:inset(6% 8% round 22px)}
	.bl .bl-cine.arma.on .bl-cine-f{clip-path:inset(0 round 22px)}
}
/* Página de texto (Sobre, 09/10): o banner entra logo abaixo do título, na largura da página, e no celular fica com a
   arte inteira (o nome BLÄYVA atravessa a foto toda; o recorte 4:3 cortaria) */
.bl .pg-cine{padding:0;margin-top:36px}
@media (max-width:767px){
	.bl .pg-cine{margin-top:24px}
	.bl .bl-cine-inteira{aspect-ratio:1904/704;border-radius:16px}
	.bl .bl-cine.arma .bl-cine-inteira{clip-path:inset(6% 8% round 16px)}
	.bl .bl-cine.arma.on .bl-cine-inteira{clip-path:inset(0 round 16px)}
}
@media (prefers-reduced-motion:reduce){
	.bl .bl-cine .bl-cine-f,.bl .bl-cine .bl-cine-f img{clip-path:none!important;transform:none!important;transition:none!important}
}