/* Campaign effects, painted in the campaign's own enamel. efectos.js mounts them per campaign. */

/* A · Serie de luces: a wire of painted bulbs swagged across the wall, under the header sign. */
.serie { position: absolute; inset: 0 0 auto; height: 64px; pointer-events: none; z-index: 1; }
.serie svg { width: 100%; height: 100%; overflow: visible; display: block; }
.serie__cable { fill: none; stroke: var(--tinta); stroke-width: 2.5; stroke-linecap: round; }
.foco__casquillo { fill: var(--tinta); }
.foco__vidrio { stroke: var(--tinta); stroke-width: 2; }
.foco__luz { opacity: 0; }
.serie--encendida .foco__luz { animation: foco 2.4s steps(1, end) infinite; animation-delay: calc(var(--n) * -0.3s); }
@keyframes foco { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.serie--carrera .foco__luz { animation: carrera .9s steps(1, end) 2; animation-delay: calc(var(--n) * 45ms); }
@keyframes carrera { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
.cabeza { position: relative; }

/* B · Gritería: flat painted bursts behind the lettered line. */
.polvora { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.campana { position: relative; }
.campana:has(> .polvora) > :not(.polvora) { position: relative; z-index: 1; }
.chispa { position: fixed; pointer-events: none; z-index: 50; width: 0; height: 0; }
.chispa i {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px;
  background: var(--c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: chispa .7s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes chispa {
  to { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.4); opacity: 0; }
}

/* C · Regalo envuelto: a ribbon cross and bow that untie as the panel comes into view. */
.muro--envuelto > .panel { overflow: visible; }
.lazo { position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; overflow: hidden; }
.lazo__v, .lazo__h { position: absolute; background: var(--sticker); box-shadow: inset 0 0 0 2px var(--tinta); transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.lazo__v { top: 0; bottom: 0; left: calc(50% - 14px); width: 28px; }
.lazo__h { left: 0; right: 0; top: calc(38% - 14px); height: 28px; }
.lazo__mono {
  position: absolute; left: calc(50% - 51px); top: calc(38% - 39px); width: 102px; height: 78px;
  transition: transform .7s cubic-bezier(.5, 0, .75, 0), opacity .5s .2s;
}
.lazo__mono path { fill: var(--sticker); stroke: var(--tinta); stroke-width: 2.5; stroke-linejoin: round; }
.lazo--suelto .lazo__v { transform: translateY(-101%); }
.lazo--suelto .lazo__h { transform: translateX(101%); }
.lazo--suelto .lazo__mono { transform: translateY(140px) rotate(28deg); opacity: 0; }
.muro--envuelto > .panel > .sticker { transform-origin: 50% -10px; animation: colgante 3.2s ease-in-out infinite alternate; }
@keyframes colgante { from { transform: rotate(4deg); } to { transform: rotate(10deg); } }

@media (prefers-reduced-motion: reduce) {
  .serie--encendida .foco__luz { animation: none; opacity: 1; }
  .lazo { display: none; }
  .muro--envuelto > .panel > .sticker { animation: none; }
}

/* ---------- Noviembre Negro ---------- */

/* Rebaja a brocha: a red brush stroke strikes the old price, then the new price is lettered in. */
.precio__antes--brocha { position: relative; opacity: 1; justify-self: start; font-size: 17px; }
.precio__antes--brocha:has(.brocha) { text-decoration: none; }
/* Staff preview only: a sample old price, dashed so it can't pass for a real one. */
.precio__antes[data-muestra] { outline: 2px dashed currentColor; outline-offset: 3px; }
/* Thin enough that the old price stays readable: the customer must still see what it cost. */
.brocha { position: absolute; left: -4px; width: calc(100% + 8px); top: 50%; height: 10px; transform: translateY(-40%) rotate(-3deg); overflow: visible; pointer-events: none; }
.brocha path { fill: none; stroke: var(--sticker); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rebajado .brocha path { animation: brochazo .35s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes brochazo { to { stroke-dashoffset: 0; } }
.rebajado .precio__monto { animation: rotular .45s .3s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes rotular { from { transform: scale(1.35) rotate(-4deg); opacity: 0; } }

/* Cinta de ofertas: a painted band of the campaign's words running across the wall. */
/* The tilted band reaches past the screen edges; the page must not scroll sideways for it. */
body:has(.cinta) { overflow-x: clip; }
.cinta { overflow: hidden; background: var(--sticker); color: var(--stickerTexto); border-block: 3px solid var(--tinta); margin: 14px -14px 0; transform: rotate(-1.5deg); }
.cinta__pista { display: flex; width: max-content; animation: cinta 22s linear infinite; }
.cinta__pista span { font: 400 17px/1 var(--letra); padding: 9px 0 8px; white-space: nowrap; }
@media (max-width: 719px) {
  .cinta { margin-top: 8px; }
  .cinta__pista span { font-size: 14px; padding: 6px 0 5px; }
}
@keyframes cinta { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .brocha path { animation: none; stroke-dashoffset: 0; }
  .rebajado .precio__monto { animation: none; }
  .cinta__pista { animation: none; }
}