/* Riflesso + Onda blu - banner sconti Soundohm */
.sale-banner {
position: relative;
overflow: hidden;
}
/* Onda: un'ombra morbida che scorre e fa "respirare" il blu */
.sale-banner::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg,
transparent 25%,
rgba(0, 0, 0, 0.10) 50%,
transparent 75%);
background-size: 200% 100%;
animation: banner-wave 7s linear infinite;
pointer-events: none;
}
/* Riflesso: striscia di luce che attraversa ogni tanto */
.sale-banner::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 45%;
height: 100%;
background: linear-gradient(100deg,
transparent,
rgba(255, 255, 255, 0.45),
transparent);
transform: skewX(-18deg);
animation: banner-shine 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes banner-wave {
0% { background-position: 0 0; }
100% { background-position: 200% 0; }
}
@keyframes banner-shine {
0% { left: -60%; }
55%, 100% { left: 130%; }
}
/* Rispetta chi ha disattivato le animazioni nel sistema */
@media (prefers-reduced-motion: reduce) {
.sale-banner::before,
.sale-banner::after { animation: none; }
}
