/* ===========================================================
   RAYOS - Un Poco de Ruido
   Recurso reutilizable: 6 trazos amarillos que se acomodan al
   borde del producto, sirve con cualquier imagen.

   Uso minimo:

     <link rel="stylesheet" href="rayos/rayos.css">

     <div class="rayos" style="--p-x:11.7%; --p-y:6.6%; --p-w:77.6%; --p-h:88.3%">
       <div class="rayos__deco" aria-hidden="true">
         <span class="rayo" style="--u:.99;  --v:-.04; --largo:.155; --grosor:.037; --angulo:-58deg"></span>
         <span class="rayo" style="--u:1.06; --v:.04;  --largo:.155; --grosor:.036; --angulo:-22deg"></span>
         <span class="rayo" style="--u:.01;  --v:.09;  --largo:.184; --grosor:.043; --angulo:30deg"></span>
         <span class="rayo" style="--u:0;    --v:.18;  --largo:.131; --grosor:.035; --angulo:-3deg"></span>
         <span class="rayo" style="--u:.22;  --v:.90;  --largo:.155; --grosor:.049; --angulo:-37deg"></span>
         <span class="rayo" style="--u:.30;  --v:.96;  --largo:.165; --grosor:.036; --angulo:-67deg"></span>
       </div>
       <img src="imagenes/ChopperUnPocoDeRuido1.png" alt="Chopp Un Poco de Ruido">
     </div>

   Por que no es un solo archivo .svg: un SVG estirado sobre una caja
   que no es cuadrada deforma el trazo, los rayos quedan ovalados y con
   el angulo torcido. Asi cada rayo mide siempre contra el ANCHO del
   producto y no se deforma nunca. Igual tenes rayos.svg al lado por si
   alguna vez queres el overlay fijo de una sola pieza.
   =========================================================== */

.rayos {
  /* --- 1. La caja del producto DENTRO de la imagen, en % de la imagen ---
     Son los bordes del pixel opaco, no los del archivo. Si el PNG trae
     margen transparente alrededor (como el chopp), estos 4 numeros lo
     descuentan y los rayos se pegan al producto de verdad.
     Los valores de abajo son el default para una imagen sin margen.
     medir-producto.js los calcula solo si no queres hacerlo a mano. */
  --p-x: 0%;
  --p-y: 0%;
  --p-w: 100%;
  --p-h: 100%;

  /* --- 2. Los controles globales --- */
  --rayo-color: #FECB05;
  --rayo-escala: 1;    /* largo de todos los rayos a la vez */
  --rayo-grosor: 1;    /* grosor de todos los rayos a la vez */

  position: relative;
  display: block;
}

.rayos > img {
  position: relative;
  z-index: 1;          /* el producto va adelante de los rayos */
  display: block;
  width: 100%;
  height: auto;
}

.rayos__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Cada rayo:
     --u, --v   donde cae su centro sobre la caja del producto.
                0 = borde izquierdo o superior, 1 = borde derecho o
                inferior. Podes pasarte: 1.06 lo saca un poco afuera,
                -.04 lo sube por arriba del producto.
     --largo    largo del trazo, en fraccion del ANCHO del producto.
     --grosor   grosor del trazo, en fraccion del ANCHO del producto.
     --angulo   0deg es horizontal, negativo sube hacia la derecha. */
.rayo {
  position: absolute;
  left: calc(var(--p-x) + var(--u) * var(--p-w));
  top: calc(var(--p-y) + var(--v) * var(--p-h));
  width: calc(var(--largo) * var(--p-w) * var(--rayo-escala));
  aspect-ratio: calc(var(--largo) * var(--rayo-escala)) / calc(var(--grosor) * var(--rayo-grosor));
  transform: translate(-50%, -50%) rotate(var(--angulo));
  background: var(--rayo-color);
  border-radius: 999px;
}

/* --- Extras opcionales --------------------------------------------- */

/* Los rayos adelante del producto en vez de atras. */
.rayos--adelante .rayos__deco { z-index: 2; }

/* La tarjeta blanca del ejemplo original, por si la queres. */
.rayos-card {
  background: #fff;
  border-radius: 40px;
  padding: 0;
  overflow: hidden;
}

/* Si el sitio tiene modo oscuro, el amarillo aguanta bien pero el
   fondo de la tarjeta no. */
@media (prefers-color-scheme: dark) {
  .rayos-card { background: #1A1A18; }
}

/* Respeta a quien pidio menos movimiento: aca no hay animacion, pero si
   le agregas una, cortala aca. */
@media (prefers-reduced-motion: reduce) {
  .rayo { animation: none !important; transition: none !important; }
}